Skip to main content Skip to complementary content

Inserting ready-made HTML items into a widget

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.

The HTML editor toolbar contains an insert tool that inserts the HTML code for ready-made items or objects directly into your widget. Three types of HTML items can be inserted:

  • Snippets. These are short, complete sections of HTML code for Leonardo UI items , such as buttons, fields, checkboxes, and similar objects you can add to your widgets.
  • Icons. These are small graphical images that represent icons you see in Qlik Sense, such as clear selection, forward, search, and so on.
  • Property references. These are references to components in the properties panel builder. If you want to bind data to a widget, you insert a reference to an item in the properties panel builder.

Inserting a leonardo-ui code snippet or icon

Use the Insert tool to add a leonardo-ui item or icon to your widget.

Do the following:

  1. If you have not already done so, open the widget to which you want to add an HTML item/object, and create a preview using the components under Data in the properties panel builder (if required).

  2. In the HTML editor, insert the cursor at the point where you want to add the object and click Insert.

    The insert tool dialog opens at the showing the available snippets.

    The number of available objects you can choose from is shown in parentheses.

  3. Select the snippet or icon you want to insert. You will see a preview. Click Insert.

    The HTML code for that object is inserted into your widget, and displayed in the widget preview panel.

  4. Click Save.

    The changes to the widget will be available in your apps.

Supported leonardo-ui components for a description of the available leonardo-ui components and an example of how to use them. .