I Built My First Qlik Extension!

I've been waiting a long time to be able to write these words – I have finally – FINALLY – created my own Qlik Sense extension! It's something I've always dreamed of doing and I finally had a use case where it made sense to create one and I had the time to tackle it.

The extension, named SimpleModal and hosted publicly on GitHub, is a button that will trigger a customizable modal to appear – simple! Nothing fancy, no uneccessary features. The button has several features that are exactly the same as the Qlik Button object, like the customizable text, background color, and border. The modal itself is just a white box that pops up on top of a black, semi-transparent, blurred background that covers the entire page.

How I built it

Usually in projects that I undertake where I'm largely unfamiliar with the tech stack, I use a solid template and find a high-quality example to reference. In this case, though, I tried to go largely off of the documentation for the Nebula.js library from the Qlik development site directly as much as I could, but struggled a bit to put the pieces together initially. The examples on the dev site were very basic and didn't give me a ton to go off of.

I had to rely on my existing knowledge to get me any momentum here. The Nebula framework appeared to be heavily (entirely?) based on the React framework, as it includes hooks (useEffect(), useComponent(), useState(), etc.) and a component concept. I have done some very introductory stuff with React for a client project, so I recognized some of the patterns there.

The other thing that helped to get going was just the fact that I kind of knew what to look for as far as what settings I needed to pay attention to, what behavior I wanted to achieve, and how Qlik generally handled these things.

Vanilla JavaScript

Though Nebula is (at least partially) React-based, I chose to go the route of using pure, vanilla JavaScript instead of using a framework like React/JSX or Svelte. I chose to do this so that the extension would remain fast and easy to maintain in the future. Part of my motivation there came from using VizLib extensions and frequently getting upset at how terribly slow they are. I've also helped out a friend with their React + Gatsby + Shopify app and have seen what can happen when NPM dependency hell gets bad – I want to avoid those problems as much as possible!

Settings options

I wanted to strike a balance between functionality and keeping it simple, so I chose to keep the settings limited to the following options, at least for now:

• Button settings
  • Button labels
  • Button font size
• Modal settings
  • Modal title
  • Modal body
  • Option to close the modal by clicking outside of it
• Button background
  • Background color (color picker or by expression)
• Button border
  • Border on/off
  • Border corner radius
  • Border width
  • Border color (color picker or by expression)

One thing I always appreciate is the ability to do things my way rather than be hamstrunged and restricted to few, if any, customization options. A lot of Qlik Sense extensions and, certainly, the out-of-the-box visualizations don't give you the ability to customize all the things that you'd like to. I wanted to buck that trend in my extension, so I made it so that you can use actual CSS unit values instead of some abstract, arbitrary number that is often used.

Here's an example of what I'm talking about – here's a screenshot of the font size setting for the Qlik Sense button object:

See how the font size is just some number from a slider – this could be useful for some folks, but I'd like to be able to be more precise.

Here's what the same property looks like for the SimpleModal extension:

See how we can use CSS size units directly, giving us more control over the font size.

Pitfalls of too much styling control

There are pitfalls that you may encounter when you have too much control over styling. Take the styling example we examined above, with control over font size. If we change the size of the SimpleModal button, the text quickly gets all out of whack:

See how the text in the Qlik button resizes along with the object so that nothing gets cut off, whereas my SimpleModal extension does no such thing – it does no dynamic resizing and instead just pushes the text outside of the bounds of the button entirely.

Future edits

I think tackling the dynamic font size issue shown above is going to be a top priority, as that will be a big blocker for folks whose userbase uses devices of varying screen sizes.

I may also decide to add some more customization options for the actual modal, like changing the background color, font sizing, ability to use Markdown, and ability to choose whether to display the blurred background behind the modal.

Takeaways

Overall, this was an incredibly fun project! I loved learning how to use Nebula and getting some more practice with React-esque libraries. Seeing everything start to actually work and click into place was so, so satisfying – it was the sort of feeling that keeps you wanting to stay up all night to add the next feature and keep it growing and growing.

I expect that this will only be the first extension I create – hopefully the first of very many!

Please feel free to contribute to this extension on GitHub!