Add a Section Widget

About this task

Use the Section widget to group multiple widgets into one area. You can visually style a Section widget to distinguish it from other widgets and sections.

Procedure

  1. In the Canvas, open the Widgets tab.
  2. Double-click or drag and drop the Section widget onto the app canvas.
  3. In the Section Properties panel, enter a name for the widget in the Name field.
  4. Edit the background of the section to visually separate it (and its inner widgets) from other areas in the app.
    • Set the background to a solid fill color. Choose a color from the color picker or enter a hex color value.
    • Set the background to an image. Upload an image from your computer and choose how it occupies the space of the section widget.
  5. Choose how you want to align your widget in the app.
    • Align Left
    • Center
    • Align Right
  6. Optional: Add a visibility rule to the widget.
    Use visibility rules to control when a widget is visible to the app user. For example, you can create a condition that a widget should only appear after the app user fills in a field or submits a form.
    1. Select Visibility Rule to open the Set Visibility Rule dialog box.
    2. Select whether the visibility rule requires meeting all or any conditions.
    3. Select an app field or variable and an operator from the Field list. Enter the value required for the widget to be visible.
    4. Select Add Condition to add another condition.
    5. Select Save.
  7. Move to the Format tab to customize the widget's appearance.
  8. In the Canvas, drag and drop other widgets into the Section widget.
    Note: You cannot nest a section widget within another section widget.
  9. Select Save in the SOTI Snap banner to apply your changes.
    Save app button

Results

Tip: Select Preview to see how the widget appears in your app.