A mashup is a web page consisting of content from more than one source displayed in a single user interface. When we design mashups in Qlik Sense, we integrate multiple random objects from a Qlik Sense application into a predefined layout. In doing so, we use the active content from the Qlik Sense application. Hence, the visualizations get updated automatically when the state of the object changes.
The Mashup editor in Qlik Dev Hub allows us to build mashups using the Mashups API. These Mashup APIs are used to display Qlik Sense objects on a website or web application where one can interact with the Qlik Sense datasets.
We make use of the Automotive .qvf application for this recipe. This application comes with the default installation of Qlik Sense. If not, it is available for download from the Packt Publishing website. Before starting the Qlik Dev Hub editor, make sure you have the Qlik Sense Desktop running in the background.
- 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 Mashup editor window opens.
- Now click on
to create a new project.
- Name the new mashup object
QlikDevHub_Mashup. - Select the template as Basic mashup template with absolute positioning:
- Click on
. - Once we create the mashup, the Mashup editor window reopens. It consists of three panes. The one on the left-hand side gives an option to select a Qlik Sense application on the hub and the objects it may contain. The central pane consists of the Preview window for the Mashup Layout and the two main files that help to generate that layout:
.htmland.js. The Qlik Sense content is stored in the.htmlfile, while the.jsscript file contains the code for the mashups. The right-hand side pane gives options to add Lists and Hypercubes to the mashup:
- In the left-hand side pane, select the
Automotive.qvfapplication from the dropdown. Once selected, objects within the application will be displayed. - Check
at the bottom of the central pane. - Scroll down to the Roadways, Cars, and Countries sheet and drag the Filter pane within that sheet onto the layout. This will display the Year selection on the layout.
- Next, drag and drop the Length of roadways pie chart onto the layout.
- Scroll down to the Country car data sheet and drag the Filter pane within that sheet onto the layout on the right-hand side. This will display the Territory selection on the layout.
- Drag and drop the Car sales trend line chart onto the layout.
- The layout should look like this:
- In order to preview the mashup, click on the
button at the bottom of the central pane. - The user can make selections on the mashup page similar to Qlik Sense.
- Click on Save. The mashup page can be launched using the Qlik Dev Hub link, selecting the mashup, and clicking on View. Alternatively, the mashup link can be shared amongst the users. For example, in our case, it would be like this:
- When we select the application, in our case,
Automotive.qvf, the JavaScript in theQlikDevHub_Mashup.jsfile gets updated as the following. Every new application opened will add a new line in the open apps section:
- When we select the visualizations to display on our mashup page, the
QlikDevHub_Mashup.htmlpage gets updated. By taking a look at the tab, we can see that the code looks like this:
We can also add lists to the Qlik Sense application using the list builder. The lists are not a part of the Qlik Sense application our mashup is connected to. Along with the lists, we can also add a Hypercube with specified dimensions and measures to further enhance our mashups.
Both the options can be found on the right-hand side panel of the Mashup editor window.