How to Make a field clickable when using REST API connection with table

This document will help you to make a field clickable when using REST API connection with the table element.

Step 1. Insert Table element from ShortPoint Page Builder.

Step 2. Use REST API connection to connect to your SharePoint list.

Step 3. Click connect, then check fields names in the data example as per the figure below

Step 4. Enable advanced settings

Step 5. Paste this code inside "Map Results" field:

var cilckableField="example1";
var linkedTo="example2";
var resultItems = [];
shortpoint.$.each(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function () {
    var link = "";
    var row=this;
    shortpoint.$.each(row.Cells.results, function () {
        if (this.Key == cilckableField) {
            var cell=this;
            link = cell.Value;
            console.log(link);
            shortpoint.$.each(row.Cells.results, function () {
                var subCell=this;
                if (this.Key == linkedTo && link) {
                    this.Value = '<a target="_blank" href="' + link + '" >' + subCell.Value + '</a>';
                }
            });
        }
    });
});
shortpoint.$.each(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function () {
    resultItems.push({});
    shortpoint.$.each(this.Cells.results, function () {
        resultItems[resultItems.length - 1][this.Key] = this.Value;
    });
});
return resultItems;

Step 6. Replace "example1" with the column name you want it to be clickable.

Step 7. Replace "example2" with the column name that contains the URLs

Step 8. Click Insert

Related articles:

• How to Display the Multiple Hyperlinks in ShortPoint List
• ShortPoint Connect: Basic Tutorial