Two-Way Filter Updating Between Embedded Iframe And Parent Application

[intapiuser]

The following code example can be modified to facilitate the two-way passing of filter information between an embedded iframe and its parent application.

Window.postMessage() is used to pass information between the origins and avoid CORS complications.

// The following code example can be modified to facilitate the two - way passing of filter information between an embedded iframe and its parent application.
// Window.postMessage() is used to pass information between the origins and avoid CORS complications.

//
// In your DASHBOARD SCRIPT (Sisense Application)
//

// OUTGOING
dashboard.on('filterschanged', function (dash, args) {
 var targetOrigin = 'http://your_parent_application_origin',
 targetWindow = window.parent;

 targetWindow.postMessage({
 filterUpdate: args.filters
 }, targetOrigin);
});

// INCOMING
window.addEventListener('message', receiveMessage, false);


function receiveMessage(event) {
 var sendingOrigin = 'http://your_parent_application_origin';

 if (event.origin !== sendingOrigin) {
 throw new Error('bad origin:', event.origin);
 } else {
 if (defined(event.data, 'memberToRemove') && defined(event.data, 'jaql')) {
 // remove from members, add removed filter to excluded
 var members = event.data.jaql.jaql.filter.members,
 removed;
 removed = members.splice(members.indexOf(event.data.memberToRemove), 1);
 event.data.jaql.jaql.filter.filter.exclude.members.push(removed);
 // make update
 prism.activeDashboard.filters.update(event.data.jaql, {
 save: true,
 refresh: true,
 unionIfSameDimensionAndSameType: false
 });
 }
 }
}

//
// In your PARENT APPLICATION
//

// MARKUP
// <div id ="filterWrapper"></div> <iframe id="ifm" name="ifm" width="100%" height="768" frameborder="0" src="your_dashboard_URL" scrolling="auto"></iframe>

// EVENT LISTENERS
function setOnClickListener(jaql) {
 $('.filter-button').on('click', function (ev) {
 ev.preventDefault();
 $(this).remove();
 removeFilter(ev.currentTarget.innerText, jaql);
 });
}

// OUTGOING
function removeFilter(memberToRemove, jaql) {
 frames['ifm'].postMessage({
 memberToRemove: memberToRemove,
 jaql: jaql
 }, 'http://your_base_sisense_app_origin');
}

// INCOMING
window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) {

 var sendingOrigin = 'http://your_base_sisense_app_origin';
 if (event.origin !== sendingOrigin) {
 throw new Error('bad origin:', event.origin);
 } else {
 try {
 if (defined(event.data, 'filterUpdate')) {
 var filterObject = event.data.filterUpdate[0],
 exclude = false;

 if (defined(filterObject, 'jaql.filter.filter.exclude')) {
 exclude = filterObject.jaql.filter.filter.exclude;
 }
 $('#filterWrapper').empty();
 filterObject.jaql.filter.members.forEach(function (item) {
 if (!exclude || exclude.members.includes(item)) {
 return;
 }
 $('#filterWrapper').append('<button class="btn-default filter-button">' + item + '</button>');
 });
 setOnClickListener(filterObject);
 }
 } catch (err) {
 throw new Error(err.message);
 }
 }
}