Overview

A section is a row in the user interface - all components must be placed within a section. Sections can be subdivided to break up the screen. Each segment of the section contains a built-in container, into which subsequent controls can be placed. A section with a container inside will also be created if you drag-and-drop a UI control into a blank space in the page.

Properties

The properties of a section are outlined below.

Layout

The Layout property defines the segmentation of a row. There are six templates for segmenting a section, as seen below.

• Single Section - The controls placed within this section will always remain within a single column.
• 50-50 Sectioning - The controls placed within each of these sections will occupy 50% of the width in non-mobile devices and 100% in mobile devices. The second section will collapse below the first section on mobile.
• Lean-Right Section - The controls placed within the left section will occupy 2/3 of the width in non-mobile devices. The controls placed within the right section will occupy 1/3 of the width in non-mobile devices. Both sections will occupy full width in mobile devices. The second section will collapse below the first section on mobile.
• Lean-Left Section - The controls placed within the left section will occupy 1/3 of the width in non-mobile devices. The controls placed within the right section will occupy 2/3 of the width in non-mobile devices. Both sections will occupy full width in mobile devices. The second section will collapse below the first section on mobile.
• One-Third Sectioning - The controls placed within the left, middle, and right sections will occupy 1/3 of the width in non-mobile devices. Each section will occupy full width in mobile devices. The second section will collapse below the first section on mobile and the third will collapse below the second.
• One-Fourth Sectioning - The controls placed within the each section will occupy 1/4 of the width in non-mobile devices. Each section will occupy full width in mobile devices. The collapsed order in mobile devices will be left-to-right (i.e. left-most section at the top, right-most at the bottom).
• Custom - The controls placed within each container will occupy space according to the user's defined custom sizing of the container. A section is broken down into 12 equally-sized chunks and a given container can occupy any amount of these. For example, a single container can occupy 12 whole spaces, taking up the whole width. This would equate to the Single Section option. Alternatively, you can create 12 single-sized containers, which would each occupy 1/12 of the total width of the screen. Resizing any standard container will automatically set the section to Custom sizing, as well as adding additional containers or deleting existing ones. A new column can be added into a section by clicking on the plus button that appears when you select the section.

  
  

  When a new column is added to an empty section using the plus button, you will see a separator with three dots. The slider will be highlighted when you hover your mouse over it.

  
  

  Dragging this slider will allow you to adjust the sizing of the two containers that the slider sits between. The sizing will snap to any of the 12 dividers. Subsequently, a section can have up to 12 containers in a single row. Additionally, you can remove a container by selecting it and then clicking the minus button that appears.

  
  

Style

The Style property sets the default style of the section. The Default style will have no identifying style for that specific section. The well styles will share a uniform background and their size determines the amount of padding for these sections.

You can select Well styles such as Small, Medium or Large. The Panel option will make the container display like Card.

Users can customize the actual corresponding styles using Cascading Style Sheets (CSS) in the Stylesheet Designer.

If you select Panel style and enter a Header, you will be able to make the Section Collapsible.

Collapsible

When the Collapsible property is enabled, sections will become collapsible. When you Preview or Publish the application, you can click the header name of panel to collapse and expand the entire panel.

Default Collapsed

If the Default Collapsed is enabled, Collapsible panels will be collapsed by default during run-time.

Visible

The Visible property sets the conditions under which the section will be visible. This can be set to Always or Never.

If there are any Boolean Named Ranges (BNR) defined in your workbook (i.e. single named ranges that evaluate to TRUE or FALSE), then an additional option (By Value Of) will be available. This option allows you to configure a Boolean named range that determines whether or not this section is visible. This can either be calculated or input-based.