Skip to Content

Group

Vinyl 3.3 introduces the Group feature, which provides a container for controls you wish to group together visually on a page. The Group feature has additional configuration settings available so you can fine tune the appearance and display of the controls within the container. Beyond the configuration options available through the Group control itself, you can use Styles to further theme the look and feel.

Note

Group combines the former Zone and Control Set features from earlier versions of Vinyl.

Feature Overview

Groups provide many options for configuration, depending on the desired output.

groupexamplestacked.png

Group example using the Stacked Layout Type

Groups support the following configuration options:

  • Choose from two orientation Layout Types when configuring Groups: Side by Side or Stacked.
  • Ability to use relative sizing to scale and fill content to fit the full vertical and horizontal available space allotted on a page.
  • Option to configure Groups to collapse and expand when the title is clicked.
  • Accordion and Tab are two types of Controls that can have information reside inside them, and are useful for presenting logical groupings of information.
    • By default, Vinyl will present the first Control as expanded (or open), and the rest as collapsed (or closed).
    • Customize the image displayed on an Accordion control, which is used to indicate the open/closed state. If you don't choose an "off state" for the Accordion, Vinyl will use the ON state image and rotate it 90 degrees.
    • The default state (open or closed) can be set for Accordion controls.

How to Configure a Group

To use Groups, you essentially create a Group as a container control, and then specify individual controls you want to reside within the Group.

  1. Navigate to the page where you want to configure the Group.
  2. Go to the Action Drawer > Live Designer.
  3. Select the panel from the design view.
  4. Click the + Control button.
  5. Assign a Name for the Group.
  6. Select Group as the Control Type.

  7. Define Layout Type. For example: Side by Side.

    • Stacked: Places the controls on separate lines, stacking one on top of the other.
    • Side by Side: Places the controls next to each other, or side by side.

  8. Click Next.

  9. Review the information and click Finish.
  10. Click the All Controls tab.
  11. For each control you want within the Group, set the Parent value to the named Group value.

  12. For further configuration, click the open record icon for the Group control.

    • The Control Properties tab allows you to change the Control Name, change the Control Type, change the Layout Type, define if Group Borders are displayed, set the control as open by default (in versions 3.3.34390+) , and also set the control as Active or Inactive.
    • The Position & Width tab allows you to fine tune where on the panel the Group appears, how much Width it is allotted, and Alignment.
    • The Label tab allow you to set Label Visibility, override the Label value, and set the Label Type to Side by Side or Stacked to the corresponding control field.
    • The Edge Case tab allows you to enter Hover (Help) text that will appear when a user hovers over the field.

Compress and Expand Sizing Method

If you are using a Side by Side Layout Type for a Group, Vinyl will provide Sizing Method options to configure:

  • Compress: Floats the Group container to the left, and sizes the controls based on content. The Width value can be used to override the control width that Vinyl computes.
  • Expand: Sizes the controls contained in the Group to fill the available width. The Width setting can be used to fine tune the sizes Vinyl calculates. Note that the Control Types of Button, Icon, and Image will not resize to fill the width when using this setting.