intapiuser
Community Team Member
Options
- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
03-01-2023 08:20 AM - edited 03-02-2023 08:47 AM
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);
}
}
}
Labels:
Rate this article: