New Releases from Motor! Build Beautiful Qlik Sense Mashups.
Here at Motor we’ve just released a number of new packages and products to make life easier and easier for Qlik mashup developers. This post will take you through the updates.
Generate Qlik Sense Mashups with your favourite UI stack and charting library.
You can now generate complete Qlik Sense mashups using your favourite UI framework and charting library. Just select your template, charting library and download your code!
These are complete multi-page dashboards containing Filters, a Selections box, Search, KPIs, Tables & Charts. Once exported the code is yours to enhance and style to your brand. The templates are ready to import into your Qlik Sense site, or host externally.
Our initial release includes two Ant Design templates and charts built using Recharts. Next up on our roadmap is support for Material UI, AM Charts and Picasso JS.
Looking to embed charts from your Qlik Sense app? We also support nebula.js. Check out the documentation here.
A new headless npm package for building mashups
All of the above is made possible due to our headless UI package @motor-js/engine, which simplifies all interactions with the Qlik Sense engine. We provide a simple package of React hooks and components, meaning you can build custom UIs quickly, without knowledge of the Qlik APIs.
You can read further about our motivation for building this package here.
Let’s take a look at what that looks like in practice. Say you wanted to create a filter, well import the useList hook, pass in a dimension and let’s explore the data that’s returned.
In the example above, we have passed into the hook a dimension called Country (which is a field in our Qlik application) and are returning an listData array.
This array contains objects with the Country data returned from the engine, in the format below.
We have an array of objects containing a key, text value and number value, all returned from the Qlik engine. We can now map over this data for presentation on your UI and make selections on the key field.
The hook also returns functions for making selections, clearing selections and returning the current selected items in your list.
You can find the complete API of our useList hook here and our full list of hooks below:
- useList for building filters
- useData for building visualisations (KPIs, Charts etc.)
- useTable for building tables
- useSearch for building a search bar
- useSelections for building a current selections bar
- useButton to expose functions you would commonly attach to a button (clear selections, selecting a range of values etc.)
A React wrapper on nebula.js
Finally, we have released an additional package for embedding Qlik Sense objects into your mashups.
This is a React wrapper around nebula.js and means you can skip the Nebula set up and get straight to embedding Qlik objects. This takes context from the our Motor component, which handles connection to the Qlik engine.
In practice, this looks like the below. Import the NebulaConnection & NebulaContainer components in your project to embed your object. Super simple!
Note you can set the Column definition in the render prop, our use an Id from your Qlik application, as demonstrated below.
So that was a quick round up on what we’ve been working on. If you want to connect with us, make feature requests and influence our roadmap join our Discord.
You can check out our website
And finally, we’ll be uploaded tutorials shortly on our YouTube channel
