Introduction:
This article will explain how to link a local resource to an iFrame.
Purpose/Benefits:
iFrames can be a great way to get information from another resource directly within Sisense. In the example below, you can view the actual Invoice via a Pivot table link and iFrame Widget.
How to Configure:
Step 1:
Install the iFrame Widget
Step 2:
Include both a Pivot table and iFrame widget on the dashboard then get the iFrame widget's oid.
*To retrieve the oid of the iFrame widget - edit the widget and look at the URL
Step 3:
Add the below Script to the Pivot Table and change the variable iframeWidgetID to the oid of your iFrame Widget.
Also change the columntoMakeUrls to the index of your pivot table (for instance if your URL is the third row, make it equal to 2)
widget.on('domready', function(se, ev) {
/*** USER CONFIGURATION ***/
var columnToMakeUrls = 1; // set the column to make linkable (index starts at 0)
var removeLinkDecoration = false; // remove the link underline
var newText; // Replace the text in the column to be specifc text, leave blank to keep the original text
var iframeWidgetId = '5b8e8e8b05fc821038fa120d'; //replace with iframewidget oid
var realColumnIndex = columnToMakeUrls + 1; //nth-child function is 1 based, make it zero for consistency with pivot version
var cellsSelector = 'table tbody td:nth-child(' + realColumnIndex + ')';
var cells = $(cellsSelector, element); //get all the cells of the column
var pivots = $('dashboard widget.columnar');
if (cells.length > 0) {
cells.each(function() {
createLinkHTML($(this));
});
} else {
console.log('Cells were not found');
}
// create html link tag according to the cell and tag
function createLinkHTML(cell) {
var linkElement = $(cell);
var link = linkElement.text();
var linkText = newText || link;
var htmlLink = '<a href="' + link + '" target="_blank">' + linkText + '</a>';
if (removeLinkDecoration) {
htmlLink = $(htmlLink).css('textDecoration', 'none').prop('outerHTML');
}
linkElement.html(htmlLink);
linkElement.on('click', changeIframe);
}
$(element).on('draw.dt', function() {
var cells = $(cellsSelector, element);
cells.each(function(){
createLinkHTML($(this));
});
});
function changeIframe(){
// Find the iframe widget
var matchingWidgets = prism.$ngscope.dashboard.widgets.$$widgets.filter(function(widget){
return widget.oid == iframeWidgetId;
})
// Only run if there was a match
var iframeWidget = $$get(matchingWidgets, '0',null);
if (iframeWidget){
// Set the new URL and trigger redraw
iframeWidget.style.url = $(this).text();
iframeWidget.redraw();
}
}
});Outcome:
