Custom Widget embedded widgets and controls
I have a custom widget that has some user interactivity elements built within the widget. Within the same custom widget, I'd like to display existing knowi widgets, but want to filter those widgets based on the control selections.
Generally, you can include other Knowi visualizations within the custom widget with appropriate permissions etc using the {{_widget|<name of widget>}} syntax within the custom widget. However, this does not allow you to drive the experience or customize the filters using that syntax.
Here's an alternative approach:
1. Go to the widget you'd like to use. From the settings menu --> Share --> Generate Shareable URL. Note down the section after the w/ in the url. That forms the id.
2. Use Knowi widget embedding to embed the widget. This allows you to pass in the filters. See the sample code below.
Notes:
- Similar approach can also be used to embed a full dashboard within the custom widget.
- With the share mode above (at the widget or dashboard level), note that the widget URL does not require a login. If there are security requirements preventing the same, use the Secure URL option at the widget or dashboard level and generate a secure content filter hash in the back end to pass that into the front end.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="//www.knowi.com/minify/knowi-api.min.js"></script>
<style>
#knowi-div {
width: 100%;
}
</style>
</head>
<body>
<div id="knowi-div"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
Knowi.render('#knowi-div', {
type: 'shareWidget',
widget: 'gaaJ1dW6NLWq3FiihtnrFMipMl3rymgV1Y5IKobeP0QpQie',
view: {
contentFilters: [
{
"fieldName": "opened",
"values": [1000],
"operator": ">"
},
{
"fieldName": "customer",
"values": ["Costco"],
"operator": "="
}
]
}
}, function() {
// Callback function body (empty in this case)
});
});
</script>
</body>
</html>
{{_widget|}}
Please sign in to leave a comment.
0 comments