Skip to main content Skip to complementary content
Qlik Resources

Horizontal list (extension example)

The Horizontal list code example demonstrates a horizontal listbox. The example demonstrates how to build a visualization based on a list object definition and it also demonstrates some different options in implementing selection support.

Finding the code examples

In a Qlik Sense Desktop environment, you find the code examples in ...\Users\<UserName>\Documents\Qlik\Examples\Extensions.

In a Qlik Sense environment, you find the code examples in ...\ProgramData\Qlik\Examples\Extensions.

Information noteThe code examples are not visible in Qlik Sense until you have deployed them. For more information about deploying examples, see Deploying your visualizations.

Full code example

Code example breakdown

  1. Edit the applicable fields of the qext file to set a default title, description, icon and type.

  2. Use a list object definition. To do this, you set up your initial properties to include a qListObjectDef:

    return { initialProperties : { version: 1.0, qListObjectDef : { qShowAlternatives : true, qFrequencyMode : "V", qInitialDataFetch : [{ qWidth : 2, qHeight : 50 }] }, fixed : true, width : 25, percent : true, selectionMode : "CONFIRM" },

  3. You also need to set up your properties panel to reference the qListObjectDef in definition:

    dimension : { type : "items", translation : "properties.dimension", ref : "qListObjectDef",

  4. In your paint method you can use the helper method eachDataRow, which is available in the Backend API, to loop through your data. You can also render frequency if frequency is enabled:

    this.backendApi.eachDataRow(function(rownum, row) { html += '<li ' + style + ' class="data state' + row[0].qState + '" data-value="' + row[0].qElemNumber + '">' + row[0].qText; if(row[0].qFrequency) { html += '<span>' + row[0].qFrequency + '</span>'; } html += '</li>'; });

  5. Enable selections. In an extension, you can choose between three options for selections.

    • No selections
    • Standard Qlik Sense selection model with toolbar and wrapper around the object
    • Quick selection, where selections are sent straight to the Qlik Sense Engine and immediately are reflected in the object

    For standard Qlik Sense selection mode, use the selectValues method available in the extension:

    self.selectValues(dim, [value], true);

    For Quick selection, send selections straight to the Engine using the Backend API:

    self.backendApi.selectValues(dim, [value], true);

  6. Enable snapshots for use in storytelling:

    snapshot : { canTakeSnapshot : true },

  7. Add styling to separate CSS file.

    It is good programming practice to keep your styling in a separate CSS file. Qlik Sense set the CSS class qv-object-[extension name] on your extensions. You should prefix your CSS rules with that. You then load your CSS file with requires and add its content to the HTML page:

    define(["jquery", "text!./horizlist.css"], function($, cssContent) {'use strict'; $("<style>").html(cssContent).appendTo("head");

Learn more

 

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here