Before getting started with Qlik mashup, let us see what Qlik Sense is. Qlik Sense, a prominent data analytics and visualization platform, empowers organizations to make informed decisions by transforming complex data into actionable insights.
A Qlik Mashup is a customized web application that combines the power of Qlik’s associative engine with web development technologies. It enables you to embed/implant Qlik’s analytics and visualizations into your web applications, providing a seamless user experience. Whether you’re looking to create interactive dashboards, integrate data into your existing applications, or build entirely new data-driven experiences, Qlik Mashups are the way to go.
At a beginner level, assume Mashup editor as a tool that lets you create web pages or applications. In this article, we’ll take you through the road to creating your first Qlik Mashup and unlocking the potential of your data like never before.
Various web development scripts contribute to making a mashup.
HTML: The simplest version of a web page with all the necessary instructions is an HTML script code. It chooses the website’s structure or page arrangement.
JavaScript: The logic and decisions about the behavior of the webpage are made by Java code. It adds responsiveness and interactivity to a webpage.
CSS: A web page’s presentation and form are determined by a CSS script. It is in charge of the mashup’s entire design and visuals.
Qext and wbl file: All of the Qlik extension information (parameters) is stored in a.qext file. In contrast, the manifest list of the files included in the current mashup project is contained in an a.wbl file.
So all in all, these components are essential for web development and for obtaining a user-driven webpage and implementing it into Qlik Mashups.
The Dev Hub consists of several tools. The tools available to you are visible from the Dev Hub start page.
Extension editor: It provides a .qext file extension with all dependencies and a javascript for the same. This code can be copy-pasted into any HTML/CSS file to provide extensions from other resources.
Mashup editor: This editor allows you to create simple drag and drop and visualization on the webpage. This is an auto-generated webpage with all the code directly provided to you. Mashup editor allows you only to put a particular visualization whereas a single configurator allows you to create an iframe for the entire sheet.
Single Configurator: Single configurator is a Qlik Sense tool that provides an easy way of creating simple mashup pages without writing any code. It returns a Qlik Sense object identified by a URL. The Single configurator creates a URL that returns a complete HTML page that contains all embedded visualization. This URL can be embedded in a web page by including it in an iframe.
Note: The single configurator technique is not that customizable.
In the coming section, we are going to understand the advantages of Qlik Mashup and how it helps modify our dashboard's more user-friendly.
These are the few advantages of using Qlik Mashup to achieve a good User-friendly dashboard/ webpage.
Enhanced User Experience: Mashups offer a visually appealing and interactive way to present data, resulting in a more engaging user experience.
Data Integration: Mashups allow you to integrate Qlik data seamlessly into your existing web applications, making your data-driven decisions more accessible.
Customization: Improve your analytics applications to match your organization’s branding and specific requirements, ensuring a more united look.
Real-time Insights: Access real-time data from your Qlik Sense app, ensuring that your decisions are based on the most current information.
We can conclude that, in Qlik Mashups we have the freedom to offer enhanced user experience with customizable data integration as per user needs.
To create a Qlik Sense mashup, there are Application Programming Interfaces (APIs) available for various purposes and objectives. You can directly copy-paste the code for an API method and later modify it, to add features to the app objects of your choice within the mashup.
Several APIs relevant to mashup development are given below. You’ll get codes for inserting different elements like engine, backend, frontend (app), root, bookmark, variables, etc. You can also modify these codes as per your needs to form the online page. The API codes are usually from JavaScript or JSON libraries.
• Engine API
• Backend API
• Root API
• App API
• Bookmark API
• Field API
• Global API
• Table API
• Selection API
• Variable API
• Visualization API
• App Integration API
• Single Integration API
• Qlik-visual (web component)
• Enigma.js
• Leonardo-ui (web component)
In conclusion, these APIs will help you to embed different elements and develop your mashup with more flexibility.
Let us learn to create a Qlik Sense mashup using the Qlik Sense Desktop.
Step 1: Open the Qlik Sense Desktop and then go to the Dev Hub (Qlik Sense Development Hub).
Step 2: You will be redirected to the web browser of Dev Hub.
Step 3: Click on creating a new mashup. Enter the mashup name and select a template for the mashup.
Step 4: We will be selecting the Basic Grid Template, this opens the mashup editor.
Step 5: I have selected a sample app called Debtors. As soon as you select the app, all the contents or objects get loaded into the mashup editor.
Step 6: A standard mashup editor window consists of one window for the images (JPG or PNG) and separate tabs for various code sets, such as .qext, HTML, JavaScript, and CSS. Every script adds to the mashup website's overall completion and increased interactivity.
HTML:
CSS:
JavaScript:
.qext file
Step 7: On the preview tab, drag and drop the required visualization as shown in the screenshot below.
Step 8: You can view the created mashup using the right bottom view button, also make sure to tick the show selection bar.
This will show the created mashup as a webpage.
The website displays responsive graphs and charts that adjust based on the choices made.
You can clear selections, navigate back and forth within the selections, make bookmarks, and lock or unlock the selection states using the navigation bar at the top of the page. These operations are identical to those that take place in a dashboard of a Qlik Sense app.
You can alter the apps however it fits you by adding HTML/CSS and Javascript codes. You can add non-Qlik objects and customize the mashup's responsiveness. There are lists and hypercubes, which are the two common object types used to add non-Qlik objects to a mashup.
The list option allows you to create custom drop-down lists and filters. Dimensions and measures are arranged in the list. HTML code is added to the script when you add a list.
Imagine you have a collection of information, like different types of data, categories, and details. To make it easier to navigate, you can create special filters or drop-down menus using a list feature. When you include this in your webpage, it’s like adding a special code to the back-end HTML script. These lists give users the ability to choose and interact with the content in a more organized way.
Making your own Qlik Mashup is a fun task that can result in better data analysis, user interaction, and engagement. You can interpret your data analytics experience to your organization’s requirements by using plenty of implementation tools.
To conclude, creating Qlik Mashup is an exciting journey that opens the doors to enhanced data analytics, interactivity, and user engagement. With various implementation tools at your end, you can customize your data analytics experience to match your organization's needs. So start your journey for better data-driven decisions today by exploring the world of Qlik Mashups.
