Group

A group is a container that holds other components and controls their layout. Groups are essential for creating responsive layouts and for creating widgets composed of multiple components, such as gauges, heat maps, buttons, pop-ups, and callouts. Groups enable you to create symbols and to use repeaters to render iterative data.

There are two ways to create a group:

To automatically adjust the size of a vertical or horizontal group to fit its contents, set the group's Width and Height properties to Auto, as follows:

  1. Select the group.
  2. In the Property Inspector, expand the Position and Size section.
  3. To set Width to Auto, hover over the Width property until a blue dot appears, then click the blue dot and select Reset
  4. Repeat the preceding step for the Height property.

Configuring Responsive Layouts

To control how your applications are displayed on different devices and when users resize windows, use the following options to create responsive layouts.

Positioning Components

To configure how components are positioned in a group, set its Layout property. Options for positioning are as follows:

Wrapping options: By default, components do not wrap. When wrapping is disabled, components do not move if the width of a horizontal group is set below the width of a row, and likewise, components in vertical groups do not wrap if the height of the group is set below the height required to display a column. To enable wrapping, set the group's Wrap property.

Alignment options: To distribute the components in a group, set the corresponding alignment property: for a vertical layout, set Vert(ical) Layout and, for a horizontal layout, set Horiz(ontal) Alignment. Options are as follows:

Sizing Components

You can configure the contents of a group to resize according to the size of the group, as shown in the following video clip.

To achieve this effect, set the group's Layout to Absolute and set Scaling to Fit Ratio or Fit. Fit Ratio maintains the aspect ratio of children, and Fit does not. Set the height and Width property of each component in the group to Auto.

Another approach is to set the Width or Height property of the components to a percentage value. For example, if you set the width of a component to 50%, it will always be half the width of the group.

Stretching: To configure components to stretch to fit the parent container in the direction opposite to the layout enable stretching and set the components' corresponding width or height property to auto. For example, if you have a horizontal group containing buttons and you want the buttons to always be as tall as the containing group, set the group's Vert Alignment property to Stretch and set the Height property of all buttons to auto.

Proportional sizing (flex-grow and flex-shrink): To configure components to automatically resize in proportion to the other components contained by the group, set the Flexsize properties. For example, if a group contains two components and you want one to grow and shrink twice as much as the other, set the Flexsize properties of the smaller component to 1 and set the larger component to 2.