Skip to main content Skip to complementary content
Qlik Resources

Toolbar (extension example)

The Toolbar visualization demonstrates how to programmatically call Qlik Sense functions. It also shows that you can create a visualization that does not visualize Qlik Sense data but is used for interaction with the app. You do this by leveraging the Mashups API into your extension by loading the qlik JavaScript module, the same module used when building websites that includes Qlik Sense objects and calls.

Below you see three ways of how the Toolbar code example can be displayed in Qlik Sense.

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

    To be able to interact with the app we use a qlik JavaScript module, the same module used when building websites that includes Qlik Sense objects and calls:

    define(["jquery", //mashup and extension interface "qlik"], function($, qlik) { function createBtn(cmd, text) { return '<button class="qirby-button" style="font-size:13px;" data-cmd="' + cmd + '">' + text + '</button>'; }

  3. Implement paint method.

    In the paint method we create the html for our extension based on data in the data parameter. Refer to paint method for details on this:

    Then we set the content of the $element parameter to display the extension content.

    paint : function($element, layout) { $element.css('overflow', 'auto'); //create the app button group var html = '', app = qlik.currApp(); html += '<div class="qirby-buttongroup">'; if(layout.buttons.clear) { html += createBtn("clearAll", "Clear All"); } if(layout.buttons.back) { html += createBtn("back", "Back"); } if(layout.buttons.forward) { html += createBtn("forward", "Forward"); } if(layout.buttons.lockall) { html += createBtn("lockAll", "Lock All"); } if(layout.buttons.unlockall) { html += createBtn("unlockAll", "Unlock All"); } html += '</div>';
    Information noteFor full implementation on the paint method, see the full code example.

  4. App level commands.

    The extension connects app level commands to a row of buttons:

    $element.find('button').on('qv-activate', function() { switch($(this).data('cmd')) { case 'clearAll': app.clearAll(); break; case 'back': app.back(); break; case 'forward': app.forward(); break; case 'lockAll': app.lockAll(); break; case 'unlockAll': app.unlockAll(); break;

  5. Field level commands.

    The Toolbar extension connects some field level commands to another row of buttons using the value selected in the drop-down list as the field name parameter:

    //field actions case 'clear': app.field(layout.field.list ? $fields.val() : layout.field.fixed).clear(); break; case 'lock': app.field(layout.field.list ? $fields.val() : layout.field.fixed).lock(); break; case 'unlock': app.field(layout.field.list ? $fields.val() : layout.field.fixed).unlock(); break; case 'selectmatch': app.field(layout.field.list ? $fields.val() : layout.field.fixed).selectMatch($element.find("#match").val(), true); break;

  6. Bookmark commands.

    Bookmark actions are connected to another row of buttons:

    //bookmark actions case 'bmapply': app.bookmark.apply($bookmarks.val()); break; case 'bmcreate': app.bookmark.create($element.find("#bmtitle").val(), null); break; }

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