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

Adding components to a widget

As well as having HTML and CSS editors, the Widget editor has a properties panel builder that is used to add components to a widget. You use the properties panel builder to add, edit, and remove the components in a widget that will be seen in the properties panel when the widget is added to a sheet. You then bind the component to the widget, so when the properties panel is accessed, in the app in which the widget is used, the widget responds to the user's input.

Adding available components to the properties panel

The components of a widget that appear in the properties panel in an app are added (and removed) in the properties panel builder in the Widget editor. When you create a new widget, the properties panel builder only contains an Appearance section, which itself contains the General subsection, used for assigning the title, subtitle, and footnote of a widget.

To edit the properties panel builder, click the edit icon @. When you are editing in the properties panel builder, the rest of the Widget editor functions are unavailable and are grayed.

This example shows the Available components panel for a widget that does not have any dimensions or measures:

To add a component to the properties panel builder, drag it from the Available components panel to the properties panel.

The appearance of the available components panel depends on what has already been added to the properties panel. If a component is grayed, it cannot currently be added to the properties panel. Also, the Items components are only shown if the Appearance section of the properties panel builder is selected.

Under Sections, there are these possible components:

  • Appearance. When you create a new widget, the properties panel builder only contains the Appearance section, which itself contains the General subsection, which is used for assigning the title, subtitle, and footnote of a widget.
  • Data. Add the Data section if you want the widget to contain dimensions and/or measures.
  • Sorting. If you have added the Data component, and there is more than one dimension or measure is present in the Data section in the properties panel builder, the Sorting component becomes available. Adding the sorting component allows the user of the widget to choose in what order the data is sorted.

The Items section contains the following components:

  • Header. This defines a subsection under Appearance, and is used to contain the user-interaction components in the widget. You can add multiple header sections.
    Note: You must add a header to the properties panel builder before you can add anything else from the Items section.

    The header component appears as Settings in the properties panel builder. After you have added it, you can change the label.

  • Input field. Allows the user to input data, including an expression, into the widget.
  • Checkbox. Adds a single checkbox to the widget.
  • Text area. Allows the user to input free text into the widget.
  • Dropdown list. Allows the user to select from a dropdown list, which must be configured in the properties panel builder.
  • Radio buttons. Presents the user with a set of one or more radio buttons, which must be configured in the properties panel builder.
  • Switch. Adds a graphical switch component to the widget to allow a choice between two alternatives.

To configure the components in the properties panel builder, while editing, click on the settings icon V of the component you want to configure.

Configuring the properties of widget components

When you have finished adding components, click the m icon at the bottom of the properties panel builder to close the available components panel. The rest of the Widget editor functions become available again.

To make a UI component interactive, you must insert a reference to it in the HTML editor or the component will not be functional when the widget is used in an app.

Activating components in a widget

If you added data components (dimensions and or measures), you must bind data to the widget.

Binding data to widgets.

Removing a component from the properties panel

Components that have been added to widgets through the properties panel builder are marked with a settings icon V. You can remove these components from the properties panel in the Widget editor.

Do the following:

  1. If you have not already done so, open the widget you want to edit.

  2. At the bottom of the properties panel builder, click the edit icon @.

  3. On the component you want to remove, click on the settings V icon.

    The component editor dialog appears. Click Ö to delete.

    If the component was grayed in the Available components panel, it will now be available again.

  4. Click the m icon at the bottom of the properties panel builder to close the available components panel, then click Save in the toolbar.

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

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?