by Patrick Tehubijuluw

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.

Popup window example

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:

Prettify your code

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!

 

in Maps / Mashups / Web 5 comments