Low-code designer > Set up interfaces > Widget types > Element layout / Panel with header

Panel with header

This widget helps you to group interface elements on a panel in a collapsed or expanded form.

To add the widget to a form, drag it from the side panel of the interface designer to the canvas or use the +Widget button. Read more in the Form templates article. Set up the widget in the window that opens.

Main tab

PWH 1

  • Title*. Name of the panel displayed on the form. You can set the title in two ways: by entering it manually or by clicking on the link button on the right side of the field and selecting a String type context variable. With the second option, the panel’s title is determined by the value of the variable.
  • Display style*Select the default or simple title display style.
  • Collapsible. With this option, you can make it possible to collapse the panel. You can also click on the link icon on the right side of the field and select a Yes/No switch type variable from the widget or app context. The value of this variable will determine when the panel becomes collapsible.
  • Expanded. This option allows you to make the panel expanded by default. You can also click on the link icon on the right side of the field and select a Yes/No switch type variable from the widget or app context. The value of this variable will determine when the panel is expanded.

Read more about context variables in the Context types article.

System tab

System settings are similar for all widgets. They allow you to set the widget’s visibility and access permissions, configure the widget’s behavior when the user hovers over it, etc. Read more about these settings in the System widget settings article.

To finish configuring the widget, click Save and then Publish on the interface designer toolbar.

Example

In this example, the Panel with header widget is used to display a bar chart showing sales. It is shown on a separate collapsible panel.

PwH2

Found a typo? Highlight the text, press ctrl + enter and notify us