A Simple HTML Weather Widget in Qlik Sense

The Widget Editor A widget displaying the weather in Moscow, in a portion of our Qlik Sense World Cup Prediction Competition dashboard from the Qlik Summit.
A Simple HTML Weather Widget in Qlik Sense

Widgets were introduced in Qlik Sense 3.0 and provide a way to use HTML and CSS to create simple, interactive objects in a Qlik Sense app, without the need for complex coding. Unlike extensions, widgets don't require JavaScript. Widgets can be used for navigation, simple charts, KPIs and can use dimension and measure values from the app they are used in. Widgets can also display web based content easily. I wanted to display the weather in Moscow in our World Cup prediction competition Sense app at the 2018 Qlik Summit, which was easy to do using a widget.

To display the weather I searched the web for an HTML weather widget. There are a number of widgets available that can be plugged into a website, from Accuweather and other providers, but many of them use JavaScript, which means they won't be displayed as a Qlik widget. I found one from Meteoblue that uses HTML only. The Meteoblue widget customiser allows you to select a city and to customise the display of the widget; number of days, colour scheme, metrics displayed, etc. Once you're happy with how it looks you can copy the HTML and paste it into the HTML section of the Sense widget editor.

To the right is the live embedded widget as it appears in a webpage. This is the monochrome look, with a 7 day forecast for Durban.

To create a widget in Qlik Sense, you use the Dev Hub, accessible from the menu in the top right hand corner. Select a widget library and create a new widget. The widget editor consists of three main parts, the HTML, the CSS and a preview that is displayed once an app is selected.

The Widget Editor

Because all of the code is generated by the Metoblue widget generator, you don't need CSS to style this widget, you can simply paste in the copied HTML. This widget is not dependent on any data from the app, so that's all you need to do. Once saved, the widget will be available from the Custom Objects panel for use in any app.

That's just a quick example of how you can use good copy-and-paste skills to display useful web based content in a Qlik Sense app, without any coding. You can probably think of other examples; a stock ticker with share prices, contact details from a website, product images from an online catalog. The next step for this example would be to make it interactive, to add a Dimension and allow the user to select a city to view the weather forecast for that city. The widget uses the city codes from geonames.org, so cities in the data would need to be mapped to their Geo Name code. My next project... :-)

Posted by Colin Hancox

Senior QlikView Consultant. Currently providing Business Intelligence solutions for various large companies in the retail and manufacturing sectors, using QlikView on Oracle and Microsoft AX databases.