How to create a “clear selections” HTML button for your next mashup project

[ArturoMuñoz]

I recently wrote about How to embed a Qlik Sense chart on your website using the single configurator tool that comes with Sense. Single Configurator is a fantastic tool to share charts and it also helps a lot when it comes to create super-simple iframe mashups.

On that post, Cristina Messana asked the following:

How can I create a button to clear selections? I'm trying to embed objects from an app but I can't embed clear selections.

That’s a fair question, Single Configurator will let us to share or embed a chart or an entire sheet. We can choose to include the selections bar into our chart which will get us the clear selections button and much more, it's a great option but sometimes we just need a simple button to help users to undo a selection in a single chart mashup.

How to create an HTML button to Clear Selections, step by step guide:

1 Open Qlik Sense Desktop, open your browser and type in: http://localhost:4848/workbench

    If you don’t know what Workbench‌ is for, please check this blog post.

2 Create a new Mashup, name it and pick a default template. “Basic Mashup Template with Absolute Positioning”. Click on the new created mashup and edit it.

3 Select one apps from the drop down list on the left hand side of the screen.

4 Drag and drop one of the charts into one of the six gray placeholders.

5 Go to the HTML tab and add the html code for the button to one of the empty placeholders so your button gets properly situated in the page. In the example I'm adding the button to the first placeholder QV01

<div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvplaceholder">
  <button class="clear_selections" href="#">Clear Selections</button>
</div>

Please note that it’s important to add a class or an ID to the button.

6 Add the following code to the js file at the line 28:

$('.clear_selections').on('click',function(){
    app.clearAll();
})

We are targeting all the elements in the HTML file that have a class called clear_selections, our button belongs to that class so on click it will execute the API method clearAll(). Please check Qlik Sense Developers Help site for complete API reference.

7 Click on View button on the Workbench top bar to open a new browser tab and check the generated site.

You should be able to get the source files at: C:\Users\YOURUSER\Documents\Qlik\Sense\Extensions

Now is the time for you to create your own mashup project, toy with the CSS properties, add HTML headers, text paragraphs and more Qlik Sense objects to compose a complete data web site.

Enjoy!