Qlik defines a Single configurator as a tool that provides an easy way of creating simple mashup pages without having to write any code at all. It helps to create a URL that contains the embedded Qlik Sense visualization. A user can embed a sheet, an object, or even a snapshot from the Qlik Sense application. The URL can be embedded onto the desired web page using the iframe integration or the Div integration.
For this recipe, we will develop a simple HTML page and then embed a Qlik Sense sheet onto the page.
- In order to generate a web page, copy and paste the following script in a text file:
<html> <title>My Web-page</title> <body bgcolor="beige"> Qlik Sense <marquee>Embedding Qlik Sense application in website using single configurator!</marquee> <img src="http://siliconcloud.com/sc- content/uploads/2015/06/qliksense.png" height="200" width="200"></body> <html>
- Save the file and name it
QlikDevHub_WebPage.html. - The preceding steps create a simple website that displays a Qlik Sense icon and a rolling marquee displaying Embedding Qlik Sense application in website using single configurator!:
- Our next step would be to embed Qlik Sense visualization on this sheet.
- Open Qlik Dev Hub using the following URL:
http://localhost:4848/dev-hub
- Click on the
button available in the left-hand side panel of the Qlik Dev Hub. A new Single configurator editor window opens. The source panel on the left lists all the applications available on Qlik Sense hub.
- From the dropdown, select the
Automotive.qvfapplication. Once we select the application, observe that all the sheets and the objects within the application are listed underneath. Any snapshots within the application are also listed under the Snapshot tab. - Now, select the Sales overview sheet from the list. On selecting this sheet, two more panes get activated on the screen. The central pane is a Preview window that shows the selected sheet along with the Preview Object ID option at the top and a URL that contains the HTML information on the object.
- The right-hand side panel gives the user options to activate or deactivate certain properties in the mashup. For example, show the Selections bar, Chart animations, Interaction, Bookmarks, and so on:
- Make the following changes from the right-hand side panel:
- Under Devhub.general, ensure that Disable interaction is switched off.
- Under Selections, ensure that the show Selection bar and Clear all selections are switched on.
- The code to be inserted within an
iframetag in our HTML script for the web page is autogenerated in the Iframe box just above the Preview window. - The code will look something like this:
<iframe src="http://localhost:4848/single/? appid=C%3A%5CUsers%5Cnkharpate%5CDocuments% 5CQlik%5CSense%5CApps%5CAutomotive.qvf&sheet= BEUjVL&opt=currsel&select=clearall" frameborder="0"></iframe>
- Copy and paste it in between the
<marquee>and<img>lines in the HTML script for the web page. - We will slightly alter this code for changing the height, width, and the alignment of the frame:
<iframe src="http://localhost:4848/single/? appid=C%3A%5CUsers%5Cnkharpate%5CDocuments% 5CQlik%5CSense%5CApps%5CAutomotive.qvf&sheet= BEUjVL&opt=currsel&select=clearall" frameborder="0"height="600" width="75%" align="right"></iframe>
- The final HTML code for the web page should look like this:
<html> <title>My Web-page</title> <body bgcolor="beige"> Qlik Sense <marquee>Embedding Qlik Sense application in website using single configurator!</marquee> <iframe src="http://localhost:4848/single/?appid=C% 3A%5CUsers%5Cnkharpate%5CDocuments%5CQlik%5CSense% 5CApps%5CAutomotive.qvf&sheet=BEUjVL&opt=currsel& select=clearall" frameborder="0"height="600" width="75%" align="right"></iframe> <img src="http://siliconcloud.com/sc- content/uploads/2015/06/qliksense.png" height="200" width="200"></body> <html>
- Save the changes made in the document.
- Open the web page to see the embedded Qlik Sense sheet:
The embedded sheet on the web page works exactly like a sheet within Qlik Sense. The user can make any selection in the charts and the data would be filtered accordingly.
The current selections are displayed at the top. The charts contain active content, and hence they are always in sync with the actual Qlik Sense application.
The iframe script inserted in the HTML page can further be modified as required. We can very well add multiple objects from different Qlik Sense applications on the same web page.
Another good option to explore in the configurator is adding data.
We can define explicit field value selections within the iframe code. The data on the sheet would always adhere to these selections:
