Blog
Qlik Sense NewHub v.2.38 is released

NewHub just got it’s latest upgrade.

The successful Qlik Sense App and Mashup Agregation tool that’s got footing with Qlik Enterprise users in 3 continents just got new options:

1.) Load different skin colors
2.) An option to show a mosaic grid on the homepage
3.) The ability to open apps and Mashups in Full Screen.

Download now for free, for up to 5 users
https://getnewhub.com/

(if you already have NewHub installed, just click on the Update button on the Admin Panel)

How to Add Custom Loaders in your Qlik Sense Mashups

By Caio Franco Suarez

In some cases, it becomes necessary to have users wait some time while some retrieved data or a webpage is loaded on the screen. Even if this process is relatively fast, it is important to keep the user informed of what is happening on the page while content is rendered. And that’s when a Loader comes in, a very useful feature that helps users get feedback on the screen while they wait for the indented information to be displayed.

The process of rendering Qlik Sense Data inside a Mashup behaves no differently, and loaders become a useful UX tool at our disposal.

Situations in which it is a good idea to use a ‘loader’:

  • When opening the mashup for the first time (for example while creating the connection between the mashup and qvf)
  • Any time you are loading data for the first time (such as kpis and graphics)

In this post, I’ll show you a brief tutorial on how to add a loader to your Qlik Sense Mashup, yielding a result like the one shown below:

Required items:

  • A Mashup with an active connection to a QVF
  • A Text editor (I use Visual Studio Code)
  • Knowledge in HTML, JS and React JS (I programmed this example in ReactJS, but you can adapt it to another framework, if you prefer)

Tutorial

The first step is to define what our Loader will look like. In this example, we will select one from an open-source collection at the following site: https://tobiasahlin.com/spinkit/

after choosing one, click on the “Source” button at the top of the page and copy the HTML code.

Note: do not close the page yet as we will then copy the CSS.

With the copied HTML, we can now create our Loader component, which will look something like this:

Replace the highlighted section in red with the Loader’s HTML code you just copied.

class Loader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render (){
        return <div style={{ height: 'calc(100vh - 63px)', display: "flex", alignItems:"center", justifyContent: "center"}}>
                <div class="spinner">
                    <div class="cube1"></div>
                    <div class="cube2"></div>
                </div>
            </div>;
    }
}

Do not forget to add the loader’s CSS code, which will give it movement, define it’s colors, size and other visual properties. To do this, go back to the page where we copied the HTML from, proceed to copy the CSS, and finally paste it into your Mashup’s CSS file.

Done! Our Loader component is ready. Now you just need to identify what situations are suited to render it on the screen.

The first case to do so, is when the Mashup is making the first connection to QVF, but when the connection is not yet complete; as shown in the following example:

The App.js file is the first Javascript file to be read in my application. As such, this is the place where I instantiate the QlikConnection component that creates the entire connection and returns the Qlik module via the callback property (line 68). Therefore, it is possible to know whether the loader should be displayed or not via the callback.

In your application you should have something similar, so just apply the same concept.

In this case I defined a variable called “page” that initially points to the Component Loader that we created (line 48) and is rendered when the file is returned (line 67). This ensures the first thing that will be displayed on the screen when we open the application is our Loader. On line 51, we check to see if the QlikConnection component has finished connecting to the QVF. As soon as the mashup is connected to QVF, the variable page stops pointing to the Loader Component and starts pointing to the page Component that will be drawn on the screen.

Now whenever we open our Mashup, this loader will appear until the connection to the QVF is made.

Final Remarks:

Following the same logic, you can also create a range of loaders for individual objects. Instead of calling the Loader Component inside the App.js file, you should do it within the desired Object Component where the loader will be displayed while there is no data yet to be displayed.

Remember that you can also customize this loader’s CSS, or if you prefer you can also use loaders from other libraries or even in other formats, such as GIFs or SVGs.

If you need to develop advanced features for Qlik Sense through mashups or extensions, send us an email: info@clusterdesign.com.br

Creating your own Qlik Sense custom chart extension

Extensions are Qlik Sense components made with HTML, CSS and JavaScript, which are meant to be used inside QVFs or Mashups.

They serve a multitude of purposes, such as creating custom charts, buttons, tables, comments, and so on.

This short post will show you how to create an extension from scratch. It will be a custom line chart using the ECharts library.

The result will be the image below, and you can use it in your applications and create new features as you wish!

Needed tools:

– Qlik Sense Desktop
– A Text Editor (I use Visual Studio Code)
– ECharts Library (https://echarts.apache.org/)
– Basic HTML and JS knowledge
– Browser (we will access Qlik Sense via this address: http://localhost:4848/hub)

Building the basic file structure:

Once you’ve got your Qlik Sense Desktop up and running, we’ll create a file called ClusterLineChart inside the /Extensions/ folder. This is usually located under Documents/Qlik/Sense/Extensions/.

– ClusterLinechart.qext
– ClusterLinechart.js

The QEXT file is responsible for telling Qlik Sense what the above set of files represents. In this case, type will be “visualization”.

ClusterLinechart.qext File contents

{
 "name" : "Cluster Line Chart",
 "description" : "Minha primeira extensão!",
 "icon" : "extension",
 "type" : "visualization",
 "version": "0.1",
 "author": "Thomas Pessato"
}

And the basic Javascript file structure:

ClusterLinechart.js File contents

define( [
     'jquery'
 ],
 function ( $ , echarts) {
     'use strict';
     return {
         paint: function ( $element, layout ) {
             $element.append("teste");
             //deverá aparecer escrito ‘teste’ ao inserir a extensão
         }
     };
 } ); 

With this done, we can now access our extension via the “custom objects” tab inside a QVF.

Note 1: The $ element variable is the containing box in our extension. That is, anything we put inside this element will appear on the screen. This includes text or any html element.

Note 2: The paint method is executed every time an action occurs on the screen, be it a window resize, sheet object resize, an applied filter, etc. This method is responsible for ‘painting’ the object on the screen.

For testing purposes, we will include the text “teste” inside our extension. As we insert the extension into a sheet, the text “teste” should be visible:

Great! We now have an extension that we can include inside a QVF, and it already brings up information!

Now we must make sure all our dependencies are included in our extension. In this case, it means including the ECharts library.

 define( [
     'jquery',
     'https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js'
 ],
 function ( $ , echarts) {
    //repare na variável echarts, logo depois de $.
    …
 } ); 

At this point we should be able to “print” the “echarts” variable within our extension and check it exists in the console (hit F12 in the browser). Note: For this to work, we must insert the extension inside a sheet.

In other words, we are now able to use the ECharts library and start building our visualizations!

We now need to define which properties / data we want the Sense Engine to return. This means the data, the title, subtitle and footnote options of the object, and so on. For this to work, we must declare a few properties within our JavaScript code, which we will account for within our “return” in the code snippet below.

define( [
     'jquery',
     'https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js'
 ],
 function ( $, echarts ) {
     'use strict';
     return {
         initialProperties: {
             qHyperCubeDef : {
                 qDimensions : [],
                 qMeasures : [],
                 qInitialDataFetch : [{
                     qWidth : 2,
                     qHeight : 50
                 }]
             }
         },
         definition: {
             type: "items",
             component: "accordion",
             items: {
                 data: {
                     uses: "data",
                     dimensions: {
                         uses: "dimensions"
                     },
                     measures: {
                         uses: "measures"
                     }
                 },
                 sorting: {
                     uses: "sorting"
                 },
                 appearance: {
                     uses: "settings",
                 }
             }
         },
         paint: function ( $element, layout ) {
              …
         };
 } );

For more information on what each of the properties means: Building a property panel for your extension

Anyway, now we can get to the real work. With these properties, when we insert the extension into a sheet, the option to “Add dimension” and “Add measure” will appear, as it usually appears in Qlik’s native extensions.

When choosing the data that we want to include (a measure and a dimension), the Qlik engine will return the data and metadata within the variable called “layout”, which is within the “paint” function. Namely: function ($ element, layout) {…}.

paint: function ( $element, layout ) {
             var data = layout.qHyperCube.qDataPages[0].qMatrix;
             console.log(data);
         }

Adding this code snippet, then going through the JavaScript layout object, we will find the qMatrix property, which has all the data. We can check through the browser’s console what data is being returned. Note: In order to view the data as shown below, you must select a dimension and a measure for the extension.

What we need to do now is convert this console data into a friendlier view on the main browser.

In order to structure the data we got from the Qlik Engine, we know that position 0 of the array corresponds to the dimension, and position 1 to the measure. We will now separate this data into different strings.

var dimensions = layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {       return item[0].qText;
 });
 var measures = layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {
     return {
          value: item[1].qNum,
          itemStyle: {
              color: "red"
          }
     } 
 });

I used the map method to optimize the code. This code will come out as two arrays, one containing the dimension text (qText), and the second will contain 2 variables: value (qNum) and itemStyle. The value array will match the measurement value, and the itemStyle array will match pertinent row customizations. In this case, I just decided to put a “color” variable with the value “red”, which will be used to render the ECharts chart. We could input styles for the line, such as thickness, types of line, and so on.

Last but not least, we will now pass the data on to the graphic library and return the element to be displayed in our extension.

paint: function ( $element, layout ) {
       var dimensions = layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {
       return item[0].qText;
       });
       var measures = layout.qHyperCube.qDataPages[0].qMatrix.map((item) => {
           return {
                value: item[1].qNum,
                itemStyle: {
                    color: "red"
                 }
          } 
       });
       var myChart = echarts.init($element[0]);
       //initializing the graph in the extension's box. Since $element is a jQuery element, we access via index 0.
       // Here we pass all the variables to the graph configuration object, according to the Echarts documentation. xAxis for dimensions, and then passing measurements on the so-called data "series"
       var option = {
                  legend: {
                      data:[layout.qHyperCube.qMeasureInfo[0].qFallbackTitle]
                  },
                  xAxis: {
                      data: dimensions // variable 'dimensions', declared at the beggining
                  }, 
                  yAxis: {},
                  series: [{
                      lineStyle: {
                          normal: {
                              color: "red",
                              width: 3,
                              type: "solid"
                          }
                      },
                      name: 'Sales',
                      type: 'line',
                      data: measures // variable'measure', declared at the beggining
                      }]
         }; // what defines this being a line chart is the prop called “type”
         myChart.setOption(option);
         myChart.resize(); //whenever an action is taken, the chart must be resized via resize(). This is an eCharts method.
}

For more customizations (there are MANY), you can check out the ECharts documentation and test your countless options (https://echarts.apache.org/en/option.html).

The end result, using Qlik’s own Consumer Sales.qvf and using the City dimension along with “Avg Sales”:

Notice that at this time the customization panel works, with its basic settings:

There are several additional customizations and implementations to be had, such as:

  • chart filters;
  • zoom options;
  • data export options;
  • color customizations;
  • adding reference lines;
  • entry point customizations;
  • tooltip with values;
  • and more.

Nevertheless these will be covered in subsequent posts. We hope this post was useful! For more details on custom extensions and graphics, contact us!

4 Tips for Creating Accessible Qlik Sense Mashups

Qlik has made every effort to keep Qlik Sense in line with the latest trends and most advanced technologies, and the same goes for making the analytics tool accessible to people with disabilities.

Native Qlik Sense apps currently support the JAWS screen reader, as well as compatibility with Internet Explorer 11. However, the best way to engage and combine the power of Qlik Sense with accessible web application development standards is via mashup implementations that render the web experience more enjoyable and truly ready to use for people with disabilities, especially people who need screen readers or who can’t use a mouse or keyboard to navigate.

When we engage web languages and embed graphics or even customize them we gain the ability to design user interfaces that are compatible with free desktop screen readers such as NVDA, or ready to use in the palm of your hand through native Android and iOS screen readers.

Customized experience when using Mashups

A mashup provides much more freedom and flexibility to create an application that fits the specific needs of each user group. Whether creating a custom filter menu or adding dynamically accessible properties and attributes, the focus of an accessible mashup is to create an intuitive layout with smooth mouse and keyboard navigation.

Native Qlik Sense QVF limitations and how mashup engagement overcomes such limitations

When developing a web application with screen readers in mind, one important thing to keep in mind is make sure the user remains always aware of what is happening and where the focus is on the screen.

In the native application, the navigation works apparently well. But when using the NVDA reader, focusing on a table-like object, for example, the user receives no feedback with regards to what object is being focused on, since the table’s title is not read. This is something that can be solved in a mashup using the aria-label HTML attribute.

Engaging mashups we can, for example, help the user navigate information, control focus on screen elements, change text and element captions based on user actions, and create predictable QVF functionality components that have a simple and natural use.

4 quick tips for making an accessible mashups

1 – Help the user navigate

A good example is to create a “skip to main content” button at the top of the page that is hidden by default, but that becomes visible when it gets a keyboard focus.

2 – Make the user aware of what is happening on the screen

If you have a loading screen or an error screen, be sure to add focus to some text that tells the user that the application is loading or that an error has occurred. Example:

3 – Always remember to test your mashup in other platforms

Sometimes some solutions that make the application more accessible work slightly differently on different platforms. It is therefore important to always make sure that we are achieving the expected behaviour on all platforms. Otherwise you will need to find another way to reach the expected goal.

4- Less is more

Get rid of absolutely everything your user won’t use in the interface. For example, the native app’s edit bar, where users can edit and create their graphics and sheets, and so many other elements that we’ve just added to the interface that will eventually make the experience exhausting in areas of little or no importance.

Webinar: Configuring NewHub inside the Qlik Sense Enterprise environment

In this 45 minute webinar, explore how to install NewHub on your Qlik Sense environment: https://zoom.us/recording/share/sG7o-z96lqUtz-TZ8vDXVj3cZooufaaQB4d3xDQHjyawIumekTziMw

What will we cover?
– Installing a fresh version of NewHub via the QMC panel
– Linking your apps and mashups to NewHub through QMC custom properties
– Linking specific KPI’s to your NewHub installation by creating Master Items and Tags directly in the QVF file
– Customizing colors and logos to fit specific branding and data organization purposes

Transform the whole experience of using your Qlik Sense panels and mashups with NewHub.
FREE Download and Live Preview https://clusterdesign.com.br/en/en-newhub/

How to render a Qlik Sense object within a React mashup
By Pedro Ugioni and Andrés Ruiz Droege

This post aims to clarify the following points regarding the use of React in rendering Qlik Sense Mashups:

  1. After reading this, you will have learned how to implement a basic component using React in order to link to your Qlik Sense data and visually render it inside your React App.
  2. Understand the benefits a React deployment brings with regards to data management when working with the Qlik Sense platform for your data analysis.

Contextualizing React

React is a library developed and maintained by Facebook that is intended to build large application interfaces. One of the main objectives that React tries to solve is allowing for data updates every second. In other words, a tool to update data on the screen in real time.

Read More
Cluster partners with Looker

Building upon our existing design services and customization services with advanced BI panels and dashboards, Cluster proudly announces it’s newly minted partnership with North American business intelligence platform Looker.

With this new addition, Cluster reassures its positioning as a multi-platform consulting firm, and now paves the way for Looker’s global clients to fully customize their Looker-powered BI mashups.

Read More
Download NewHub for Qlik Sense. For Free

The full-featured version of NewHub is available for download. The mashup was released in late 2018 and runs within Qlik Sense Server. This means it does not require any additional structure beyond the Enterprise license.

Just fill out this form and you’ll receive a zip file for installation, along with configuration instructions and a commercial presentation. This version remains free up to 5 (five) users/tokens and allows color and logo customizations.

Click here to learn more about NewHub

DOWNLOAD DA VERSÃO COMPLETA PARA 5 USUÁRIOS




Você está baixando o NewHub gratuito para 5 (cinco) usuários.
Para podermos liberar este acesso, na primeira vez que você acessar o NewHub no seu servidor Qlik, pegaremos automaticamente as seguintes informações: Nome do Host, Nome do Usuário e o ID da instalação do Qlik. Estes dados estão protegidos e são armazenados apenas para fins de controle e liberação dos seus usuários ao NewHub.
Se, a qualquer momento, você desejar parar de utilizar o NewHub e quiser remover seus dados, basta enviar um email para info@clusterdesign.com.br com esta solicitação informando o nome do seu usuário Qlik.