By default, when you have connected Design Elements, you don’t have the option to directly edit an item on your SharePoint page:
This article will demonstrate how to add an edit button to connected ShortPoint Design Elements:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have a ShortPoint Design Element connected to a SharePoint List on your page. You’ll be able to identify connected Design Elements when you see the link icon:
Step-by-step Tutorial
The steps have been divided into two parts. Carefully follow the steps to successfully add an edit item button.
Part 1: Obtain the Edit Item Link
This section will demonstrate how to get the edit link of items in a connected SharePoint list.
Step 1: Edit the ShortPoint Web Part
Go to the SharePoint page with the connected Design Element and click Edit:
Close the Toolbox:
Edit the ShortPoint web part:
Step 2: Switch to Grid Mode
NOTEShortPoint Connect is currently only available in Grid Mode.
Click the Switch to Grid Mode icon:
Step 3: Edit the Connected Design Element
NOTEBefore proceeding, you must already have a ShortPoint Design Element connected to a SharePoint List on your page. You’ll be able to identify connected Design Elements when you see the link icon. To learn more about ShortPoint Connect, check out ShortPoint Connect: Basic Tutorial.
Hover over the connected Design Element and click the cogwheel icon:
Step 4: Go to the SharePoint List
Click the item after the last ‘/’. In our case, it is All Items. This will redirect you to the connected SharePoint List:
Step 5: Add ID Column
Click the view drop-down:
Then, select Edit current view:
Select the ID column:
Click OK:
You will now have the ID column:
Step 6: Copy and Paste the Item Link
[1] Select any item and click [2] Copy Link:
Open a new tab, paste the item link in your browser’s address bar, and hit Enter:
You will be redirected to this page:
Step 7: Copy Edit Item Link
Click Edit all:
You will see the URL change. Copy everything from the beginning until you reach ID=. This is your Edit Item Link. Take note of this, as you will need it in the next part.
Part 2: Add Edit Item Button
This section will demonstrate how to add the edit item button.
Step 1: Reconnect Design Element
Go back to your SharePoint page and go to the Connected tab:
Then, click Disconnect:
After, click Connect again:
Step 2: Create an href query
Copy the href query below:
<a href="Edit Item Link">Edit this item</a>
Replace Edit Item Link with the edit item link you obtained from Part 1. Here’s how it may look:
<a href="https://mysharepoint.sharepoint.com/Lists/Employees/EditForm.aspx?ID=#ID">Edit this item</a>
Step 3: Paste href query
Go to the Items tab:
Paste the href query you created in the Description field:
Click Preview to see how your Design Element will look:
Once satisfied, click Update:
Step 4: Save
Click the eye icon to see your page in real-time:
Save your changes:
Congratulations! You can now edit a connected item directly on your SharePoint page:
Related articles: