QlikWorld 2020 Global Conference. Join us to discover how to get the most from your data. Act fast. Register now and save.

Creating a new widget

This example describes how to create a new widget in the Widget editor and make it available in Qlik Sense.

Tip: In general, the best way to learn about how widgets work is to edit one and look in the HTML and CSS it is made from.

Do the following:

  1. Launch Dev Hub.

  2. Click on the Widget editor button under Tools.

  3. From the Welcome dialog, click Create new widget.

    Fill in the details to identify your widget:

    • Enter a name for the widget. This example uses the name Helloworld.
    • A widget must belong to a widget library. Choose the example widget library that is installed with Qlik Sense. In this example, it is called qlik-widget-lib.
    • You can designate a type for the widget, but it is not mandatory. For this example, from the Widget type drop-down list, select Other.
    • If you wish, add a text description for the widget and an author.
    • If you intend to use a custom component in your widget, select the custom component from the list of available components. You can add a custom component dependency at a later stage, from the Settings dialog.

      You can have more than one version of the same custom component in the Qlik Sense system and if more than one version exists, the dependency is defined for a specific version. The version defined as a dependency is the version that is used in the widget.

      Note: Widgets referencing a custom component that is not listed as a dependency will not render as expected.

      Custom component dependencies for more details.

  4. Click Create.

    The Widget editor opens and the Helloworld widget is highlighted in the list of widgets in the open library.

  5. At the top-right of the toolbar, select an app from the drop-down list.

    This allows you to see a preview of the widget while you are creating it. If you were creating a widget that used data, the widget would use the data in the selected app to show the preview.

  6. In the HTML editor, add the following HTML:

    <div class='color'>

    Hello world!

    </div>

  7. In the CSS editor, add the corresponding .color class:

    .color{

    color:blue;

    font-size:25px;

    font-weight:bold;

    }

    You see the preview of the widget displaying Hello world! in blue, bold text and with font size 25 pixels.

  8. In the toolbar, click Save.

Add the widget to a sheet in your app

When you have created a widget library and widgets, to be able to use them in your apps, you must export the library and import it into Qlik Sense as custom objects.

Exporting and importing widget libraries

When the widget library is imported into Qlik Sense as a set of custom objects, you can add your newly-created widget to a sheet in any app you have access to.

Do the following:

  1. In Qlik Sense, open an app and create a new sheet.

  2. Go to the new sheet and click Edit.

  3. From the assets panel, click the custom objects icon g.

  4. Find the library to which you added the Helloworld widget (this example used qlik-widget-lib).

  5. Drag the Helloworld widget to the sheet.

  6. Click Done in the toolbar.

When the widget is updated in the Widget editor, the changes will be reflected in your app.

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?