How can we help you today?

How to Add an Edit Item Button to Connected ShortPoint Design Elements

By default, when you have connected Design Elements, you don’t have the option to directly edit an item on your SharePoint page:


sample connected Design Element


This article will demonstrate how to add an edit button to connected ShortPoint Design Elements:


edit item button


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:


sample connected Design Element


Step-by-step Tutorial

The steps have been divided into two parts. Carefully follow the steps to successfully add an edit item button.


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:


Edit


Close the Toolbox:


close icon


Edit the ShortPoint web part:


Edit properties icon


Step 2: Switch to Grid Mode


NOTEShortPoint Connect is currently only available in Grid Mode.


Click the Switch to Grid Mode icon:


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. 

sample connected Design Element


Hover over the connected Design Element and click the cogwheel icon:


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:


go to the connected SharePoint list


Step 5: Add ID Column

Click the view drop-down:


view drop down


Then, select Edit current view:


Edit current view


Select the ID column:


ID column


Click OK:


OK


You will now have the ID column:


ID column


[1] Select any item and click [2] Copy Link:


copy link


Open a new tab, paste the item link in your browser’s address bar, and hit Enter:


paste link


You will be redirected to this page:


item page


Click Edit all:


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.


copy link


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:


Connected tab


Then, click Disconnect:


Disconnect


After, click Connect again:


Connect


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:


items tab


Paste the href query you created in the Description field:

paste in description field


Click Preview to see how your Design Element will look:


Preview


Once satisfied, click Update:


Update


Step 4: Save

Click the eye icon to see your page in real-time:


eye icon


Save your changes:


save


Congratulations! You can now edit a connected item directly on your SharePoint page:


edit item


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 95 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more