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:

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

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Obtain the Edit Item Link
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Switch to Grid Mode
    • Step 3: Edit the Connected Design Element
    • Step 4: Go to the SharePoint List
    • Step 5: Add ID Column
    • Step 6: Copy and Paste the Item Link
    • Step 7: Copy Edit Item Link
  • Part 2: Add Edit Item Button
    • Step 1: Reconnect Design Element
    • Step 2: Create an href query
    • Step 3: Paste href query
    • Step 4: Save

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:

• How to Create an Anchor Link that Opens to a Specific Accordion Item
• How to Add a Search Box to Your SharePoint Page Using the Code Design Element
• How to Use the Text Alignment Feature for the Textshow Design Element