Panel

Introduction

Panel creates a container that consists of three parts - an optional Header, a Body and an optional Footer. You can add other elements (such as rich text or graphics) to any of these containers.

Properties

Property	Description
Show collapse button	When toggled on, the Panel shows a small arrow to fold or unfold the block panel’s body depending on the condition (see'"Body is expanded when' property).
Body is expanded when	This property becomes visible only when 'Shown collapse button' property is toggled on. By default, the expression contains the value 'true', which means that the body of the Panel is shown expanded by default. You can change the expression as you wish. In the end, the body will be expanded when the condition is true; when false, the body is collapsed by default.
Appearance: Style context	Bootstrap context color for the header and the outline of the panel.
Appearance: Show header	Toggle to show or hide the header container. This toggle is on by default. That is, the header is shown by default.
Appearance: Show footer	Toggle to show or hide the footer container. The footer is hidden by default.
Appearance: Smart margin	If you place a datagrid in the body of the panel and turn on Smart margin, the panel will remove additional whitespace around the datagrid.
Appearance: Body height	implicit, percentage, pixels: implicit will adjusts the body height depending on the height of the inserted elements (dynamic). A value other then 0 will force the height to the given number of pixels or the ratio in percentages. You can change this when a value is added.

Illustration

This illustration makes use of elements like Label, Heading and Repeater. Refer the linked pages if you would like to learn more about these widgets.

In the earlier page for the topic of Adaptive Columns, we had the use case for the Employee Management System (EMS) application of a company, in which the list of employees was shown in a screen. And when one of the row was clicked, the employee details were shown in an overlay. Now let's try to design the employees overview screen, where we we show the list of employees as Repeaters, and use panels for each card. The final result is shown below.

1. In our example, we have the Repeater added to the Template Editor. Now, click on the 'Panel' icon, drag and drop it on the canvas at the place where you would like to insert it. In our example, we want the panel inside the Repeater.

2. Add a Label in the Header that concatenates the First and Last name fields from the Data model and set the Heading type as 'h2'. Add Forms for the fields needed in the body.

3. Set the 'Show footer' toggle 'on' in the Properties pane. That will show the Footer container in the Panel. Add the necessary Buttons in the Footer. Save the Template Editor and Preview.