English Qlik Sense Developers 1.1

Getting started building mashups

This topic describes how to create your first mashup, based on the Helpdesk Management app which is included in your Qlik Sense installation.

Do the following:

  1. Open Qlik Sense Workbench.

    See Launching Qlik Sense Workbench.

  2. Click Create new and fill in the details.

    Name the mashup MyMashup and use the Basic mashup template with absolute positioning and then click Create.

    The new mashup is created and visible in the items list.

  3. Click on the newly created MyMashup and then click Edit.

    The mashup is launched in the Mashup workbench.

  4. Connect to a Qlik Sense app.

    Select Helpdesk Management from the list.

    If you select the MyMashup.js tab you can see that the JavaScript code has been updated:

    	//open apps
    	var app = qlik.openApp('08897488-c96f-4494-86bd-14c711d550e8', config);
    
    	//get objects
  5. Return to the Layout tab and then select the visualizations to display in your mashup.

    Select the visualization in the list to the left and then drag it to the placeholder.

    In this example we select the following visualizations:

    • Avg Case Resolution Time (Days)
    • Open & Resolved Cases Over Time
    • High Priority72Cases
    • Open Cases vs Duration
    • Open Cases by Age
    • Case Details: 9031 Cases

    If you select the MyMashup.js tab you can see that the JavaScript code has been updated:

    	//get objects
    	app.getObject('QV06','rJFbvG');
    	app.getObject('QV05','PAppmU');
    	app.getObject('QV04','298bbd6d-f23d-4469-94a2-df243d680e0c');
    	app.getObject('QV03','55fecfc8-6460-4e63-9f32-cb8e8bd52438');
    	app.getObject('QV02','hRZaKk');
    	app.getObject('QV01','a5e0f12c-38f5-4da9-8f3f-0e4566b28398');

    If you select the MyMashup.html tab you can see that the html code has been updated:

    <div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
    <div id="QV02" style="position: absolute; top: 50px; left: 320px; width: 400px; height: 200px;" class="qvobject"></div>
    <div id="QV03" style="position: absolute; top: 300px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
    <div id="QV04" style="position: absolute; top: 300px; left: 320px; width: 400px; height: 200px;" class="qvobject"></div>
    <div id="QV05" style="position: absolute; top: 550px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
    <div id="QV06" style="position: absolute; top: 550px; left: 320px; width: 400px; height: 200px;" class="qvobject"></div>
  6. Click Save all.

    The mashup has now been saved.

  7. Click View to preview your mashup project in a new browser tab.

You have now created a mashup displaying a few visualizations from a Qlik Sense app.

To launch your mashup locally, open a browser window and type in the following URL: .../extensions/MyMashup/MyMashup.html.

See also: