One of the most common requests is: can Qlik Sense create a web mashup with Qlik Sense objects? There are two options based on the level of control and interactivity required of the Qlik Sense objects. The first is the single configurator which provides an easy way to create simple mashup pages without having to create any code. It simply generates a URL that returns a complete HTML page with an embedded Qlik Sense visualization. To create a Qlik Sense object link, select the Single configurator as shown in the following screenshot. Once selected, you will need to select the application you wish to access for the mashup. In this example, the Executive Dashboard application was selected. It is important to note that a developer should access a published application that is in a stream that aligns with the requirements of the resulting mashup. There is additional information on administration in Chapter 9, Administering Qlik Sense®.

Once selected, a listing will be generated of all the sheets and respective objects. A key point to highlight is that both sheets and individual objects are available based on your web page requirements.

For this example, Margin vs Sales was chosen with selection bars showing so that a user can interact with this visualization.

In the following screenshot, you can see the use of the Single configurator generating the URL and the Iframe code for the Margin vs Sales by Sales Rep scatter chart that is contained in the Executive Dashboard Qlik Sense application:

The resulting URL can then be embedded into a web page. Dev Hub offers a convenient View option so that a developer can see the results of the generated URL outside the Single configurator editor.

Additionally, multiple single Qlik Sense objects can be embedded and they will share common selections and interactions because of the QIX engine. Please note that not only can the visualizations be embedded, but the entire Qlik Sense sheets can be embedded as well. For more information, please refer to the Qlik Sense for Developers help site.

Now, let's move onto more complex mashup requirements with the Mashup editor. To start the creation of a new mashup, select Create new and immediately you will notice that the Mashup editor provides the following four pre-built templates to ease your development:

Once created, all these mashups are stored in the content store of the Qlik Sense server. Dev Hub provides an easy way to filter mashups versus visualization extensions. The following are the four templates that were generated:

Now, let's dig a bit deeper as we build out the Basic-single mashup with the creation of a sales and travel mashup that spans the two Qlik Sense applications:

With the template created, we are ready to begin. One of the advantages of working in the Dev Hub is that you can create mashups that can span different Qlik Sense applications, in this case, the Executive Dashboard that contains sales analysis visualizations and Travel Expense Management which tracks travel and food expenses. From the Executive Dashboard app, we have dragged Average Sales Per Day, Total Revenue by Product Group, and finally, Revenue by Sales Rep:

Now, let's combine these Qlik Sense sales objects with Expense by Expense Type, and Employee Airfare Expense from the Travel Expense Management app:

With the key Qlik Sense objects all in place, we can focus on changing the headings for the mashup page. Fortunately, the Mashup editor generates the following four files for this template. They include:

To make changes to all the headers and other formatting, just edit Sales and Travel.html:

In the case of this example, the Header 1 and Header 2 titles were removed because the Qlik Sense app object titles were self-explanatory. Additionally, because this is a generated HTML file, it can be edited for additional formatting and content. The following is the resulting web page that is previewed from the Mashup editor:

Now, let's turn our attention to extending the visualization objects in Qlik Sense. One of the advantages of an open API is that it can be extended easily to include external visualizations. In our example, we will explore adding a People Chart to Qlik Sense. This example is available in the following locations:

We start the process by reviewing the People Chart that is installed with Qlik Sense:

This visualization extension is made up of the following four files:

The first step in defining this extension is to edit the applicable fields of the com-qliktech-peoplechart.qext file to set a default title, description, icon, and type:

Once this is completed, we need to define the properties for the extension in our Java code. In this example, we will do this in the com-qliktech-peoplechart.js file, which is loaded in the define statement:

The next step is to enable selections. To accomplish this, we use the selectValues function to reuse Qlik Sense standard selection UI. Also, make sure to set the selected CSS class on the selected elements:

Now that it is completed, we need to implement the paint method. In the paint method, we create the HTML for our extension based on the data in the layout parameter. Then, we set the content of the $element parameter to display the extension content. It is also important to tag your elements with class= 'selectable' data-value= '0':

Additionally, let's make sure that this object is available for storytelling by setting canTakeSnapshot to true:

It is a good programming practice to keep your styling in a separate CSS file. Qlik Sense sets the CSS class qv-object-[extension name] on your extensions. You should prefix your CSS rules with that. You then load your CSS file with RequireJS and add its content to the HTML page:

Finally, in the peoplechart-properties.jss, we need to define the accordions for reuse on the properties panel and the minimum requirements of one dimension and one measure to render this object:

Once the extension is saved, it is available for use by developers in the Qlik Sense Chart Library. In the following screenshot, you can see the Word Cloud chart type is available and was used to convert the horizontal bar chart of Total Revenue by Product Group into a Word Cloud:

Additionally, please note that all extensions are stored in the Qlik Sense content store and is managed by the QMC. Additional information on administration is available in Chapter 9, Administering Qlik Sense®.

Now, let's turn our attention to the final area of Dev Hub, that is, Engine API Explorer.

Qlik Engine API Explorer is a tool that allows developers to send messages and receive answers from the QIX engine. This provides an easy way for developers to form handles, methods, and macros to send the QIX engine and test the results before coding an application. To access the Engine API Explorer, select the Engine API Explorer from the Qlik Dev Hub menu:

The first step is to connect to a Qlik Sense app. To do this, we first must know what applications are available on this server. Fortunately, there is a full list of macros available to help explore QIX Engine:

In our case, we will be using the Get applist to see what applications are available to explore on this server. Based on the response, the Executive Dashboard is available:

Now we are ready to connect to the Executive Dashboard app. Note the send commands generated and the engine response. If satisfied with the response, the developer can then copy and paste into their development environment:

Now that we are connected, there is a global method to manage every aspect of a Qlik Sense app from outside the Qlik Sense client. This includes the full application life cycle from creation, maintenance, versioning, to deletion:

Now that we have explored the Qlik Analytic Platform through the Dev Hub, let's turn our attention to the value of having an open API through a developers community called Qlik Branch: