Group Control

Group control is a layout control used to organize child controls placed inside it. Group controls are horizontally stacked beside each other inside a section control. When multiple group controls are placed inside section control, they equally take the available width. When you resize the page on desktop, based on the available width they can be shown in single row or multiple rows inside a section control. In mobile view, they will be vertically stacked inside a section control. By defining display condition or access permissions, group control can be shown or hidden based on the evaluation criteria. When a section control is created on the page, by default a group control is placed inside it.

Group control behavior or characteristics can be configurated through its settings flyout by selecting gear-icon from top-right corner. You can place the group anywhere inside the section among other groups using drag-drop icon. By selecting 3-dot icon, it shows Delete and MoveTo options to delete or move the group within current page or to other pages.

• Name: It is used to uniquely identify control inside the template.
• Label: It is used to show the title of the group. It can be localized by defined Languages and Locales inside innovator.
• Associated Type: Following options can be selected for the Associated Type. By default, Associated Type is set as Context Type.
  
  • Associated Type: Context Type
    When Context Type is selected, while adding control to a group of sections, properties from the template ItemType will be shown for binding with the control.
    
  • Associated Type: Reference Type
    When Reference Type is selected, a dropdown with a list of all item properties from the contextual ItemType will be shown. By selecting a value for the dropdown, you will be shown with properties of the selected ItemType inside the groups of the section for binding with controls.
  • Associated Type: Type
    When Type is selected, while adding a control to a group of sections, properties from the selected ItemType will be shown for binding with the control. In this case, the section will be shown in the UI only when the item of the selected ItemType is set as context item on the section.
  • Associated Type: Type (UI)
    When Type (UI) is selected, while a adding control to a group of sections, properties from the selected ItemType will be shown for binding with the control. In this case, the section will always be shown in the UI with empty values. Selected ItemType will only be used to show custom form with properties defined on the selected ItemType. You must write your own custom script to save these values to the server.
• Access: It allows you to define roles which can access the group. Roles (in the form group identities) can be at Show and Edit level. When group is hidden because you do not have defined role, properties used inside this group are not even fetched from server.
• Read Only: Based on the option selected for Read Only, group can become read-only even if user can edit the properties used inside the page with lock. You can select one of the options like ‘Yes’, ‘No’, ‘Expression’, or ‘Script’. Expression allows you to define a Boolean expression using properties from the current and previous pages (in case of multi-page application) to conditionally make the group read-only if expression is evaluated to true. Expression will be evaluated based on the cached property values on the client. Script allows you to write custom JavaScript code that should return Boolean value. If returned value is true, the whole group will be read-only.
• Display Condition: Based on the option selected for Display Condition, the group will be shown or hidden in the wizard at runtime. You can select one of the options like ‘Always Show’, ‘Always Hide’, ‘Expression’, or ‘Script’. Expression allows you to define a Boolean expression using properties from the current and previous pages (in case of multi-page application) to conditionally display the group if expression is evaluated to true. Expression will be evaluated based on the cached property values on the client. Script allows you to write custom JavaScript code that should return Boolean value. If returned value is false, whole group will be hidden.
• Width: It allows you to set the width for the group. Width can set as ‘Auto’ or ‘Explicit’. If it is set as ‘Auto’, the parent section will give equal widths for all the groups defined with the ‘Auto’ option from the available width. If it is set an ‘Explicit’, it gives you the option to set the width in percentage from the available width of the parent section. All the groups defined with ‘Explicit’ option under the same section will first be given requested widths from the available width, and remaining groups with ‘Auto’ option will get equal portions from the remaining width.
• Border: It allows you to show or hide the border and legend of the group. In case if you choose to show the border, you can select the border style using Color, Background, Type and Thickness settings. If any of the settings are changed, it shows Reset icon on the border, using which you can reset the settings.
• Font: It allows you to set the required font and size for showing the legend of the group. If any of the settings are changed, it shows Reset icon on the border, using which you can reset the settings.
• Margin: It allows you to set required top, right, bottom, left margins with respect to adjacent controls. If any of the settings are changed, it shows Reset icon on the border, using which you can reset the settings.
• Padding: It allows you to set the required top, right, bottom, left padding with respect to parent control. If any of the settings are changed, it shows Reset icon on the border, using which you can reset the settings.
• On Save: OnSave event allows you to write custom logic that will be executed when the data shown in the group is saved. It can be mainly used if the group shows the data related to an item that is different than the item shown on the page. Please refer to the Template Customization section for more details.