How to create a widget

Learn how to install and configure the widget component in this article.

After reading this article, you'll know how to:

  • Compile components in a widget

  • Enable component options within a widget

What are widgets? 

Widgets offer several advantages when configuring applications or web pages. By grouping multiple components together, they help reduce clutter and make the configuration process more intuitive.

Within a widget, you can specify which settings users can modify, allowing them to focus on the most relevant options instead of sifting through a lengthy list for each component.

An example of a widget making configuring a page much easier is inside the Login flow template. When you go to the Webuser Management page (based on the Back office page template) and open its component tree, notice that the Overview + Record view area is displayed as a single component (1). Actually, that is a locked page widget that unites a collection of certain page components.

By default, the creator of the Login flow template only allowed the users to change the limited number of options. However one can customize the widget a bit further using Unlock option (2) or by navigating to the component tree and unlocking the widget from there (3): 

Creating your widget

To create a new widget that your users can use and configure, drag the Empty widget component onto your canvas. Add components to your Empty widget by dragging them into its area. 

Screen-Recording-2024-12-24-at-1

To determine which component options within the widget can be configured, navigate to the options for the specific component. When you hover over an option, an icon (represented by three dots) will appear, indicating that it is customizable.

You can then select the Add option to 'Empty widget' . This will add the options to be configurable from the widget. You can select as many options as you like and of course options from different components. 

Similarly, you can remove an option from your widget: 

After you're done creating your widget by adding new components and enabling them in options, you can reconfigure their order. When everything is done and fine-tuned, you can lock your widget as described previously. 

Screen-Recording-2024-12-24-at-1 copy

Widgets greatly simplify the configuration of your pages, allowing you to specify which options your users can modify. More importantly, you can also control which options cannot be changed.