Panels
- 01 Aug 2024
- 15 Minutes to read
- Print
- PDF
Panels
- Updated on 01 Aug 2024
- 15 Minutes to read
- Print
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
A panel is a container that allows the Form Designer to group the form controls. Design your forms with panels to provide the logical visual grouping of different form controls.
Panel Types
There are following types of panels available:
A sample screenshot is shown below:
Figure: Panels
Accordion
The Accordion panel displays the form controls on a form in the expand/collapse view. You can simply drag and drop the Accordion panel on the form builder page.
It is useful if you want to switch between the display of the associated controls. Click on 
icon to hide or display the associated controls in the Accordion panel.
Let's explore the following use-case.
Use Case User Persona: Application Designer | Solution |
| The Application Designer Sam wants to create an interface for their application that allows an Analyst to fill in the general details of an Incident such as Impact type, Priority level, incident description and, if it is active or not while logging a new Incident. These details should appear under the same block and should be in expand /collapse view. | To achieve this, he can drag and drop the Accordion panel and name it as General Details with form controls Priority, Impact as drag and drop control, Description as Text Box and Active as Radio Button. All of the required form controls are grouped together under General Details. |
Configure Accordion
To configure Accordion, perform the following steps:
- Navigate to Design Studio > Form Designer > Design Form > Controls > Panels > Accordion.
- Drag and drop the Accordion panel as per your panel requirement. Click on
Settings icon to configure the properties of the Accordion panel. A sample screenshot is shown below:
Figure: Accordion Panel - Properties
After placing the panel on the form builder page, you can configure its properties using the gear icon.
To know more about the fields that are available under the Properties section, see Field Description given below:
| Field Name | Description |
|---|---|
| Title | Specify the name of the panel which should appear on the Accordion panel. This name identifies the Accordion panel in a form. |
| Icon | Select the icon which should appear along with the displayed Title. Click on  icon.The Icons List pop-up page is displayed.  Figure - Icons List pop-up pageSelect the required icon from the list and click Done. |
| Icon Position | Select the position of the selected icon. Available options are as follows:
|
 | Click on the  icon to add one more Accordion panel on the Form Builder page. |
An asterisk (*) represent Mandatory Field
Appearance
This section allows to customize the visual presentation of the Accordion panel based on their preferences.
To know more about the fields that are available under the Appearance section, see Field Description given below. Sample screenshots are shown below:
Figure: Accordion - Appearance
To know more about the fields that are available under the Appearance section, see Field Description given below.
| Field Name | Description |
|---|---|
| Text | |
| Font Type | Select the type of the font from the drop-down list of available options of font type. |
| Font Color | Select the type of the font color from the color widget from the provided set of color options. Click  option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget |
| Font Size | Select the size of the font from the drop-down list of available options of font type using upwards or downwards arrows. A sample screenshot is shown below: Figure: Font Size Drop-downYou can also use a horizontal slider to increase or decrease the font size. A sample screenshot is shown below:  Figure: Font Size Slider |
| Font Style | Select the required font style. Available options are as follows:
|
Fieldset
The Fieldset panel displays the form controls on a form with visual indicators (+/-) to represent the expand and collapse. You can simply drag and drop the Fieldset panel on the form builder page.
It is useful if you want display the set of fields with common purpose. Click on 
icon to hide and click on 
icon to display the associated controls in the Fieldset panel.
Configure Fieldset
To configure Fieldset, perform the following steps:
- Navigate to Design Studio > Form Designer > Design Form > Controls > Panels > Fieldset.
- Drag and drop the Fieldset panel as per your panel requirement. Click onSettings icon to configure the properties of the Fieldset panel. A sample screenshot is shown below:
Figure: Fieldset Panel - Properties
To know more about the fields that are available under the Properties section, see Field Description given below.
| Field Name | Description |
|---|---|
| General | |
| Title | Specify the name of the panel which should appear on the Fieldset panel. This name identifies the Fieldset panel in the form. |
| Toggleable | Select the required option to make the Fieldset panel toggleable or not. Available options are as follows:
|
| Click on the icon to add one more Accordion panel on the Form Builder page. |
Figure: Fieldset with toggle button
An asterisk (*) represent Mandatory Field
Panel
The Panel panel is a distinct container to display the information with a specific purpose. You can simply drag and drop the Panel panel on the form builder page.
It is useful if you want display the information such as notification, information, and so on.
Configure Panel
To configure panel, perform the following steps:
- Navigate to Design Studio > Form Designer > Design Form > Controls > Panels > Panel.
- Drag and drop the Panel panel as per your panel requirement. Click onSettings icon to configure the properties of the Panel panel. A sample screenshot is shown below:
Figure: Panel
Properties
To know more about the fields that are available under the Properties section, see Field Description given below:
Figure: Panel - Properties
To know more about the fields that are available under the Properties section, see Field Description given below.
| Field Name | Description |
|---|---|
| Label | Specify the name of the panel which should appear on the panel. This name identifies the panel in the form. |
| Hide Header | Specify the name of the panel which should appear on the Fieldset panel. This name identifies the Fieldset panel in the Form Enable the switch to hide the header area of the panel. It provides the flexibility to the consumer to showcase or remove the panel header as per requirement. |
An asterisk (*) represent Mandatory Field
Appearance
This section allows to customize the visual presentation of the Panel panel based on their preferences. To know more about the fields that are available under the Appearance section, see Field Description given below.
Figure: Appearance - Header
Figure: Appearance - Container
To know more about the fields that are available under the Appearance section, see Field Description of Splitter > Appearance tab under Layouts section.
Security
This section allows to configure the access controls and implement the required security measures for the panel. You can provide edit or view access based on criteria and personas. A sample screenshot is shown below:
Figure: Security
To know more about the fields that are available under Security tab, refer to Form Security.
Tab
The tab panel functions in tab mode. Clicking on a tab displays the corresponding panel. You can add multiple tabs as per your requirement. You can simply drag and drop the Tab panel on the form builder page.
It is useful if you want to display a complicated UI design in a simpler way. You have the option to add multiple tabs. Click on 
icon to add the next tab in the tab panel.
Figure: Tab Panel
Let's explore the following use-case.
Use Case User Persona: Application Designer | Solution |
| The Application DesignerSam wants to create an interface for their application that allows one tab to display the information about the graphical view of the report and another tab to display the information about the tabular view of the report. | To achieve this, he can drop and drag the Tab panel and name it as Graphical View. He can add another next tab using plus symbol and name it as Tabular View. Once the tabs are added the relevant information can be added in individual tabs. |
Configure Tab
To configure tab, perform the following steps:
- Navigate to Design Studio > Form Designer > Design Form > Controls > Panels > Tab.
- Drag and drop the Tab panel as per your panel requirement. Click onSettings icon to configure the properties of the Tab panel. A sample screenshot is shown below:
Figure: Tab - Properties
Field Description
To know more about the fields that are available under the Properties section, see Field Description given below:
| Field Name | Description |
|---|---|
| Title | Specify the name of the Tab which should appear on the Tab panel. This name identifies the tab panel in the respective form. |
| Icon | Select the icon which should appear along with the displayed Title. Click on  .The Icons List pop-up page is displayed. Figure - Icons List pop-up pageSelect the required icon from the list and click Done. |
| Icon Position | Select the position of the selected icon. Available options are as follows:
|
| Click on the icon to add one more Tab panel on the Form Builder page. |
| Sort Order | Select the numeric number to sort the tabs in a specified order as per the requirement. It will be helpful to provide an organized and predefined structure to navigate through tabs on the form. For Example: If you specify the Sort Order for a Tab panel named Tab 1 and Tab 2 as 2 and 1 respectively. Then the Tab 2 will get displayed before Tab 1 as per the specified order under Sort Order. |
An asterisk (*) represent Mandatory Field
Appearance
This section allows to customize the visual presentation of the Tab panel based on their preferences. To know more about the fields that are available under the Appearance section, see Field Description given below.
Figure: Tab - Appearance
Figure: Tab - Appearance - Text
Figure: Tab - Appearance - Background
To know more about the fields that are available under the Appearance section, see Field Description of Splitter > Appearance tab under Layouts section.
Card
The Card panel allows you to display the information as a chip on a form. You can add multiple cards as per your requirement. You can simply drag and drop the Card panel on the form builder page.
It is useful to display the large amount of information on various component in quicker and interactive way.
Figure: Card Panel
Let's explore the following use-case.
Use Case User Persona: Application Designer | Solution |
| The Application Designer Sam wants to create an interface for a form named Manage Incidents (with Incident Details information) which provide incident details. He wants to include a section on Manage Incidents which displays the user's information such as User Name, Employee ID, Email ID, Mobile Number and the Location of the user, in a clear and organized manner in a side by side two column format. | To achieve this, he can drop and drag the Card panel and mention the required information as a single card. As the information is logically interrelated to the user, select the Card Type as Horizontal Two Column. Select the Field as Requestor, Employee ID, Email Id, Mobile No and Location. The Table field gets populated with the respective table names. If the Field is selected as Location then the Table field gets populated with locations, as Location field belongs to locations table. |
Configure Card
To configure Card, perform the following steps:
- Navigate to Design Studio > Form Designer > Design Form > Controls > Panels > Card.
- Drag and drop the Card panel as per your panel requirement. Click onSettings icon to configure the properties of the Card panel. A sample screenshot is shown below:
Figure: Card - Properties
Field Description
To know more about the fields that are available under the Properties section, see Field Description given below:
| Field Name | Description |
|---|---|
| Card Type | Select the type of the card from the drop-down list. Available options are as follows:
|
| Card Title | Specify the unique Card Title to identify the purpose or the card. |
| Label Type | Select the type of the label. Available options are as follows:
|
| Field | Select the required field to be displayed on the card. The Field displays all of the fields available in the respective form. For Example: If a card is getting created for a form named Manage Incidents which fields such as Requestor, Resolution Code, Priority and so on, then all of these fields will be available as a list in the Field drop-down. |
| Table | Displays the name of the table to which the selected field from the Field belongs to. For Example: If you select the Field as Requestor then Table value will be Users, as the Requestor field belongs to Users table. |
 | Click it to add new row in a card to add additional fields. |
| Include Label | Select it to display the label mentioned in Label on the card. |
Appearance
This section allows to customize the visual presentation of the Card panel based on their preferences. To know more about the fields that are available under the Appearance section, see Field Description given below. A sample screenshot is shown below:
Figure: Card - Appearance
Field Description
To know more about the fields that are available under the Appearance section, see Field Description given below:
| Field Name | Description |
|---|---|
| Container Width | To know more about the fields that are available under Appearance section, see Field Description of Splitter > Appearance tab under Layouts section. |
| Font Text | To know more about fields that are available under the Appearance section, see Field Description of Splitter > Appearance tab under Layouts section. |
| Border | To know more about fields that are available under Appearance section, see Field Description of Splitter > Appearance tab under Layouts section. |
| Background | |
| Header Background Color | Select the type of the header background color from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below:Figure: Color Widget |
| Body Background Color | Select the type of the body background color from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below:Figure: Color Widget |
Popover Linking
This section contains linking properties such as Table Column and Popover Form of the Card panel. To know more about the fields that are available under the Popover Linking section, see Field Description given below. A sample screenshot is shown below:
Figure: Popover Linking
Field Description
To know more about the fields that are available under the Appearance section, see Field Description given below:
| Field Name | Description |
|---|---|
| Table Column | Select the table column value which should get displayed on the card. |
| Popover Form | Select the popover form which should get display on the click of the selected table column. |
Multivalued Panel
The Multivalued panel allows you to capture the multiple instances of a group of logically related information in a single panel. You can simply drag and drop the Multivalued panel on the form builder page.
It is useful to organize the related fields in a structured way.
Figure: Multivalued Panel
Let's explore the following use-case.
Use Case User Persona: Application Designer | Solution |
| The Application Designer Sam wants to create an interface for a form named Manage Incidents (with Incident Details information) which provide incident details. He wants to include a section on Manage Incidents which collects Root Cause Analysis details such as RCA Type, Category, RCA Attachment. | To achieve this, he can drop and drag the Multivalued panel and mention the required information. He can drag and drop the form controls for the fields such as RCA Type, Category and RCA Attachment. Provide Card Title as Card. He can make the entered data as editable or deletable using Is Editable? and Is Deletable? options. |
Configure Multivalued
Navigate to Design Studio > Form Designer > Design Form > Controls > Panel > Multivalued. Drag and drop the Multivalued panel as per your panel design requirement. You can simply drag and drop the panel on the form builder page. Click on 
Settings icon to configure Properties tab of the Multivalued panel. A sample screenshot is shown below:
Figure: Multivalued - Properties
Field Description
To know more about the fields that are available under the Properties section, see Field Description given below:
| Field Name | Description |
|---|---|
| Title | Specify the unique title of the multivalued panel which identifies the panel. |
| Sub Title | Specify the sub title to provide the additional information in text to the Title. |
| Is Editable? | Select it if the entered fields on the panel are user input fields. If not selected, the fields on the panel are view purpose and are read-only. For Example: For a multivalued panel named Root Cause Analysis, the Type field should provide the options to select the type of RCA to the user. So, the Is Editable should be selected for Type field. |
| Is Deletable | Select it if the entered fields on the panel can be deleted by the user. If not selected, the fields on the panel cannot be deleted by the user. |
| Add Label | Specify the label or text which identifies the button that allows user to add more instance or row of similar information provided in panel. For Example: If you want to display the action button as Add to add more rows in the panel, specify the Add Label value as Add. |
| Clear Label | Specify the label or text which identifies the button that allows user to delete any instance or row of similar information provided in panel. For Example: If you want to display the action button as Cancel to add more rows in the panel, specify the Clear Label value as Delete. |
Appearance
This section allows to customize the visual presentation of the Multivalued panel based on their preferences. To know more about the fields that are available under the Appearance section, see Field Description given below. A sample screenshot is shown below:
Figure: Multivalued - Appearance
Field Description
To know more about the fields that are available under the Appearance section, see Field Description given below:
| Field Name | Description |
|---|---|
| Header | To know more about the fields that are available under Appearance > Header (Background and Label) section, see Field Description of Splitter > Appearance tab under Layouts section. |
| Container | To know more about the fields that are available under Appearance > Container (Background) section, see Field Description of Splitter > Appearance tab under Layouts section. |
| Buttons | |
| Add Button | Select the background color of the button, font color of the text to be displayed on the button, and the icon to be displayed on button. A sample screenshot is shown below: Figure: Add Button |
| Background Color | Specify the background color of the Add button. |
| Font Color | Specify the font color of the text to get displayed on the button add instances. |
| Upload Icon | Click  to select the required icon from the displayed pop-up page of icons. The selected icon gets displayed with Add button. |
| Clear Button | Select the background color of the button, font color of the text to be displayed on the button, and the icon to be displayed on the button. A sample screenshot is shown below: Figure: Clear Button |
| Background Color | Specify the background color of the Clear button. |
| Font Color | Specify the font color of the text to get displayed on the button add instances. |
| Upload Icon | Click to select the required icon from the displayed pop-up page of icons. The selected icon gets displayed with Clear button. |
Was this article helpful?