Groups

Groups are used to organize related fields in a configurator.  One or many groups can be on a configurator page.  

Group Properties

Name	A name which is referenced to on the left tree and rules. The name must be unique to the configurator.
Label	If you wish to specify a label in the UI which differs from the name, you may specify it. If label is left blank, the UI label will default to the name.
Show Label	Set to true to show the name or label in the configurator.  Set this to false to hide any name or label Groups with hidden labels are a useful way to gather up some layout elements to easily move them around in the UI, or to use Snap rules to hide or show them all at once.
Visible	Specifies whether this group and its contents are shown to the user by default or not.

Position

Container-based position properties appear for this element (and any interface element) when it is placed within a container, and help align it within the container.

For example, if you place this UI element within a container, the following properties will appear.  Take it out of the container, and place it on a page, and these properties will disappear.

Furthermore, the actual position properties themselves change, depending on that parent container's Item Layout.

• Not seeing any of the "Position" properties below for this UI element?
  Place this element into a container, and then return to this element's properties list. The "Position" accordion will now appear in the properties list.
  
  
• Not seeing the right kinds of "Position" properties for this UI element?
  Change the parent container's item layout to horizontal, vertical, or absolute.  Then return to this UI element. The position properties available for items within that layout (marked by green checkmarks below) will appear.

Property	Available when in a horizontal layout	Available when in a vertical layout	Available when in an absolute layout	Description
Relative Size	y	y	n	auto (default) sizes the item just large enough to be drawn on-screen and no more.  The item's size is independent: No size relation exists between this item and any other items in the container. x1-x6 sizes this item in relation to any other items in the container that also have an x1-x6 relative size. For example, if a "First Name" field has a size of x1, and a "Last Name" field also has a size of x1, then they will be the same size.  Change "Last Name" to x2 to make it twice the size of the "First Name" field. The item's size is dependent on other items in the container: change the xN size of another item, or change the items in the container, and this item's size changes slightly to continue to follow the size relations you've defined. When using relative sizes, try setting all items within the container to  the relative size of "x1" as a starting point, and then adjust the xN levels as necessary.  Mixing items with "auto" and "xN" settings is allowed, but may be difficult to manage.
Alignment	y	y	n	Controls how this item within a container is aligned in the cross axis of the container's layout. If the parent container's ItemLayout is set to horizontal, then this controls the vertical alignment of the items. If the parent container's ItemLayout is set to vertical, then this controls the horizontal alignment of the items. stretch the item will stretch across the entire cross axis, if possible.  If the item size cannot be adjusted, it will appear centered. start the item will appear at the start of the cross axis center the item will appear in the center of the cross axis end the item will appear at the end of the cross axis
Left Top Right Bottom Width Height	n	n	y	The distance between the edge of the parent container and this element.  By default, each is "auto".  Usually, you would set only 2 of these properties, leaving the rest to "auto", or you may distort this image or element.  For example, to align an item's upper-right corner to the upper-right corner of the parent container, set "Top" to 0px, and "Right" to 0px, leaving all other distances to "auto".
Opacity	n	n	y	The visibility of items or backgrounds behind this item.  Use any decimal number from 0 to 1. Set to 0 to make this item completely transparent.  Set to 1 to make the item completely opaque.
Order	y	y	y	Specifies the order in which this item is drawn in the container. Use a whole number, such as 0 or 132.  Default: 0.  Larger numbers are drawn later, and appear closer to the user. Numbers are relative to each other: an item with order "3" will be drawn before an item with order "4".  Order numbers do not need to be consecutive: the next item could have order "50". Order numbers do not need to be unique: if two items have the same order number, such as "0", they will be shown in the order they are defined in the design tree.
Use Zero Padding	y	y	y	By default, UI elements have some padding around them for legibility on all devices, and for ease of use on touch-enabled devices.  However, in some cases you may want specific UI elements to have no padding around them at all (to touch each other).  This can be useful to create a portion of your UI which needs a very high information density. For example, to create a grid of fields that appear like cells in a spreadsheet.