Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
QlikWorld, June 24-25, 2020. Free virtual event for Data Integration and Data Analytics gurus. Register Now
Employee
Employee

Required: Qlik Sense Desktop, Helpdesk Management.qvf

Files Created: Index.html, index.js

Ok, we created a beautiful visualization that everyone in the company is excited about. One day we are asked to publish this onto our website and we are thinking… is this possible? Yes it is! Qlik Sense comes with a built in API that we can get any object that we have created in our app and put it on our website. In this article I will give you step by step directions on how to do that.

  1. Make sure that you have your Qlik Sense Desktop open. This will start a local server on port 4848 that you will be able to access your apps from. Name your App "Helpdesk" and from the template drop down select "Basic Mashup ..." and hit "Create"
    workbench1.png
  2. Now we need to enter into the app, so click on "Helpdesk" that was just created and from the popup window click on "Edit".
  3. There are 4 panels. The far left is where we choose our app and the objects that we will use in our webpage. On the right you will see the "Layout" tab. This is the place the we will drag our objects to and the 2 pages that automatically are created for us, "Helpdesk.html" and "Helpdesk.js". The workbench will create the basic code for us to get the objects from the Qlik Sense Desktop and html that will display these objects.
  4. Now, lets select our app from the left. Click on "Please choose an app" and select the "Helpdesk Management.qvf". All of the objects will be displayed for us to use. Lets select one bar graph to use in our webpage. Click on "Avg Case Resolution Time (Days)" and drag it to the "Layout" panel, onto the first grayed rectangle.
    workbench2.png
  5. If you click on the "Helpdesk.html", you will see the included libraries. The css is needed for proper visualization and require.js to connect to the Qlik Sense Desktop and get the app.

    <link rel="stylesheet" href="https://community.qlik.com/resources/autogenerated/qlikui.css">

    <link rel="stylesheet" href="https://community.qlik.com/resources/assets/client/client.css" media="all">
    <script src="/resources/assets/external/requirejs/require.js"></script>
    our js file
    <script src="Helpdesk.js"></script>
    and our placeholder for our objects
    <div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
  6. Now, moving on to the JavaScript file generated. This is composed of two parts. The fist, is the configuration.
    var config = {
      host: window.location.hostname, 
      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"
    } );
  7. and then we have the actual connection code where we get the app and the specific object.
    require( ["js/qlik"], function ( qlik ) { 
      var app = qlik.openApp('Helpdesk Management.qvf', config);
      app.getObject('QV01','a5e0f12c-38f5-4da9-8f3f-0e4566b28398');
    } );
    The getObject method gets the specified object and displays it in the div with id="QV01"
    <div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvobject"
    ></div
  8. That's it! We created our first Mashup. Make sure to click on "Save All" and preview by clicking on the "View" button.
    workbench3.png
  9. The files are located under:
    C:\Users\<username>\Documents\Qlik\Sense\Extensions\Helpdesk

I hope this was helpful enough to get you started with displaying your visualizations on a webpage. If you have this app published on your QMC, change in the JavaScript the host (step#6) of your server and the id of the app (step#7) to something like
var app = qlik.openApp('bb4a797c-b483-462b-84d4-53238ce1eeb1', config);

---

More Info regarding the Qlik Desktop Workbench

Qlik Sense Workbench. The visualization and Mash-Up Editor

3 Comments
Not applicable

Thanks Yianni!

I have to go try this out.

0 Likes
1,375 Views
Partner
Partner

Great....really great.

Thanks a lot!

0 Likes
1,375 Views
Master
Master

Hi Sir Nice post ,

I have a question to you , may i know how you can update chart at the web site ? So that it will make the chart display update to date data.

I mean how to can do it manually and by schedule ?

Paul

0 Likes
1,375 Views