The Panel control is a container control which is used to group a few controls together. It can be used when a condition or validation is to be applied on more than one control. You can add those controls in a Panel and apply the conditions or validations on the Panel itself. You can also configure the layout of the controls within the panel based on the screen size of the user’s device.

Illustration of Panel with a Text control and a Numeric control.

Properties of Panel Control

UI properties

  • Label: Label is the text that is displayed above the container box and helps the user to understand what the control represents in the micropp.
  • Properties: These properties help you customize the Label by changing the text size, weight( Light, Normal, Bold, Extra Bold, X Extra Bold),alignment (Left, Center, Right, Justified) and color of the label.
  • Type: The Type field is automatically generated depending upon the type of control used. In this case, it is a “panel” type.
  • Unique Name: A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.
  • Hidden: The hidden option helps you to hide the control from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.
  • Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the field even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets always is not critical.
  • Hide Label: This option hides the label of the field from the view.

Properties

  • Theme: This allows you to choose the color of the Panel box. You can either enter a custom hex code value or use one from the available themes in the builder.
  • Background color: This allows you to set the color of the background of the panel. Similar to the Theme you can either enter a custom hex code value or use one from the available themes in the builder.
  • Column Configuration: This allows you to set the number of columns in the panel for different screen sizes. You can select a value for 1 to 5 and that will configure the number of columns.
  • Padding: It is the space between the Panel container and the controls inside it. You can set the padding for each direction in your Panel.

How to Use Panel Control?

Start with selecting the Panel Control from the Container section of the Controls Menu.

The Panel Control will then appear on the screen in the builder, you can then set all the above properties as per your requirements.

You can then add controls to the Panel by dragging them into the Panel area and dropping them as per the required layout.

Preview

1. Column at 320 - 640 screen size

2. Columns at 641 - 768 screen size

Did this answer your question?