This post, since the last post on the topic of ‘Web Dashboards‘, is going to showcase how to create a popup in your dashboard page. For this you need to include a few libraries from which the code will be referenced using HTML markup and Javascript to achieve the result. This is the example I’m talking about. Pressing on a button > open a popup window with some Qlik Sense objects embedded in there.
If you are not familiair yet with developing mashups, I would advice you to go to the Qlik Help for this to get started. Here you will find some useful information to get you started.
Assuming you have your template setup with all the libraries that are needed to use Qlik Sense objects onto your page, the next pieces of code will help you to implement the popup window as shown in the example above.
The HTML that is needed
First we need to create a button that will, when interacted with, initiate the popup window.
<button id="ShowMap" type="button" style="position:fixed; bottom:10px; right:20px; z-index:120;" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">Show Map</button>
Second thing we need is the actual code for the popup window. The following code holds all the markup including an example <div> with ID (#CustomerGeography) that references a Qlik Sense object.
<!-- Map Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Map Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Customer Geography</h4> </div> <div class="modal-body"> <p>Where did we sell our products?.</p> <div id="CustomerGeography" style="height:500px;"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
If you want to get a better understanding of what this exactly does, visit the twitter bootstrap site for that. The code above is not nicely indented for better structure and reading. Copying and pasting this code into the textarea on http://unminify.com/ will give you the results you’d hoped for:
The CSS that is needed
Since I use twitter bootstrap in my mashups for the moment and with this example. You’ll need to reference the libraries that twitter exposes for this. To do that you’ll need to add the following script between your <head></head> tags in your HTML page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
The Javascript that is needed
First thing we need to make sure of is the inclusion of the bootstrap Javascript library. This is done like including the CSS library above. The code for this is:
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
This is the Javascript that I used for triggering the popup. This code needs to go into the javascript that you or Qlik Sense created which is also included as a library of the page.
// Function to toggle hidden objects in a bootstrap popup modal $.fn.extend({ toggleResize: function() { return this.toggle(400, function() { qlik.resize(); }); } });
This is basically a toggle function in Javascript. The qlik.resize() function is used since Qlik Sense needs to be re-initiated to show the popup contents for the object that is embedded. Next to that I added a bit of code to resize the corresponding object ID when a user clicks on the button.
// IDs for showing up on toggleResize function (see above) $('#ShowMap').on('click', function(event) { $('#CustomerGeography').hide().toggleResize(); });
When you use the above snippets in your own mashups, it should work like the example.
Last thing, I know there are far better ways to do this. As I’m also learning from this new subject, I invite everyone with alternative solutions to post them in the comments. That way we can stimulate even better stuff to come. If you have any questions or inspiration for other examples or topics within the theme of ‘mashups’, please let me know. Also any feedback of why it did not work for you with a good description of the errors would be highly appreciated.
See you next post!
Hi,
It looks amazing!
Currently I’m the only BI person in my company, and I don’t have an HTML developer. I was wondering if you can publish the whole mashup code?
Thanks!
Pieces of it sit on my backlog for Qlikshow. Be on the outlook 😉
The tooltip appear behind the modal popup. How can i fix it? Thank you.
You could work with the CSS file and look up how to work with the z-index statement for that.
Here is an article explaining how it should work: https://medium.freecodecamp.org/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3
Thank you.Very Helpful