Let’s start with the basics, what is a Qlik Sense Mashup?
A Qlik Sense mashup is a web page or application that integrates visualisations, data and other content from one or more Qlik Sense apps into external web applications. This integration ensures that your new web service is displayed in one graphical interface, which makes Qlik Sense mashups suited for creating unique and responsive web pages powered by Qlik’s associative engine.
Apart from offering great UI flexibility in design and functions, Qlik Sense mashups come with several advantages.
Full control over branding
As a developer, Qlik Sense mashups offer you numerous opportunities and unobtrusive ways to show off your brand. From custom layout to font colors and background images, you have full control over building a fully white labelled experience.
Custom navigation
Another advantage offered by Qlik Sense mashups is dynamic content features that allow for custom navigation. You can enhance usability by condensing, introducing, showing, removing, or altering content to customize and improve navigation. Dynamic content enables developers to deliver apps with a smoother and richer user experience. For instance, you can condense content into a single page application (SPA) to deliver user-friendly custom navigation.
In a mashup, you can create dynamic forms and web apps that guide users through a process by showing, hiding, and altering content as they move from one step to the next. A form with custom navigation can improve UX by redirecting the user automatically to the next appropriate screen based on the information entered. The flexibility and wide variety of tools in a mashup allow you to focus on the workflow to deliver user-friendly web sites, apps, and pages for your users.
Integration with external technologies
Qlik Sense mashups combine Qlik Sense APIs with client site frameworks, such as React to integrate Qlik Sense with external web technologies. You may already have a custom portal or application that you’d like to add analytics to, in which case, mashups would be the perfect use case. The flexibility provided by Qlik enables you to embed charts, into large applications with relative ease.
So now that you’ve decided to build a Qlik Sense mashup, you have some early technology choices to make. Namely, do you use the Capability APIs or Enigma JS?
Capability APIs
The Capability APIs are a collection of JavaScript APIs for embedding Qlik Sense content into web pages. You have access to several APIs for different purposes and use cases from selection, visualization, bookmarking, and many more. Some of these APIs are listed below:
- Root API: This API provides methods to open apps, check the reference, set language, and manage error handling.
- App API: It contains the methods you need to retrieve an object, adding actions, and so on.
- Bookmark API: This API offers the methods for working with bookmarks.
- Field API: With Field API, you can select values in a field.
- Selection API: You can use this API to select and work with the selected data from the Qlik associative engine.
- Visualization API: Using Visualization API, you can fetch existing visualizations or create new visualizations on the fly.
- App Integration API: This API provides parameters that you can use to create an URL for your web page by including it in an iframe.
Enigma JS
Enigma JS is a wrapper built on top of the engine API to help you communicate with the Qlik Associative Engine. This open-source Qlik library communicates directly with the Qlik engine, and implement in Qlik Sense to help you build your own client or Node.js web service. You can use Enigma js to build browser-based analytics tools, backend services, and so on.
What to consider when choosing between Capability APIs and Enigma JS
Both Capability APIs and Enigma JS allow you to create fully functional web applications that exploit the associative engine. The most important aspects to analyse when making a decision between the Capability APIs and Enigma JS is what you are planning to build and the technologies you’ll be using in your mashup project.
Technologies
Enigma js provides a much more lightweight and flexible approach for building Qlik Sense mashups. The package is just 954 kB in size and provides the low level tools for communicating with the Qlik engine. It is also very easy to use with modern front end frameworks such as React and Vue.
When you load the Capability APIs, you load a lot more than just a library to interact with the Qlik engine. You also load jQuery and CSS files which have the potential to cause conflict with your mashups app styles. They also use both Angular JS and Require JS, creating a more complex integration with other web frameworks.
Ease of Use
The Capability APIs are certainly easier to use than Enigma js. They provide high level functions and capabilities for integrating Qlik objects and interacting with them, which is more than enough for a lot of use cases. Enigma js is a more bare bones approach with higher levels of complexity. You interact directly with the engine and so will need to create all visualisations yourself, unless of course you make use of other supporting libraries such as motor-js.
For more details and examples of your integration options when building Qlik Sense mashups, check out this introductory article on qlik.dev:
https://qlik.dev/tutorials/integrating-qlik-objects-into-web-apps
Bottom Line
While both Capability API and Enigma JS approaches are robust and effective for mashups in their own right, you still have to choose based on the specific requirements of your mashup project. Enigma JS is the perfect choice for experienced developers planning to use React or Vue or wanting to provide a more unique user experience. On the other hand, Capability APIs are easy to use and cover a lot of front end mashup use cases. Each option for mashup has its own advantages, but it is all up to you to decide the right option for your project.
