The Widget editor allows you to create and edit widgets, which are basically objects that customize the behavior and appearances of sheets and charts. 

Contrary to extensions, widgets only use HTML and CSS code, so you will find it a lot easier to create and understand widgets, but what you can achieve with these is very limited.

As widgets only use HTML code, you can create very simple visualizations, but you can also create objects that affect the behavior of the application, such as clearing selections, locking them, jumping from one tab to another, and so on. 

As with any other extension, widgets will show up in the Custom Objects menu while editing the application in Edit mode.

To explain the extent of widgets a bit more, I will show you how to create a simple button that can clear a user's selections. The Qlik Sense Widget editor comes with code snippets that we can reuse.

From within Dev Hub:

1. Click on Widget editor
2. In the Welcome window, click on Create new library to create a library to store the widget
3. Type in the library name MasteringQSWidgets and click on the Create button

The previous steps should take you to the Widget editor. Here, we have two main panels, one for HTML and one for CSS. The following image shows the editor screen:

 

In my example, I use a block of sample code that comes with Qlik Sense and I can edit to my liking.

Next, click Insert, located on the HTML panel. From the Snippets list, choose Buttons with actions and click on Insert when done.

The following image shows how to insert a snippet into our widget:

Once you are back to the editor screen, you will see lines of HTML code populated in the HTML panel.

To preview the result, choose an application from the top dropdown,which will let us see the different buttons that the HTML code generates.

For my widget, I only want one button that clears the selections. So, let's simply remove all lines of code that are not related to  Clear selections.

The final code should look like this:

<!-- Some examples how to use actions -->
<p>
  <b>App actions:</b><br/>
  <lui-button ng-click="app.clearAll()">Clear selections</lui-button><br/>
</p>
<hr/>

If you like what you see in the Preview screen, Save the changes and name it MyQSWidget. Choose Other in the Widget type dropdown and click on Save.

To test our widget, open an existing application or create a new one with some data, drag and drop the widget MyQSWidget from the Custom Objects section, and you now have an awesome Clear selections button that you can use anywhere.

You can now modify the button by choosing a different font size or color. A lot can be achieved with CSS, so follow your imagination!