Using Panels

When designing your applications, you are always interested in making it simple and user friendly. You also have to keep in mind the different devices the applications would be typically used on like mobile phones, laptops and desktops, and tablets.

Studio provides the Panel control which is a container control that allows you to group a few controls together and arrange them suited to different screen sizes. You simply have to arrange your controls within the Panel containers and define their columnar arrangement suitable for the different user screens. Let us now look at an example to add a Panel to arrange controls for your application.

using panels

Using the Panel control

Let us now understand how to use the Panel control. We will consider an example to submit a leave request for the employees. We would have separate controls and validations for the Sick leave and Casual Leave. Add different controls in both the Panels as seen in the illustration below.

Now you can see that there are multiple controls that are placed within the two different Panels. Arrange these controls in a columnar layout using Columns settings under Panels. The layout is defined as per the different device sizes to make your navigation easy.
For both the panels, go to the Column configuration and set the number of columns for the different devices as required. You can also use the other properties to set the overall look and feel like background color, control padding, borders, and so on.

Panel - casualleavepanel properties

Panel - sickleavepanel properties

Also, add a Submit button to submit the request.

Adding Rules

Now that you have added the Panels, you want to use the panels depending upon the Leave Type that is selected. So go to Studio Console > Rules and add a New Rule.

Now here if you see the Rule is to check the selected value for Leave Type. If the value is “Sick Leave”, the controls in the Sick Leave Panel should be displayed, else it should be hidden and the controls in the Casual Leave Panel should be displayed.

Note how we have assigned what is to be shown and what is hidden. You need not specify the name of the controls individually. You simply can specify the name of the Panel to be shown and the panel to be hidden.

Once assigned, click to Save. Now the Rule is applied to the form. Remember that you cannot make use of the Panels in Validations, that can be used only in the Rules.

You can add a workflow to submit data to your respective sheet or to send an email to the respective manager or hr team using the appropriate tasks for the same. It is important to note that you cannot use the Panels within the workflows. However, you can use all the individual controls data to bind to the columns or variables.

In this example, we are using an email task to send an email to the concerned person using the data input from the respective controls on the form.

Now when you run the form you can see that the respective controls in the two panels would be displayed based on the leave type selected.

Thus Panels not only help you to arrange the controls in a systematic layout but also enable you to apply rules together to a selected set of controls and manage complex forms easily.