Recently I've been working on building a mashup template that will work in the dev-hub that will have a few more advanced features than many of the available dev-hub templates. One of these features that I thought was important was a card container for Qlik Sense objects that has fullscreen capability built in. I'd like to share that with you today.
Here's an example of a really simple mashup with just the selection toolbar, and 2 Qlik Sense objects that use the qliksense-card web component I've built - Qlik Sense Mashup.
To use the qliksense-card web component yourself, you have a couple of options. You can either install the dev-hub template and create a new mashup from the dev-hub using the template, or you can just grab the necessary files and load them into your project.
Installing dev-hub template
You can download the dev-hub template here - GitHub - qliksense-card-template. After downloading, install the template as you would install any extension in Qlik Sense. After the template is installed, you can go to the dev-hub, create a new mashup, and select "Card template" from the dropdown list of templates.
The template is really kind of bare. There's not much going on besides the qliksense-card web component and a bit of bootstrap, but it's a good way to check out how the qliksense-card web component works.
Including the files in your own project
You don't have to use the dev-hub template to make use of the qliksense-card web component. What you will need is the qliksense-card.html file and the webcomponents-lite.min.js file. The easiest way to include them is to use the RawGit CDN, example below.
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.rawgit.com/fkabinoff/qliksense-card-template/master/qliksense-card.html">
Using the qliksense-card component
After you're all setup, whether you've generated a new project using the dev-hub template, or included the necessary files in your own project, using the qliksense-card web component is easy. All you want to do is wrap your Qlik Sense object container with the qliksense-card tag, and set the height of the Qlik Sense object with the content-height attribute of the qliksense-card tag. You'll also want to set the width and height of your Qlik Sense object container to 100%. If you've generated a project using the template, this stuff has already been done, and you can check it out and just reuse as you'd like. If you've just included the necessary files in your own project, you can still check out the template files to see how it's done. Generally, it'll look something like below
<qliksense-card content-height="300px">
<div class="qvobject" id="QV01"></div>
</qliksense-card>
.png "Former Employee"){kind=icon}