How can we help you today?

How To Make a Clickable Field With ShortPoint Table Design Element When Using REST API Connection

If you currently have a Table Design Element added to your SharePoint page that uses REST API connection, and you want it to have clickable fields, then this article will help you to achieve that.


Sample Result


Note: Get to know more about Connection Type: REST API.

TABLE OF CONTENTS


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:

Table Design Element settings

  • Grid Mode Page Builder:

Grid Mode experience


The Design tab will open.


Table Design Element Page Builder


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:


Table Design Element Connect Tab


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:


Reference Fields


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:


Disconnect your connection

Toggle this button to Enable Advanced Settings:


Enable Advanced Settings


Scroll down and find the Map Results:


Find 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:


Map Results


Step 5. Connect the Table Design Element


Once the data has been pasted, click the Connect button to proceed:


Connect the Design Element


Here is how it will look like when the Table Design Element is connected successfully:


Successfully connected


Step 6.  Map the items


To control the data that you want to display, switch to Design Tab:


Switch to Design Tab


Scroll down to Data and update the following information.


Update the table data


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:


Preview the Design Element


Then click the Update button to save the changes to your page:


Update to save the changes


Result


That's it! You will now have clickable fields in your Table Design Element when using ShortPoint REST API connection. 


Sample Usecase


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 74 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