English Qlik Sense Developers 1.0

Getting started building mashups

If you want to make use of Qlik Sense Workbench, you must have Qlik Sense Desktop installed.

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 extension MyMashup and use the Basic mashup template with absolute positioning and then click Create.

    The new extension is created and visible in the list of extensions.

  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.qvf from the list.

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

    //open app and get objects var app = qlik.openApp("Helpdesk Management.qvf", config); $(".qvobject").each(function() { var qvid = $(this).data("qvid"); app.getObject(this, qvid); });
  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:

    • High Priority Cases
    • Open & Resolved Cases Over Time
    • Medium Priority Cases
    • Open Cases vs Duration
    • Open Cases by Age
    • Case Details: 9031 Cases

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

    <div class="qvobject" id="CurrentSelections" style="left: 0px; top: 0px; width: 100%; height: 35px; position: absolute;" data-qvid="CurrentSelections"></div> <div class="qvobject" id="QV01" style="left: 20px; top: 50px; width: 200px; height: 200px; position: absolute;" data-qvid="55fecfc8-6460-4e63-9f32-cb8e8bd52438"></div> <div class="qvobject" id="QV02" style="left: 320px; top: 50px; width: 400px; height: 200px; position: absolute;" data-qvid="hRZaKk"></div> <div class="qvobject" id="QV03" style="left: 20px; top: 300px; width: 200px; height: 200px; position: absolute;" data-qvid="b360c79d-0544-49fb-b3a2-aa8d7e94affd"></div> <div class="qvobject" id="QV04" style="left: 320px; top: 300px; width: 400px; height: 200px; position: absolute;" data-qvid="298bbd6d-f23d-4469-94a2-df243d680e0c"></div> <div class="qvobject" id="QV05" style="left: 20px; top: 550px; width: 200px; height: 200px; position: absolute;" data-qvid="PAppmU"></div> <div class="qvobject" id="QV06" style="left: 320px; top: 550px; width: 400px; height: 200px; position: absolute;" data-qvid="rJFbvG"></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: http://localhost:4848/extensions/MyMashup/MyMashup.html.

See also: