Hyper links in tables and other HTML goodness

There are instances where you want to display some URL links or raw HTML to be rendered in tabular visuals. For example here are two columns , one showing URL link and the other rendering some HTML objects.

There are two table settings that you might find helpful to display such things:

  1. image
  2. image

#1 is good for quickly turning anything starting with “http(s)://” into direct links

#2 is good for rendering more arbitrary HTML for example the link syntax:
<a href=" *url* "> *link text* </a>

You can create a calculated column that generates unique links as such:
concat_ws('','<a href="https://www.w3schools.com/html/">',[Base Objects],'</a>') as 'HTML'

1 Like

@shaun , with #2 example can we pass row value through url ? if yes, please provide some sample.

e.g :In your screenshot , let say if I want to pass date value(corresponding row start time) to the target url page to filter the records in target link visual.

Thank you,
Ganesh

@Ganesh Similar to the post here: How to set filters / parameters through URL

By adding in parameters to the URL of the dashboard.

 'https://xxxxxxxx/arc/apps/app/2175?param.starttime=',[starttime]

This will set a parameter called “starttime” in the target dashboard.

In the below example I have used …?param.month=11 , which sets parameter to month to 11 :

Now to force this any visual on the page to filter on month=11 we need to use explicit scope by placing the column / field in the filter shelf of the visual that matched the parameter name.

In this case we have a column called “month” that matched the parameter name “month”:

Save & close the visual. Now your visual will be filtered based on the parameter “month” passed in from the URL.

1 Like

@shaun, I was looking for a solution with concat_ws(), since I wan’t to avoid showing the entire url in different column, instead I want to make field value as hyper link to pass it to another window.

@Ganesh You can still do that, your column expression would look like this:

concat_ws('','<a href="https://xxxxxxxx/arc/apps/app/2175?param.starttime=',[starttime],'">',[starttime],'</a>') as 'Start Time'

This would avoid showing the full URL but instead the actual column value

1 Like

@shaun, it worked…thank you!!

Hi Shaun,

Any suggestions to hide the tool tip in below screenshot.
image

Thank you,
Ganesh

@Ganesh refer to this how-to on hiding tooltips.

Thank you @shaun, one more query. How to convert tabular format of the data to expect output as header in a report.
Below is the sample. Field values are dynamic and field names(Date, Name, Location) are static.

image

Appropriate you help!.

Regards.

@Ganesh please refer to this how-to guide:

1 Like

@Shaun, It was my bad I did not provide the right screenshot. Actually I have to show the field value next to the text. For example I have below field values and need to show in the expected format as in screenshot. Any suggestions. I was trying to reuse the guide which you have suggested but some how I was not able to achieve.

image

@Ganesh I would suggest creating two different visuals placing them side by side.

Visual 1:
Date
Location

Visual 2:
Name

Then apply the custom style to both.

:+1: that was my plan B, but before doing that wants to check if there is any alternate fix we can do to the java-script.
While applying below CSS to avoid visual level vertical scrollbar , it is ignoring the scroll bars for visual and dashboard.
How to make sure, it applies to only one visual ?
What custom style used to remove the table border?
::-webkit-scrollbar {
display: none;
}

Thank you,
Ganesh

@Ganesh you can apply a custom class to your visual and reference that in your CSS override:

.visualX::-webkit-scrollbar {
display: none;
}
1 Like

Thank you @shaun , Is there anyway I could provide a image as XLS and when user click on it the visual output should download in XLS format.

With the current download options, it is downloading the full hyperlink along with value, so to avoid that I was looking for above solution.
Please let me know if any other way could help to avoid having hyperlink details while downloading in xls/csv format.

Thank you,
Ganesh

@Ganesh my suggestion is to use custom style / javascript to update the values (html) of the table fields. That will avoid showing the custom HTML when you run data export.

An example of how to get started with custom style shown here:

1 Like

@shaun, thank you I was trying to understand and I am not so good at js/css. if possible, could you provide some example which would help me.

Appreciate your help!

Thank you,
Ganesh

@Ganesh below is an example custom style you can use as a starting point:

Custom Style (Javascript)

return function() {

var f = function() {};

f.version = "1";

f.settings = function() {
    return [
        {
            id: 'Column name',
            defaultValue: 'Scan Exempt Reason'
        },
        
    ];
};

f.afterDraw = function() {
    
    
    // Obtain the settings specified by the user
    var colname = arcapi.getSetting('Column name');

    
    var colIndex = arcapi.dataResult().columnNameToIndex(colname);
    if (colIndex === undefined) {
        console.log('Unknown columnForLabel for the table-bar extension');
        return;
    }
    
    //Arcadia API to get result set and use to manipulate visual
    var d = arcapi.dataResult();
    var rows = d.rows();
    if (rows.length === 0) {
        return;
    }
    
    //***************************
    // Function to add HTML link
    //***************************
    function addHTMLLink(colIndex) {
        var column_to_add_link = d3.selectAll("#" + arcapi.chartId() + " .dataTables_scrollBody tbody tr :nth-child(" + (colIndex+1) +")");
        
        // Apply custom Link to table column
        column_to_add_link.text("")
                          .append("p")
                          .html(function(d, i) {
                            return '<a href="https://xxxxxxxx/arc/apps/app/2175">'+rows[i][colIndex]+"</a>";
                          });
    }
    
    // Let's call our custom function 
    addHTMLLink(colIndex);

};

return f;
}();

Thank you so much @shaun, Is it possible to pass prompt/parameter values through the href link in custom style.

Regards,
Ganesh

@Ganesh you can continue to include parameters in the href similar to what was described earlier, by adding parameters to the end of the URL.