How to Render a Qlik Sense Object Within a React Mashup

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

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.
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.

This provides a great advantage for Business Intelligence efforts, where data analysts increasingly expect and need to have instant access to their operational data right at the moment any given database is updated at the source.

In the Qlik world this translates into a very useful synergy between the React library and the Qlik Sense Engine (the component in charge of working the raw data from the databases to the user’s screen).

Creating Components

First, we’ll create a React component to open the connection to the Qlik Engine and link to the QVF where the data resides. We’ll call this component “QlikConnection”.

Now we continue building another component (let’s call it “QlikObject”). This one will be responsible for rendering a KPI that will come from the QVF we linked in the previous component (QlikConnection).

Finally, we will create a third component called “App”, which is responsible for managing the Mashup and connecting (in the context of the React library) the other two components we created earlier.

Working with React is very simple: its API is very small and it’s just a matter of understanding the React component’s life-cycle, along with some functions… With this in place, you can already enjoy the best features this library has to offer. To make the experience even more enjoyable, you can use Babel to convert your tags written in JSX (JavaScript XML) and make your development process even simpler.

That said, let’s get our hands dirty with some code

1. Inside your index.html file it is necessary to import the “require” library, in order to open a connection with Qlik, React, ReactDOM, Babel, and all all other components we’ve created or will create (see Fig. 1)

2. Create a <div> and assign an id to it (in our example we are working with an id = “root”), which we will use to start our app.

Figure 1:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>React Mashup</title>
<link rel=”stylesheet” href=”../../resources/autogenerated/qlik-styles.css”>
<script src=”https://unpkg.com/react@16/umd/react.development.js”></script>
<script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script>

<script src=”https://unpkg.com/babel-standalone@6.15.0/babel.min.js”></script> <script type=”text/babel” src=”QlikConnection.js”></script>
<script type=”text/babel” src=”QlikObject.js”></script>
<script type=”text/babel” src=”App.js”></script>
<script src=”../../resources/assets/external/requirejs/require.js”></script>
</head>
<body>
<div id=”root” style=”background-color: black; width: 100%; height: 100%; position: fixed;”></div>
<script type=”text/babel”>

ReactDOM.render(
<App/>,
document.getElementById(‘root’)
);

</script>
</body>
</html>

3. After our index.html is done, we continue programming our “QlikConnection.js” component. This component is responsible for opening the connection to the QVF, which in turn is determined by the “qvfName” property.

4. At this point a connection with the Qlik server is made, which is essentially “running” the mashup. Once you get the requested Qlik app, the callback function is triggered, which we pass on via a property we named “callback”.

class QlikConnection extends React.Component {

constructor(props){
super(props);
this.state = {};
}

componentDidMount(){
this.openQlikConnection();
}

openQlikConnection(){
var me = this;

var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( “/extensions” ) + 1 );
var config = {
host: window.location.hostname,
prefix: prefix,
port: window.location.port,
isSecure: window.location.protocol === “https:”
};
require.config( {
baseUrl: ( config.isSecure ? “https://” : “http://” ) + config.host + (config.port ? “:” + config.port : “”) + config.prefix + “resources”
} );

require( [“js/qlik”], function ( qlik ) {
qlik.setOnError( function ( error ) {
me.props.callback({errorMessage: ‘Error upon loading QVF from Qlik ‘ + error, app: null});
console.log(error);
} );
//open apps — inserted here —
var app = qlik.openApp( me.props.qvfName, config );
var state={ errorMessage: null};
state[me.props.appName] = app;
me.props.callback(state);
} );
}

render() {
return <span/>;
}
}

5. Once we have configured our “QlikConnection.js” component, we move on towards configuring the “QlikObject.js” component.

This component receives the connection with the Qlik App as properties, along with the KPI id that will be rendered, and a unique id that will be used to identify the div that was created to insert the Qlik object.

class QlikObject extends React.Component {

constructor(props){
super(props);
this.state = {};
}

componentDidMount(){
var me = this;
this.props.app.getObject(this.props.chartId, this.props.qlikId).then(model => me.setState({model:model}));
}

shouldComponentUpdate(nextProps, nextState){
return this.props.qlikId != nextProps.qlikId;
}

componentDidUpdate(){
var me = this;
if(this.state.model){
this.state.model.close();
}
this.props.app.getObject(this.props.chartId, this.props.qlikId).then(model => me.setState({model:model}));
}

componentWillUnmount(){
if(this.state.model){
this.state.model.close();
}
}

render() {
return <div style={{height:300, width:700}} id={this.props.chartId} />;
}
}

6. Finally having completed these two components called “QlikConnection” and “QlikObject”, we will move on to the Root component of the app in React. Let’s just call it “App.js”.

This Root component is responsible for the overall management of our app. Here we will manage the app’s global properties, which in turn will start all other components that the app will use (QlikConnection and QlikObject for this particular case).

The moment we call these components, we will receive three properties that we need to take into account: “callback,” “appName” and “qvfName”. They will pass the reference to a function that updates the state in the App component.

‘use strict’;
class App extends React.Component { constructor(props) {
super(props);
this.state = { };
}

onMessage(state){
this.setState(state);
}

render() {

var content = [];
if(this.state.app){
content = <div>
<QlikObject qlikId=”hRZaKk” chartId=”helpdesk-line-chart” app={this.state.app} />
</div>
}

return (
<div style={{backgroundColor:’black’,width:’100%’,height:’100%’}}>
{content}
<QlikConnection callback={this.onMessage.bind(this)} appName=”app” qvfName=”Helpdesk Management.qvf”/>
</div>)
}
}

And Voilá… Done. The set of components described above display a Line Chart that looks up and renders content directly from the specific KPI within our QVF called “Helpdesk Management.qvf”.

If you have the need to add new charts, objects, or specific KPIS, etc., simply replicate the call to a new instance of the “QlikObject” component. We can do this by changing the qlikId property to something new that is also unique.

If you want to get a copy of the full source code, visit our repository on Github.

We hope that with this example you will be able to understand a bit more in depth how React helps in rendering Qlik data inside custom Mashups.

If you need professional help with consulting and developing a Qlik Sense Mashup using all the advanced benefits React has to offer, please contact us for an evaluation of your project.

To learn more about mashups, try participating in our “Qlik Sense Mashup Design and Development” course (offered in portuguese).

Looking for more?

Be the first to know

Get first-hand access to our free Design and Dataviz content directly in your inbox

by industry

Custom projects

Qlik On-Premise

Qlik Cloud

On-Demand Corporate Training

Learning

Free qlik content

Cluster info