Skip to main content Skip to complementary content

Widget editor

The Widget editor is used to create and edit simple app objects (widgets), which are then used to customize the behavior and appearance of your sheets and visualizations. Widgets are built using HTML and CSS editors, and a properties panel builder that works in a similar way to the properties panel in apps in Qlik Sense. App users access widgets in Qlik Sense from the custom objects section of the assets panel. When you update a widget in the Widget editor, it is updated immediately everywhere it is used.

The Widget editor is designed to create app enhancements quickly and easily. Therefore, the functionality of the widgets it can create is relatively simple: buttons that link sheets, simple customized KPI objects, and so on. If you want to create more complex app enhancements, use visualization extensions.

At the top of the Widget editor screen, the toolbar gives access to the actions menu, and other tools, that let you create new widgets, open widget libraries, save the widget you are editing, and so on.

You open a widget library to see a list of the widgets it contains. When you edit a widget, the HTML and CSS it consists of appears in the two corresponding code editors. Add to and edit the HTML and CSS directly in the on-screen editors to create the widget to your requirements.

You can associate the widget you are editing it with any app available to you to see a preview of how it will look or behave. The widget uses the data from the app, and a preview is displayed. The preview panel might display, "Incomplete visualization", in which case you complete the visualization by adding the dimensions and measures it requires.

The properties panel builder is used to add components to a widget. The components are then used for binding data to properties. You can also create your own components using the available items, such as Header, Input field, Checkbox and Dropdown list. These components will be found in the properties panel of the widget when it is added to a sheet. Components can be managed and their settings edited in the properties panel builder.

You can further customize a widget by inserting ready-made code snippets, icons, and references to widget properties directly in the HTML editor.

You can adjust your Widget editor workspace by resizing the panels and toggling areas on and off.

Widget editor overview

  1. Toolbar: As well as the Save button, the toolbar contains the actions menu menu icon, with commands to create a new widget or open a widget library, and the navigation menu compass icon, which provides quick access to the Dev Hub and the other Dev Hub tools individually. At the right-hand side is a drop-down list containing the apps you have access to. You can select an app to associate with the widget you are editing. The data in the app you select will be used to preview the widget.

  2. Widget list: Shows the widgets available in the widget library currently open. You can select a different library from the actions menu. The name of the widget library is at the top of the list, above the Search tool.

  3. HTML editor: Enter and edit HTML used in the widget you are editing. The HTML editor contains a tool for inserting ready-made icons, code snippets, and references to widget component properties.

  4. CSS editor: Enter and edit CSS rules used in the widget you are editing.

  5. Preview panel: This is used to show a preview of the widget as it would be seen when added to the app selected from the toolbar. The preview will display Incomplete visualization unless the correct components for the widget you are editing have been added in the properties panel builder. For example, a bar chart widget requires, at least, one dimension and one measure. The preview uses the data from the app you select.

  6. Properties panel builder: When you have selected an app and are editing a widget, the properties panel builder shows the components of the properties panel the widget contains. These components will be found in the widget when it is added to the sheet. You can edit the properties and appearance of the components in the properties panel builder.

  7. Available components: By clicking the edit Edit icon icon at the bottom of the properties panel builder, you display the Available components editor. It contains a list of properties panel elements you can add to the properties panel to further customize your widget. You can add highlighted components to the properties panel by dragging them from the available components. Grayed components are already found in the properties panel for that widget.

  8. Bottom bar: Contains a list of switches to toggle various elements of the Widget editor workspace on and off. open left panel icon toggles the widget library on and off, and open right panel icon toggles the properties panel on and off.