Place Controls in Panels, Sections, or Tabs

You can add panels, sections, and tabs to your web form and use them to group multiple controls under a single control.

To configure a panel, section, or tab control:

Expand the Advanced Palette.
Drag and drop a Panel, Section, or Tab control onto the canvas.
- A text Drop Elements to this panel! indicates that you can drop controls into the panel.
- A text Drop Elements to this section! indicates that you can drop controls into the section.
- A text Drop Elements to this tab! indicates that you can drop controls into the tab. By default, the tab control displays one tab (Tab1). Click Add tab to insert additional tabs into the control.

Select the control, and then edit its properties on the General tab in the Properties pane.

Field	Description
Name	An internal identifier that you will use to identify the control.
Label	The title of the panel, section, or tab that the user will see in the form.
Description	For a panel control, provides additional information or instructions for the user.
Type	For a section control, sets the style and format in which the section label displays.
Hide	Set this property to hide the control.
Read Only	Set this property to make the (panel, section, or tab) control read-only. Note that when this property is set, all the controls inside a panel, section, or tab control become read-only (irrespective of the individual property of each of the controls). The user can view but is not allowed to edit the control.
Lazy Loading	For a section control, implements lazy loading for the controls inside it. The lazy loading controls are collapsed by default.
Expanded	For a section control, specifies if the section control is expanded when the form loads. By default, this field is checked.
Event	Specifies events that trigger actions and conditions. You can customize the control’s behavior by configuring events. See Add Dynamic Behavior to Forms.

On the Styling tab, edit the control's styling properties.
Drag and drop individual controls from the Basic Palette or the Advanced Palette into the panel, section, or tab control.

See Position Controls on Forms.
Configure general and styling properties for the controls inside your panel, section, or tab control.

See Configure Basic Controls and Configure Advanced Controls.

Note:
If you delete the panel, section, or tab control, all the controls grouped under it get deleted.
Click Preview to try out using the control.

Note:
If the data in a field within a section or tab is invalid, a validation error is displayed for the field and the entire section or tab is marked invalid.

Use a theme to format the title and description for a panel in your form.

To select a theme for a panel:

From the Advanced Palette, drag and drop the Panel control onto the canvas.
Select the Panel control on the canvas.
In the Properties pane, select the General tab.
- In the Label field, enter a title for the panel. The user will see this title on the form.
- In the Description field, add information or instructions for the user.
In the Properties pane, select the Styling tab.
In the Theme field, select Standard.
The Standard theme automatically:
- Increases the font size of the label to 24 pixels (font-size: 24px)
- Applies the bold style to the label (font-weight: bold)
Selecting a theme overrides the value defined in the Label Size field on the Styling tab. If you want to use the Label Size field to format the panel label, then make sure the Theme field is set to None.

You can use the Label Color field to specify a color for the label and the descriptive text in the panel.

Use a theme to indent the sections in your form.

To indent one or more sections in a form: