"......there are common functional needs to solve the acquisition and transformation of data before getting it into the hands of your data literate consumers. "

...View More

We did again! Qlik is the official partner of the Fortune 500 list for second year!This year the famous Fortune 500 list was, as the rest of us, impacted by the effects of the economic crisis that followed the COVID-19 pandemic, and obviously so was the piece Qlik and Fortune team did together. We named it “The pandemic effect of the Fortune 500”.We wanted to start by looking back in time and check how a crisis looks like, we wanted to see how long it takes for the economy to recover after a crisis, how many years apart are the crisis, etc.Did you know that someone born in the year 2000 have spend almost 75% of her life in an economic crisis (or recovering from one)? The numbers relax as we move back in time, but for someone born in 1955, still the 45% of his lifetime was lived during a crisis (or recovering from one).When we look at the profits of the companies that make the Fortune 500 list, we can see some acute dips in the line that shows the evolution of the indicator. For example, the 2007-2008 global financial crisis had a lasting effect on the profits in the listed companies. It took five years for the profits to reach levels pre-crisis.Another interesting angle is to see how similar the recent crises are as they shape the profits of the Fortune 500 list. We plotted the last 5 crises in a chart, to make the comparison useful, we picked the lower point of the trend as our reference point and we did set it up as the year 0 of the crisis, then we looked back and forward (when available).Looking at the effects of the COVID19 economical impact of the Fortune 500 list by sector, we can see that not all sectors have been impacted equally and in fact some of them show an increase in their profits and revenue during the worst of the pandemic. Healthcare, Retailing, and Technology among other sectors. The worst of the economical crisis caused by COVID19 was for the energy sector that took a hard hit on both revenue and profits.Finally, we drilled down into the Energy sector to understand better how the industries and the companies within performed last year.Don't forget to check our collaboration with the Fortune 500 list.I hope you like it and find it interesting. ...View More

Hi GuysBe sure to register this week to watch and learn about Qlik Sense Mobile presented by myself and special guest Qlik Product Manager@Caique_Zaniolohttps://go.qlik.com/Do_More_with_Qlik_Webinar_Series-June10_Registration-LP.html?sourceID1=mtocomm610Did you know that can bring your most important analytics front and center in the Qlik Sense Mobile Hub? Learn about Chart Monitoring and more on the next DO More with Qlik.This week! June 10th at 2PM ET. ...View More

You are a Qlik coder and for the past 3 years you have built so many mashups, extensions, and widgets using Qlik’s Capability API. It is your Swiss army knife in the jungle until one day you read a blog about enigma.js. You are wondering if enigma.js is a better tool than the Capability API. Well, why not give it a try?

...View More

Check out how I made a radar chart for nebula.js with a custom picasso.js component.

...View More

Qlik Sense Mobile for SaaS was recently released to the general public and judging by what I have seen on my social media feeds, it has been well received. Having had the experience of working with the app leading up to the release, I thought it might be helpful to share some of the things that I learned about developing an app for the Mobile SaaS app.

...View More

In the past few posts, I have discussed the modern, lightweight framework from Qlik, Nebula.js, and its usage in developing various Qlik Sense objects such as — creating a new visualization chart or building Embedded analytics solutions like Mashups. Nebula.js is a collection of product and framework agnostic JavaScript libraries and APIs that helps developers easily integrate out-of-the-box capabilities on top of the Qlik Associative Engine. So, let’s assume you have an already existing extension developed using the Extension API, and you would like to migrate this extension to the Nebula.js framework. How would you do this?The focus of this post is to understand what resources are required by a Developer to effectively migrate an existing extension developed using Extension API to the Nebula.js framework and its potential benefits.To demonstrate the overall migration process, I will take an existing visualization extension that I have developed in the past using the Extension API. The extension is a Scatter-Pie plot that allows us to visualize each scatter plot’s bubble as a pie-chart to understand the Sales-Profit correlation for the three categories state-wise as shown below:Let us try to recreate the exact same visualization by leveraging the novel Nebula.js framework.Traditional Extension API-based visualizations need JavaScript code (.js), a metadata file (.qext), and stylesheets (.css). The logic of the extension is controlled using the code in the JavaScript file and so that is the entry point for your development activity. In Nebula.js, we try to segregate the various modules of the code to align it to a modular architecture, thus providing greater flexibility to the developers. Let’s deep dive into the steps required to migrate our current extension.Step 1: Create a Nebula project structure.The first step is to get all the files required as part of developing the extension. We can use the Nebula.js CLI like below and structure the project.npx @nebula.js/cli create hello --picasso noneExecuting the above command, gives us the three required files.Step 2: Starting the local development server.One of the advantages of using the Nebula.js framework is that it comes with a local development server that allows developers to see their output as they code. To start the server, execute the following command.cd hello npm run startNow, we will need to connect to Qlik’s Associative Engine using the WebSocket protocol. Once we establish a connection, we will be presented with the list of apps to test our visualization in the Developer UI.Step 3: Configuring the data structure.Next, we need to configure the data structure and define our hypercube as shown in the code snippet below. This is similar to what we have in our current extension (Extension API). However, all this information is saved under one single JavaScript file in the older approach.const properties = { showTitles: true, qHyperCubeDef: { qInitialDataFetch: [{ qWidth: 6, qHeight: 100 }], }, definition: { type: "items", component: "accordion", items: { dimensions: { uses: "dimensions", min: 1, max: 6, }, measures: { uses: "measures", min: 2, max: 2, }, sorting: { uses: "sorting", }, settings: { uses: "settings", }, }, }, }; export default properties;The only thing that we do differently here in Nebula is to add the/qHyperCubeDef as a data target in data.js like this:export default { targets: [{ path: '/qHyperCubeDef' }], };Step 4: Import packages.Nebula.js is built on the concept of custom hooks. If you do not know what hooks are, this tutorial will give you a high-level idea of how to leverage them in terms of Nebula. As per the Getting started with Nebula extension tutorial, we will need to import two essential packages to access the Qlik Sense object’s layout and render the data. They are useLayout and useEffect. Also, since our visualization is built using D3.js, we will need to install D3.js in our NodeJS environment and import the package for D3 using the commands below.Install D3 by runningnpm install d3 --saveImport D3 toindex.jsby addingimport * as d3 from d3Now, let us understand what we did differently here in the Nebula.js framework as compared to the Extension API.As we can see from the above comparative analysis, the primary difference is that the Extension API uses RequireJS to load resources asynchronously and has a jQuery wrapper around the HTML element. In the Nebula.js framework, we eliminate all these dependencies, thereby making it framework agnostic and faster.Step 5: Code Logic.Our most important goal is to develop the main functionality of the extension. Again, the whole idea here is to replicate the exact visualization developed using Extension API without investing additional time in rewriting the source code. The entry point for the extension’s code is the index.js file, and currently, it looks like below with all the necessary packages.import { useLayout, useElement, useEffect } from "@nebula.js/stardust"; import properties from './object-properties'; import data from './data'; import * as d3 from "d3"; export default function supernova() { return { qae: { properties, data, }, component() { const element = useElement(); element.innerHTML = '<div>Hello!</div>'; // eslint-disable-line }, }; }Now, let’s take a look at our current extension’s JS code.To render the visualization with an HTML element, we take advantage of thepaint($element, layout)method where$elementis a jQuery wrapper containing the HTML element andlayoutpresents the data and properties for the visualization. This method is called every time the visualization is rendered. So,do we have a similar approach in the Nebula.js framework?The answer is Yes!If we go back to our index.js file, we notice a functionsupernova( )that consists of thecomponent( )method, which is where all the rendering takes place. To render something, we need to access the DOM element the visualization is assigned to, and to do so, we need to use the useElement method. Also, as I mentioned in Step 4, to access the QS object’s layout and bind the data, we need to use the useLayout and useEffect methods. These three methods are all we need to migrate our current code to the newer framework successfully.After copying the current code and aligning it to Nebula’s programming standard, this is what we get.export default function supernova() { return { qae: { properties, data, }, component() { const element = useElement(); const layout = useLayout(); const selections = useSelections(); console.log(layout) //getting data array from QS object layout useEffect(() => { if (layout.qSelectionInfo.qInSelections) { return; } var qMatrix = layout.qHyperCube.qDataPages[0].qMatrix; var measureLabels = layout.qHyperCube.qMeasureInfo.map(function (d) { return d.qFallbackTitle; }); //an array that invokes each row of qMatrix from layout: var data = qMatrix.map(function (d) { return { Dim1: d[0].qText, Dim2: d[1].qText, Dim3: d[2].qText, Dim4: d[3].qText, }; }); var width = 1000; var height = 400; var id = "container_" + layout.qInfo.qId; const elem_new = `<div id=${id}></div>`; element.innerHTML = elem_new; viz(data, measureLabels, width, height, id); }, [element, layout]); } } }We see that most of the code lines are similar to what we had in our Extension API. The only difference lies in the way we interact with the three methods here in Nebula.js. In the end, theviz( )method is called within thecomponent( )function, and that is where our D3.js code for the visualization is. Again, this is similar to what we did in the Extension API. That is all we needed to do from a code perspective.Step 6: Build & Deploy.The good old extensions developed using Extension API had to be bundled (zipped) together with a .qext file, a JavaScript file, and any other dependency files. Nebula.js presents a modern way of building and preparing the extension to be deployed to the Qlik Sense environment.Firstly, since Nebula runs in a NodeJS environment, we can easily bundle everything and distribute the visualization as an NPM package using:npm run buildSecondly, to deploy the extension to a QS environment, we use the command below, which generates all files into the folder/hello-ext that you can then use as an extension in QS.npm run senseNow that we know about the resources required to migrate our existing extensions to the Nebula.js framework, let’s recap the potential benefits of the new SDK.Nebula.js is modular and allows developers greater flexibility in programming and code maintenance.It comes with a local development server to visualize the output as we code.Modern framework with no dependency on module loaders such as RequireJS or wrappers like jQuery.Available as an NPM package and hence very easy to get started with.Faster build and deployment; visualizations can be distributed as NPM packages.Way forward — support, etc.This brings an end to the post, and hopefully, this serves as an initial guide for developers and organizations planning to migrate their existing visualizations to the Nebula.js framework. For folks who want to get started with Nebula or build advanced visual representations using the SDK, here is a list of accumulated resources -Building a Hello world extension using NebulaWhy should we stop using Capability APIs?Building an advanced visualization extension using Nebula.js and 3rd party libs such as D3.jsDealing with variables in a Mashup using Nebula.js & Enigma.js (alternative to Variable API) ...View More

In today's blog and video, Qlik Solution Architect Tomilayo Komolafe (Tomi) is back providing real in-the-trenches solutions to real customer problems.How does one do analysis with multiple date fields?Here is the scenario:Customer had multiple date fieldsOne primary key is related to multiple date fieldsI was recently working with a prospect in the quality assurance (QA) space. The customer had an interesting problem on his hands. Whenever a QA event arises in his team, a QA number is generated. However, each QA #, at some point, would have a Date Identified, Date Initiated, Date of Occurrence, and Date Closed field. He was stumped on how to perform analysis on his data with these multiple date fields. For example, if he wanted to know how many events were Identified, Occurred, and Closed, in August 2020, how could he do this? He knew he would need some arbitrary master calendar that connects all these date fields together. (For a great explainer video on Master Calendar - check out this video from my colleague Mike Tarallo . It is slightly older but still valid in this scenario and explains the Master Calendar concept in an easy to understand manner. )NOW....that’s not all, my customer still needed a way to relate all the four date field types to the master calendar. We resolved his problem using Link Tables and my video below goes through how this can be implemented. In this example, I am playing the role of a retailer, think of Amazon, whom for any order generated with some Order ID number, there would be multiple dates related to this order. The dates here are OrderDate, InvoiceDate, ShippedDate, and ArrivalDate. Watch how easy Qlik makes analyzing this data set easy.Watch this video to learn more and see how we solved it:Can't see the video? YouTube blocked by your region or organization? Download the .mp4 files to watch on your computer or mobile device.See more of Tomi's posts:Looping Through Cloud Based Data FilesContact Tracing with Qlik Sense SaaS ...View More

There are two script and chart functions that I recently became aware of that I will start to use in future scripts. They are: Coalesce and EmptyIsNull. In this blog, I will explain how they both can be used. Let’s start with the Coalesce function.Coalescecoalesce(expr1[ , expr2 , expr3 , ...])According to Qlik Help, the Coalesce “function returns the first of the parameters that has a valid non-NULL representation.” This function can take an unlimited number of parameters. Let’s see it in action. In the table below, there are two fields: FirstName and LastName. The last column uses the Coalesce function to check first the FirstName field and then the LastName field for any non-NULL values. The first one found is returned. If neither the FirstName or LastName fields contain a value, then the last parameter (the default) is returned. In this example, that is “No name provided.”You can see that when there is a first name in the FirstName field, it is returned and when there is not a first name but just as a last name in the LastName field, the last name is returned as seen with Johnson. The last row in the table did not have a first name or last name, so the default “No name provided” is returned. The first row has an empty string in both the FirstName and LastName fields, so an empty string is returned by the Coalesce function.In the future, I will use the code below when I want to replace fields that are empty with a value.I would replace expressions like this:If(Len(Gender)>0, Gender, ‘Unknown’)With this expression:Coalesce(Gender, ’Unknown’)EmptyIsNullEmptyIsNull(exp )The EmptyIsNull function converts empty strings to NULL. In the first row of the table below, FirstName and LastName are empty strings. When using the EmptyIsNull function in the last column, you can see that it returns NULL in place of the empty string in the LastName field. Whereas in the other rows (rows 2-6), the last name is returned.When I have a field that is not 100% populated, I sometimes replace the empty strings with NULL. In the past, I would use an expression like this:If(Len(Gender)=0, Null(), Gender) or If(IsNull(Gender) or Gender=’’, Null(), Gender)Now, using the EmptyIsNull function, I can shorten my expression to this:EmptyIsNull(Gender)The Coalesce and EmptyIsNull functions are less complex and effective for use in chart expressions and in the script. Test them out the next time you need to replace empty strings in a field.Thanks,Jennell ...View More

Modern Embedded Analytics solutions using Qlik offers a stack of open-source libraries to build customized analytical platforms backed up with the robustness of Qlik’s Associative Engine. These new mediums facilitates communication with the Engine and provides the flexibility to develop your own client and services or to integrate visualizations and mashups. Historically, Capability APIs have been extensively used to build mashups and perform application related operations. An alternative offering to Capability API-based operations is Nebula.js and Enigma.js.To clarify the use of each of these libraries, let’s breakdown their functionalities in a simplistic way to help the developer community to get started with them.In this tutorial, we are going to focus on a user scenario that involves applying both Enigma.js and Nebula.js. This way we can have a fair idea of their applications and get started with their immense capabilities.User scenario: A company needs to build its own analytic solution while being able to leverage data from Qlik’s Associative engine and embed a couple of visualizations. The overall goal is to have some buttons in their webpage that would control the ‘dimensions’, allowing them to render the visualizations based on the buttons’ click. They have approached a similar type of situation in the native Qlik Sense using ‘variables’ and they would like the same capability in their own web solution.Solution: Since the company has taken advantage of ‘variables’ in the native QS, a similar approach for their web solution using the two libraries would be the following:Create a Mashup template using Nebula.js.Fetch the variable and its definition from QIX using Enigma.js.Load and register QS objects(action-button, charts) using Nebula’s stardust package.Consume the fetched variable in the ‘action-button’ and render.Integrate all the required visualizations from QS in the mashup.Let’s go through each of the steps in detail to understand how we can implement them -Step 1 — Creating Mashup template: In this tutorial, the focus is not on developing mashups but to implement the user scenario. A very simple tutorial to get started with developing mashups is on the official Qlik Developer site. Link: https://qlik.dev/tutorials/build-a-simple-mashup-using-nebulajsUsing the command line interface, we create a web project that has the following structure -/srcconfigure.js - Initial configuration of nebula.jsconnect.js - Connection setup with enigma.jsindex.html - A html page templateindex.js - Connect and visualizeStep 2 — Fetch the variable using Enigma.js: Like I discussed, Enigma.js allows us to communicate with the QIX engine and enables us to perform CRUD(create, read, update, delete) operations on QS apps and their entities. Since in this case, our target is to read a variable named ‘vChangeField’ from a QS app, we first create an object with list definition like below: const variableListProps = { qInfo: { qId: "VariableList", qType: "VariableList", }, qVariableListDef: { qType: "variable", qData: { tags: "/tags", name: "/", }, }, };In order to create the list object that we have defined, we use the createSessionObject() method provided by Enigma.js. After that, the properties of the object, including dynamic properties are retrieved using the getLayout() function and passed on to a passVariable(layout) like below: const variableListModel = await app .createSessionObject(variableListProps) .then((model) => model); variableListModel.getLayout().then((layout) => { passVariable(layout); });Now that we have the object properties in the layout, the next step is to retrieve the ‘variable’ inside our function passVariable() and use it on the ‘action-button’ that we will create for our mashup. function passVariable(layout) { const { qVariableList: { qItems: data }, } = layout; var pass_need = data[1].qName; }So, we finally have our desired variable stored in ‘pass_need’. This is all we had to do to fetch our variable using Enigma.js.Step 3 — Load and register ‘action-button’ and other charts: Our next step is to load the QS objects, i.e., ‘action-button’ and ‘combo’ and ‘bar’ charts required as part of this use case in our mashup and, to do that we will leverage Nebula.js. So, let’s go to the template defined in the configure.js file where we can see the following:import { embed } from '@nebula.js/stardust'; import barchart from '@nebula.js/sn-bar-chart'; const n = embed.createConfiguration({ context: { theme: 'light', language: 'en-US', }, types: [ { name: 'barchart', load: () => Promise.resolve(barchart), }, ], }); export default n;In this file, we have the initial configuration needed from Nebula.js perspective. First, an embedclass is imported from the ‘@nebula.js/stardust’ package and then using the Configuration object, we define the guidelines for our visualization and website. We also see that a bar-chart module is loaded from the package and then registered under types. This is what needs to be done to render our QS visualizations.For this use case, we need three action buttons, and one bar and one combo chart in our mashup. So, let’s load and register these three visualization components as shown in the snippet below:import { embed } from '@nebula.js/stardust'; import barchart from '@nebula.js/sn-bar-chart'; import actionButton from '@nebula.js/sn-action-button'; import combochart from '@nebula.js/sn-combo-chart'; const n = embed.createConfiguration({ context: { theme: 'dark', language: 'en-US', }, types: [ { name: 'barchart', load: () => Promise.resolve(barchart), }, { name: 'action-button', load: () => Promise.resolve(actionButton), }, { name: 'combochart', load: () => Promise.resolve(combochart), }, ], }); export default n;Step 4 — Create the action-buttons and render: In our previous step, we loaded and registered the three types of visual components we need as part of this mashup. Now, we need to use the fetched variable ‘vChangeField’ in the three action-buttons and render them. First, let’s create a new embed instance using the Enigma app in the index.js file and then render the action-buttons using the render function. This function renders a visualization into an HTMLElement.const n = embed(app); function passVariable(layout) { n.render({ type: "action-button", element: document.querySelector(".object_new"), properties: { actions: [ { actionType: "setVariable", variable: pass_need, value: "Decade", }, ], style: { label: "By Decade", font: { size: 0.7, style: { italic: true, }, }, background: { color: "Grey", }, border: { useBorder: true, radius: 0.25, width: 0.1, color: "Grey", }, icon: {}, }, }, }), n.render({ type: "action-button", element: document.querySelector(".object_new"), properties: { actions: [ { actionType: "setVariable", variable: pass_need, value: "Actor", }, ], style: { label: "By Actor", font: { size: 0.7, style: { italic: true, }, }, background: { color: "Grey", }, border: { useBorder: true, radius: 0.25, width: 0.1, color: "Grey", }, icon: {}, }, }, }), n.render({ type: "action-button", element: document.querySelector(".object_new"), properties: { actions: [ { actionType: "setVariable", variable: pass_need, value: "Director", }, ], style: { label: "By Director", font: { size: 0.7, style: { italic: true, }, }, background: { color: "Grey", }, border: { useBorder: true, radius: 0.25, width: 0.1, color: "Grey", }, icon: {}, }, }, }); }While creating the three action-buttons, we also need to specify their properties under properties as seen above. One of the important things to consider when defining the properties for an ‘action-button’ is what action do we want this button to execute on click. This is very similar to what we do non-programmatically in the native Qlik Sense app with action buttons. For this use case, we want these buttons to set a variable when clicked. So, under actions we set the actionType: “setVariable”. The next step is to pass the variable that we have retrieved using Enigma.js. In Step 2, we stored the variable in ‘pass_need’. So, we will pass this to the variable: pass_need property. We also, set a default value for each variable using the property value: “Director”.Step 5 — Integrate all the visualizations: Our final step is to bring all QS objects together in the mashup. We have already created and rendered the action buttons and, since we already have the combo and bar-chart in our QS app, we don’t need to create them but we will just retrieve them using their object IDs like the snippet below:n.render({ element: document.querySelector(".object"), id: "QVngr", //object ID of combo-chart }), n.render({ element: document.querySelector(".object"), id: "JbtsBVB", //object ID of bar-chart }); }Mashup inaction:As we can see, the rendering of the charts changes on the basis of the ‘button’ we click. The button leverages the ‘variable’ defined in our Qlik Sense application. This tutorial presents an alternative to the Variable API used inherently for performing CRUD operations with variables. It also demonstrates the usefulness of Nebula and Enigma.js frameworks for developing modern embedded analytic solutions.The Source code for this mashup can be found here: https://github.com/dipankarqlik/Variable_Enigma ...View More