Skip to main content
Getting started creating widgets


Getting started creating widgets

Warning noteDEPRECATED.
Widget support is deprecated and will be removed in a future release. See Deprecation Notice – Qlik Sense Widgets and Custom Components FAQ for more information.

When you start creating widgets, you usually modify existing widgets for your own apps. Your Qlik Sense installation includes a library of examples, which you can edit and preview in the Widget editor.

Widgets are created and edited in the Widget editor, one of the Dev Hub tools. To create and edit widgets you must have the correct access rights. The default role to be able to create and edit widgets is the ContentAdmin role

Access rights and Dev Hub.

Here, you will customize the Barchart widget that is found in the example widget library installed with Qlik Sense. All widgets must belong to a library. First, you must import the example library.

Importing the example widgets

Do the following:

  1. Use your file explorer to browse to the folder containing the widget library example files.

    For Qlik Sense Desktop, these are located at C:\Users\[User]\Documents\Qlik\Examples\Extensions\widget-examples.

    For Qlik Sense Enterprise, C:\ProgramData\Qlik\Examples\widget-examples.

    Select the folder contents and create the zip file

  2. Launch Dev Hub. From the hub in Qlik Sense or Qlik Sense Desktop, click Dev Hub repair icon.

    The Dev Hub start page is displayed in your browser window.

  3. At the top-right of the Dev Hub start page, click Add and select import icon Import widget library. Browse to the folder where you created the file and click Open.

    The example widget library is then imported. The widget library was successfully imported is displayed when completed.

  4. Click on the icon for widget-examples to open it in the Widget editor.

    Widget examples package in widget libraries screen

Editing and previewing a widget

Qlik Sense widgets can be created and edited using only HTML and CSS/LESS. You edit the HTML and CSS directly in the Widget editor.

In the Widget editor you can preview how a widget will look on a sheet in any one of the apps you have access to. This makes it easy to see what effect any changes you make in the Widget editor will have when you use the widget in an app.

Do the following:

  1. Right-click on the Barchart widget, and select Edit.

    The HTML and CSS rules that make up the widget are shown in the HTML editor and the CSS editor panels respectively.

    Tip noteIf there are a large number of widgets in the library, you can use the Search field to find a widget. The search tool filters the results as you type.
  2. Select an app from the drop-down list at the top-right of the screen.

    The properties panel builder contents for the app is shown. In this example, before any changes are made, the components in the widget from the properties panel builder are Data, Appearance, and General. Later, when the widget is added to a sheet, the properties panel for the widget alsoshows whatever components you add in the properties panel builder now.

  3. At first, the Preview pane displays Incomplete visualization because we have a bar chart widget, which requires at least one dimension and at least one measure to create a complete visualization.

    Click Data in the properties panel builder. For example, choose something like Customer as a dimension and .Sum(Sales) as the measure. The dimension you choose and measure you create depend on what is available in the app you selected.

    A preview of the bar chart is shown in the preview pane using the actual data from the app you selected.

  4. Change the color of the bars in the bar chart. In the CSS editor pane, find the @barColor variable, and change its value to #305f5f. This new value is picked up by the background-color definition in the .bar section of the CSS.

    The color of the bars in the preview of the widget bar chart is updated.

    Updated bar chart preview with colored bars
  5. Click Save in the toolbar.

    The widget is saved with the modification you made. This will be shown in the apps where the widget appears.

Tip noteYou can associate a widget with different apps while you are creating it. The widget uses the data from the app it is associated with, so the preview will give immediate feedback on how the widget will look in different apps. This is useful when you want to create a generic widget for use in different situations.

For an example of modifying a widget using the HTML editor.

Creating a new widget