Changing the edit link on SPFx remote list viewer to open in same page

Just had a customer asking how to change the default edit link action icon in the table control of the remote list viewer add-in.

Currently, it checks if the item has an edit link, and then opens it in a new window:

return item.dvp_EditFormUrl && window.open(item.dvp_EditFormUrl) || console.log('this item does not have a valid edit url.');

This customer asked to have the edit item open in the same page/tab.
These customizations and changes are exactly what our product excels in. It is actually very simple to change.

Step 1

Edit the web part. In the table control designer toolbar, click on the gear icon to open the control configuration panel:

Step 2

In the control configuration panel, locate the edit action and click on it to open the action's script editor:

Step 3

In the script editor you can change the icon, tooltip and script that this action runs.

Change the script to the following code to open it in a new window.

if(item.dvp_EditFormUrl) window.location = item.dvp_EditFormUrl + "&Source="+encodeURIComponent(window.location.href);

Note: we added the current window as the Source parameter. This will make the edit form redirect back to this current page when the user is done editing the item.

You are done. Click outside the dialog to close it.

Made a mistake? Want to revert back to default? No worries. Like all other properties, once you change their default value, a "revert to default..." option appears under the new value, allowing you to revert your changes to go back to defaults quickly.

Questions? Suggestions? Feel free to ask here in comments or email our support team.