Modify the URL Path Function for ShortPoint Connections

ShortPoint Connect lets you input a custom query URL or automatically selects one for local data sources when establishing a connection. But what if you need to dynamically modify the URL path—adding, removing, or editing directories? That's where the Change Path function comes in, available in select ShortPoint connection types:

• REST API
• Site News
• Org News
• Hub News
• Current Site
• Other Site
• Site URL
• People Search
• RSS Feeds
• Web Service XML
• Microsoft Graph API

TABLE OF CONTENTS

• Prerequisites
• How does changing the URL Path in ShortPoint Connect work?
• How to Modify the URL Path
  • Step 1: Set up your connection
  • Step 2: Enable Advanced Settings
  • Step 3: Input your code
  • Step 4: Hit Connect

Prerequisites

• You have the latest ShortPoint SPFx version installed on your SharePoint site.
• You are a ShortPoint Designer with an active license.

How does changing the URL Path in ShortPoint Connect work?

Suppose you want to dynamically manipulate your connection's URL path—adding, removing, or editing directories. With local data sources, the connection URL isn't editable. With other connections, such as REST API or Microsoft Graph API, you can edit the full URL, but you may want to modify or add path directories based on dynamic data instead.

The Change Path function lets you enter a modified value of the URL path that executes before connecting to your data source, letting you process the URL path string through JavaScript string manipulation methods. It takes one argument (path), which is the path extracted from the URL as a string. If left empty, the function simply returns the existing URL path unchanged—this is the default behavior. If you enter a modified path, the function will use your custom value to replace the original URL path before making the connection.

How to Modify the URL Path

Here is an example scenario of when you may want to use the Change Path function. Let's say that you want to do dynamic manipulation of the URL path of a REST API connection:

The URL path is represented by the value beginning after the top-level domain (TLD) name, which in our case would be:

/sap/fiori/shortpointwidgetbeta/destinations/shortpoint-sharepoint_announcements/_api/web/lists/GetByTitle('Announcements')/Items

And you would like an extra directory to be prepended to the URL, for example:

/root

Since the URL is not directly editable, this functionality will allow you to use custom JavaScript code in order to extract the current path as a JavaScript string, manipulate it, and reattach it to the URL before connecting.

We need to process the URL path so that the final URL path includes the directory or directories we need, in our case:

/root/sap/fiori/shortpointwidgetbeta/destinations/shortpoint-sharepoint_announcements/_api/web/lists/GetByTitle('Announcements')/Items?$select=Id,Title,Body

Follow these steps to do this:

Step 1: Set up your connection

• Switch to Grid Mode (ShortPoint Connect is currently only available in Grid Mode).
• Open the Design Element settings and go to the Connect tab.
• Select a connection type.
• Ensure that all the required fields are completed to establish a successful connection.

Step 2: Enable Advanced Settings

• Scroll down and look for the Enable Advanced Settings toggle. Toggle it on.

Step 3: Input your code

• In the Change Path field, input the code you want to use to update your URL path.

In our example, the value of the path argument would be: 

/sap/fiori/shortpointwidgetbeta/destinations/shortpoint-sharepoint_announcements/_api/web/lists/GetByTitle('Announcements')/Items

Since this argument is a string, we can perform string manipulation methods on it. In the simplest scenario possible, we would just need to concatenate the following:

/root

to the beginning of the string. That means we need to apply the following JavaScript code:

path = '/root' + path;
return path;

Step 4: Hit Connect

• Once done, click the Connect button.

You can then proceed to map the data you want to display in the Items tab and update your Design Element.

That's it! The new URL path has been added to your original URL, replacing the old one, so you now have more control when it comes to sourcing your data.

Related articles:

• Connection Type: REST API
• Map Results Function for ShortPoint Connections
• How to Add an HTTP Header to ShortPoint Connections
• Modify URL Parameters Feature for ShortPoint Connections