Try ShortPoint now
Note: Get to know more about Connection Type: REST API.
TABLE OF CONTENTS
- Step 1. Open the settings of the Table Design Element
- Step 2. Get the field names
- Step 3. Update the REST API connection
- Step 4. Prepare the mapping function
- Step 5. Connect the Table Design Element
- Step 6. Map the items
- Result
Before we begin
- Make sure you have ShortPoint installed on your SharePoint sites(s). We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.
- Make sure you are a ShortPoint Designer with an active license
- You currently have a Table Design Element added to your site, and you already the REST API URL prepared for your REST API connection.
Step 1. Open the settings of the Table Design Element
Edit the page. Click the cog wheel icon to open the settings of the Table Design Element.
- Legacy Page Builder:
- Grid Mode Page Builder:
The Design tab will open.
Note: Table Design Element will be available on Live Mode Page Builder soon. To know more about ShortPoint Live Mode, you may visit Getting Started: The Basics of ShortPoint Page Builder Live Mode.
Step 2. Get the field names
To get the field names, go to the Connect tab in the Page Builder:
Take note of the fields names in the data example as per the figure below. In this case, the data we were able to retrieve contains these labeled information:
Note: If you haven't connected your REST API URL yet, you can connect it for the purpose of checking the field names needed to set up the link in your Table Design Element.
Step 3. Update the REST API connection
To update the REST API connection, click the Disconnect button:
Toggle this button to Enable Advanced Settings:
Scroll down and find the Map Results:
Step 4. Prepare the mapping function
Copy this code below:
var clickableField="login";
var linkedTo="avatar_url";
var formatter = shortpoint.core.util.string.args;
var results = data;
var linkTemplate = "<a href='#' onclick='window.open(\"[0]\");return false;'>[1]</a></br>";
for (var i = 0; i < results.length; i++) {
results[i][clickableField]= formatter(linkTemplate, results[i][linkedTo], results[i][clickableField]);
}
return results;Where:
login should be replaced with the field that you want to be clickable.
avatar_url should be replaced with the field that contains the URLs.
Paste the code into the Map Results box with the updated value for your clickableField and linkedTo:
Step 5. Connect the Table Design Element
Once the data has been pasted, click the Connect button to proceed:
Here is how it will look like when the Table Design Element is connected successfully:
Step 6. Map the items
To control the data that you want to display, switch to Design Tab:
Scroll down to Data and update the following information.
In our case, we added the Login as the clickable field. Hence, we selected the login value for the Link Column.
Note: Columns to show and Columns Titles should always have the same exact value. For example, You have selected 2 fields for the Columns to Show, you must also input 2 field names in the Columns Titles. Otherwise, you may get an error message regarding database after you added your Table Design Elements.
Once you are satisfied with your customization, you can click the Preview button:
Then click the Update button to save the changes to your page:
Result
That's it! You will now have clickable fields in your Table Design Element when using ShortPoint REST API connection.
Related articles:
