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))
}
});
-
Please also reference this Community post by Artem Y for a script that works on Sisense Versions 7.2 - 7.4+
Please sign in to leave a comment.
Comments
33 comments