Widgets 101

Qlik Sense is all about empowerment and extensibility. Whether you are a business user designing a new dashboard just by dragging and dropping objects in your browser or an experienced developer coding extensions, mashups and custom connectors, this platform always gives you the chance to challenge yourself and create something completely new.

In today’s post we’ll explore widgets, one of the easiest ways to build your own visualizations in Qlik Sense. In my opinion, this is a great first step if you’re a newbie or you’re transitioning from QlikView because, unlike JavaScript extensions, widgets are more accessible to people without programming experience and allow you to create useful things early in the learning process.

As usual, this post will include random tips and some finished goodies so you can dissect and modify them as needed! 😉 (Spoiler alert: Today we’ll be working with KPIs!)

About Widgets

Simply put, widgets are visualization objects that you can build using HTML and CSS. Once deployed, they can be created and configured just as any other chart in Qlik Sense.

While extensions are relatively simple to develop, they pose a big challenge for non-technical people like me because they involve some knowledge about JavaScript and other dark arts such as RequireJS and D3. These skills are not super-difficult to acquire, but they demand a fair amount of time and effort before you can create something decent.

If you want to know more about extensions, follow Karl Pover’s journey to become a Qlik Sense Developer and this amazing video colletion from Speros Kokenes. 

In contrast, widgets rely on earthly technologies, namely HTML and CSS. Luckily for us, these two are much simpler to learn and have a lot of cool things to offer to our dashboards. Don’t worry, even if you have never heard of them, you’ll be able to create not-so-awful-and-almost-cool visualizations right after the first tutorial.

Step 1: Web Development Stuff

Before diving into the majestic world of widgets, I would recommend you take some time to relax, bring your favorite snacks, drink one or two margaritas and learn the basics of web development (margaritas are a crucial part, don’t forget them!). Just to be clear, let me say that again: only the BASICS. To be honest, after you learn how to add labels, images and tables in HTML, you can survive by googling your problems and copying snippets from Stack Overflow, so don’t invest too much time mastering the hard stuff (one weekend will be enough). Your research must include these three topics:

1. HTML: It creates the structure of a widget. Basically, you will define and organize all your labels, images, dimensions and expressions here. It’s super easy to learn and you’ll find dozens of free tutorials around the web.

Pay special attention to <div>, <span> and <table>, you’ll use them very often. Also, there are several tags that are kinda useless in Qlik. When you reach that part in the tutorial where you see <abbr> and <blockquote>, maybe it’s time to press fast-forward.

2. CSS: Cascading Style Sheets describe how HTML elements should be displayed. In other words, they’re in charge of formats and styles. At first, I thought it was just a fancy way of changing fonts and colors, but you can do amazing things like transitions, gradients, transforms and animations. It may sound hard to believe, but 85% of your widget will be defined in the CSS panel.

Don’t underestimate CSS. Really. It looks simple, but it can become a real headache if you don’t manage it properly. Also, aligning and distributing objects is harder than it looks. Save yourself some time and read about the Box Model and Flexbox as soon as you can.

One more thing, there are billions and billions (and billions) of selectors, functions and properties in CSS. Don’t attempt to memorize them all at once, but try your best to get used to its syntax and conventions.

3. LESS: Nobody talks about this, but there’s actually one more thing you should be familiar with in order to create widgets. It’s called LESS, a CSS pre-processor (super explicit description, I know). Once you learn a bit about style sheets, you’ll realize that the code is somewhat static. This is where LESS comes in, as it allows you to create variables and nested rules, making it much more flexible. After learning CSS, just take a quick look at this page and you’ll get all you need just by checking the examples.

In my (extremely limited) experience, the easiest way to acquire these skills is through online courses and tutorials like HTML Dog, Codecademy or CodeSchool (free, free and paid respectively). I checked other websites as well, but those were my favorites.

If your memory is as good as mine, it might be a good idea to create a cheat sheet as you follow the tutorials. Just copy all the functions and snippets you think could be handy in the future and keep them more or less organized. If you miss something important, W3Schools has clear explanations and examples about HTML, CSS and other languages, so don’t worry.

Also, if you haven’t done so, take some time to download a text editor you feel comfortable with. Even though you’ll be using the Qlik Dev Hub to build and test your widgets, it doesn’t hurt to have an alternative. I like Sublime Text (it has some amazing features that you’ll use on a daily basis), but I’ve heard that Brackets and Atom are very good options as well.

Step 2: Qlik Stuff

After spending some time reading about tags and selectors, you’ll probably start asking yourself how these things will mix with your Qlik knowledge to create a widget. Well, it’s time for step number two: Qlik stuff!

The best way to immerse yourself in the widget lagoon is to follow Stefan Walther’s guide at QlikSite.io. Pay special attention to the Widget Editor, Data Binding and Custom Properties sections, they’re very important!

Don’t worry if you don’t fully understand certain parts of the tutorial right now (there are some references to Leonardo UI and AngularJS). These topics are relevant, but they can definitely wait. One of the good things about widgets is that you don’t need to become an expert in order to create useful things. Just add those topics to your to-do list and keep going.

Once you finish those exercises, you could check the Qlik Sense Developers portal. There’s a special section for widgets here (strangely familiar to Stefan’s tutorial actually). If you still have some doubts or want to reinforce what you just learned, it’s worth a shot.

Step 3: Build something

Now that you know the basics of web development and how to navigate through the Qlik Dev Hub, it’s finally time to build something on your own. I recommend you start with a simple object that uses no dimensions and only one expression (i.e. KPI object). The only predefined chunks of code you’ll need are:

• Label: {{data.headers[0].qFallbackTitle}}
• Number: {{data.rows[0].measures[0].qText}}

After that, it’s only you, custom properties and lots of CSS. You can try adding images, lines, colors and different styles to highlight metrics and comparisons.

Text objects always stood out in QlikView dashboards due to their amazing flexibility. You could mix and match colors, sizes, styles, calculation conditions, etc. In extreme cases, you could even overlap them to create very specific designs. On the contrary, the KPI object in Qlik Sense isn’t exactly customizable, so this is a perfect opportunity to show off your new skills!

The images shown above are some examples of my first two widgets, so don’t be too harsh! If you think they could be useful, go ahead and download the Evolcon Library from Qlik Branch. Moreover, if you use them in your dashboards or cutomize them to match your personal style, be sure to share some pics with us in Twitter (@Evolcon @QlikFreak). Feedback is always welcome! 😛

Random tips

I just began my journey with widgets, extensions and mashups a few weeks ago, so don’t expect super technical advice from me just yet. However, I’d like to share one or two things I’ve learned so far:

• When you create the widget configuration menu, you can change the order of all the items inside a header. However, you CAN’T reorder the headers themselves, so think carefully about the structure you want to create.
• You can add comments in the CSS section just as you do in Qlik Sense (double slash).
• If you need to create pixel-based variables in LESS, simply add “px” at the end of the line (even if you’re using custom properties).

• Use explicit and easy-to-remember names for your custom properties. You will end up with dozens of them.
• Unlike Qlik, CSS can work with multiple color formats. You can type “#FF0000”, “#F00”, “rgb(255, 0, 0)” or “red” and get the same result.
• LESS allows you to perform simple operations directly in your variables. For example: @center_height: @center_width / 2;
• There are short and long syntaxes for borders, margins, paddings and other things. They’re all useful, so take some notes.
• Floating objects can be messy. No tip here, just wanted to give you a heads up. 😉

• The Qlik Dev Hub dozes off every now and then. If you think something’s not working properly, save and press F5.

Final thoughts

As I mentioned earlier, you don’t have to be a hardcore programmer in order to build your own visualizations in Sense. To be honest, I was a little reluctant when I started exploring “the other side” of Qlik development, but I’ve been having a lot of fun in the process. Even if you don’t feel confident enough to learn JavaScript, Angular or Picasso just yet, I think you should give widgets a shot. You’ll be surprised!

I was thinking about participating in Qonnections this year with a breakout session about widgets, but when I learned about them it was already too late to register! 😥 However, I think I’ll write one or two more posts about this topic soon, so stay tuned.

As always, if you have any questions, comments or suggestions, don’t hesitate to use the section below.

Thanks for reading. Until next time!

• Development
• Tips & Tricks
• Visualization