Custom components

Custom components are small, self-contained elements of code (for example JavaScript and CSS) that can be used and re-used when building widgets. Custom components make it easier for the widget designer to include sophisticated UI items such as sliders, date-pickers, and tabs because no JavaScript programming is required: the components are ready-made. The custom components are added to widgets in a declarative way.

Note: This functionality is not available in Qlik Cloud Services and Qlik Sense Enterprise on Kubernetes.

The concept of custom components is similar to that of visualization extensions. Custom components allow developers to combine the power of the Qlik Sense APIs with the capabilities of the Web.

About custom components

Prerequisites

You do not need previous experience developing widgets or visualization extensions, but you should have at least a basic understanding of the following concepts:

  • HTML
  • JavaScript
  • CSS / LESS

Qlik Sense products

Everything described in this section of the help works for both Qlik Sense and Qlik Sense Desktop.

Code editors

You need a code editor for creating your custom components. You can use almost any basic code editors, such as: Notepad++, SublimeText or Aptana.

Disclaimers and limitations

  • In this release, custom components only work with widgets.

Custom component dependencies

In the BETA version of custom components, it was not possible to know which custom components were being used by widgets, and all custom components were loaded when a widget was loaded.

Since version 3.2, the platform governs and manages the dependencies between widgets and components they use. This dependency can either be defined when creating the widget or from the widget settings. Custom components used in widgets where no dependency has been defined will not render as expected.

Dev Hub: Custom component dependencies

Custom components created in BETA version

Custom components created and used in widgets before version 3.2 will not work in version 3.2 or later. To make them work you need to:

  • In the main script file, change name to componentName.
  • In the widget settings dialog, add the custom component as a dependency.
  • Nested components can no longer be used. If you have created nested components you must split them up into several custom components for them to work.

Additional resources

Visit GitHub if you want to explore custom components shared by other developers.

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?