Clickable URL links in Pivot rows
Please refer to this Community post for simplified instructions:
Render HTML In Pivot Table
__________________________________________________________________
Introduction
In this post we'll learn how to modify URLs placed in rows of a Pivot table into clickable links.
Purpose & Benefits
This will allow you to jump to either internal or external web resources for further information regarding a certain element.
Steps
1. Create a pivot table
2. Introduce a dimension of URLs into the pivot's rows element.
3. Copy the following script and paste it into the pivot's script:
Note: This code was updated for the latest Sisense version.
widget.on('domready', function(scope, args) {
var pivots = $('dashboard widget.columnar');
for (k=0; k < pivots.length; k++) {
if ($('dashboard widget.columnar')[k].attributes.widgetid.value === scope.oid) {
var rows = $('TD');
for (i=0; i<rows.length; i++) {
var text = $($('TD', $('dashboard widget.columnar')[k])[i]).text();
$($('TD', $('dashboard widget.columnar')[k])[i]).html(text)
}
}
}
})
Here is another version that enables you to pick which column you wish to define as a URL:
widget.on('ready', function(se, ev){
/*** USER CONFIGURATION ***/
var columnToMakeUrls = 2; // set the column to make linkable (index starts at 0)
var removeLinkDecoration = false; // remove the link underline
/******* *******/
var e = element;
var rows = $('tbody tr', e); // get all rows without headers
var cells = $('td[fidx='+columnToMakeUrls+']', rows); //get all the cells of the column
if(cells.length > 0){
var linkElement; //inner element that responsible for the text usually div or span
var link; // the link url
var htmlLink; //the link html element
// if its a member then we need to change the inner span
if(cells.eq(0).hasClass('p-dim-member')){
_.each(cells, function(cell){
createLinkHTML(cell, 'span');
})
}
//otherwise if its a value we need to change inner div
else if(cells.eq(0).hasClass('p-value')){
_.each(cells, function(cell){
createLinkHTML(cell, 'div');
})
}
}
else{
console.log('Cells were not found');
}
// create html link tag according to the cell and tag
function createLinkHTML(cell, tag){
var linkElement = $(tag, cell);
var link = linkElement.text();
var htmlLink = '<a href="http://xxx.xxx.com/xxxx/'+link+'" target="_blank">' + link +'</a>'
if(removeLinkDecoration){
htmlLink = $(htmlLink).css('textDecoration','none').prop('outerHTML');
}
linkElement.html(htmlLink)
}
})
Notes:
1. This feature does not support infinite scroll, which means that you will have to switch to paging.
2. If you'd like to have these links refer the user to an external page on the Internet, simply add 'http://' before all links in the actual data. This can easily be done by creating a new custom column in the table which holds the URLs and concatenate() 'http://' to the existing URL using the concatenate('string1', 'string2') function.
3) Replace the http://xxx.xxx.com/xxxx/ (just this, without touching the ' or ") with your fixed URL and the column you stated in the variable in the beginning of the code will be appended to the end of this URL.
2. For a table widget (regular table or table with aggregation):
(This can be used for a pivot table as well)
Create a field in the EC containing the following, and use it as-is in the table widget:
'<a href="' + '<fixed url>'+ <EC Field> + '" target="_blank">' + <Field Name to appear in the table> + '</a>' AS Field
Update: July 2019
There is a simpler script by Artem Y to achieve this. From this community post.
widget.on('ready', function(){
var tags = $('tbody span:contains("<")');
for(var i = 0; i<tags.length; i++){
$(tags[i]).replaceWith(String(tags[i].textContent))
}
});-
Official comment
If there is only 1 row in the pivot table - the rendering causes the first row to show up as blank.
Additionally, if you do not want a widget script on your pivot table you can use the renderHTML plugin.
To receive a copy please contact Sisense Support.
Necessary actions:
- unzip the contents of the renderHTML to your plugins folder
- make sure the renderHTML plugin is enabled
- completely remove or comment out the clickable links url script for each of the pivot widgets
- refresh the dashboardComment actions -
Is it possible to do this with a dashboard and apply current dashboard's filters and the selected field similar to:
https://support.sisense.com/entries/57530174-Jump-to-sheet-with-applied-scope
?
-
Hi Joseph,
https://support.sisense.com/entries/62484610-Custom-Navigation-Homepage-with-applied-scope here you can see how to setup filters in the link. The only trouble I see is how to parse changed filter values to the link in Pivot
-
Hi,
I have just written a version for the regular table (not pivot).
Also added an option to change the text for the whole column to something like my link.
(If it will left blank, it will keep the original text).
The code is in the attached file.
Clickable URL links in a table column.js -
To all the contributors to this script - thanks for your contribution. Since I'm still learning JS, any hints on how to only enable the link for items in the column which either include a specific pattern ('http://') or exclude those with a specific pattern ('N/A') would be appreciated.
-
David,
From the code above, you should be able to create a 'friendly' version of the link. This is similar to what Gilad has done with the 'Clickable URL links in a table column.js' script. If the friendly link text is left as '', then the URL should be displayed instead. The bold text below highlights my changes.
// create html link tag according to the cell and tag
function createLinkHTML(cell, tag){
var linkElement = $(tag, cell);
var link = linkElement.text();
var friendlyLink = 'This is a link' || link;
var htmlLink = '<a href="'+link+'" target="_blank">' + friendlyLink +'</a>'
if(removeLinkDecoration){
htmlLink = $(htmlLink).css('textDecoration','none').prop('outerHTML');
}
linkElement.html(htmlLink)
} -
Another way of accomplishing a clickable text field in your widget dashboard is by adding a custom field in your EC:
*Prerequisites
- Text field - This is the text you want to be clickable in your table ([title] in the code example below)
- URL field - This is the url you want to attach to your Text field ([html_url] in the code example below)
1) Add a custom field in the table you are working with and give it a name.
2) Copy and paste the following expression in your custom field:
'<a href="' + [html_url] + '" target="_blank">' + [title] + '</a>'
* Make sure to use the Table widget.
* In this example, we added target="_blank" to ensure that each link will open in a new window. If you don't want this just remove it from the expression.
Big thanks to Ronen Avidor for this awesome tip!
-
Hi,
I've updated the script provided by Gilad.
It contains fixes to keep URL formatting after table widget scrolling/paging
Also I've changed the event name being listened to. It's now a "domready" event instead of "ready" which is fired when the widget DOM is rendered and ready for manipulations, thus eliminating the timeout in the code.
Clickable URL links in a table column_updated.js
-
Hi Oxana,
I have a Table widget that uses the method in your 5/10/2017 post. It worked great up through version 7.0.2.11001. However, when I upgraded to version 7.1.1.10089, it doesn't work anymore.
In 7.1.1, the table's cell value just appears as regular text. The text starts with <a href.... For some reason, it's not been recognized as HTML code.
In 7.0.2, that <a href... text was interrupted as actual HTML code and rendered as a link.
Do you have any suggestions on how to update the code for 7.0.2+?
Thank you.
-
Hi Lloyd,
7.1.1 table has some changes and now links are not recognized properly. This script should allow to fix it.
widget.on('domready', function(scope, args) {
var pivots = $('dashboard widget.columnar');
for (k=0; k < pivots.length; k++) {
if ($('dashboard widget.columnar')[k].attributes.widgetid.value === scope.oid) {
var rows = $('TD');
for (i=0; i<rows.length; i++) {
var text = $($('TD', $('dashboard widget.columnar')[k])[i]).text();
$($('TD', $('dashboard widget.columnar')[k])[i]).html(text)
}
}
}
})
Put it into widget script. Please mind that this not support infinite scroll, so you will have to switch to paging if you use it.Regards,
Michał
Please sign in to leave a comment.
Comments
33 comments