Buttons

Buttons are elements which your user clicks to perform an activity, such as resetting a form or applying a group of settings across many fields.  The button's activity is written in Snap language.

Overview

In a configurator, you can have four types of buttons that appear within the configurator UI:

1. A Button (which shows a single clickable choice)
2. A Dropdown Button  (that shows a drop-down list of clickable choices)
3. A collection of buttons shown in a Menu Toolbar (which aligns multiple buttons or dropdown buttons into a menu of clickable choices).
   
   
   
4. You can also create a Popup Button:   Rather than offering the simple choices of a drop-down, the popup allows you to create a small mini-UI in the pop-up area. This can contain fields, text, or other elements. Just like in other parts of your UI, Snap rules can provide the logic to show or hide elements within the Popup.
    
   
   

Buttons vs. Actions: what's the difference?

Actions and Buttons are functionally the same. They both run code when a user clicks them. We suggest you use buttons over actions when you design your configurator. They offer more styling options and are easier to move around as your UI design changes in the future.

• Actions can only appear in the action bar, which is found only in some configurator layouts.
• Buttons, however, can appear just about anywhere in any UI.

• To create...
  • a single button, click the "+" symbol on any layout component in the configurator tree and select "Button".
  • a dropdown button, first click the "+" symbol on any layout and select "Dropdown Button".  Then either create or drag buttons into the dropdown button.
  • a toolbar of buttons, first click the "+" symbol on any layout component and select "Toolbar".  Then either create or drag one or more buttons within the Toolbar.
  • a popup button, first click the "+" symbol on any layout component and select "PopUp".  Then either create or drag one or more UI elements into the Popup.
• To re-order the contents inside a dropdown, toolbar, or popup, 
  just drag those elements up or down in the configurator tree.
• To move a button out of a dropdown or toolbar,
  drag it up or down in the configurator tree so it is no longer contained within that dropdown or toolbar.
• to program the rule executed when the button is clicked,
  select the button field in the configurator tree, and click on the '+' button. This will add a rule node as a child of the button in the tree. You can rename this rule like other rules by double-clicking it in the node tree. When the rule is selected, write Snap code in this rule as necessary.  Note that if the code in this button rule changes the value in any field, the Rule Cycle will be triggered, just as if your users edited that field themselves.
  

Button Properties

Property	Description
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 this to true to show a label.  Set it to false to hide the label, making your button a simple icon with no text shown.
Visible	Specifies whether this button is shown to the user by default or not. This property, like any other, can be changed in the visibility rules.
Enabled	True to allow user to click the button, false to disable the button: it will appear with a muted color, and cannot be clicked.
Full Width	(Shown when a button is not within a Toolbar.) Set this to true to make the button as wide as possible, or leave it as false to make the button as narrow as possible while still displaying the Name/Label/Icon.
Relative Width	(Shown when a button is within a Toolbar.)  Leave this set to "auto" to size the button automatically as narrow as possible while still displaying the Name/Label/Icon, or choose one of the width multipliers to make this button wider than the other buttons in the same Toolbar.  For example, if you want this button to be twice as wide as the other buttons, set it's relative width to "2x" and the width of the other buttons to "1x".
Button Style	Select a style to apply a special color to the button.  You can either call more attention to the button, or to make it less obtrusive.  You can use any of the colors you've defined as theme colors.
Icon Style	None to show no image within the button. Icon to select one of the many icons included in our default icon set.  You can then select the size of the icon. Media to upload your own custom image as an icon.  You can then set the width and height of that custom image.

Position

Container-based position properties appear for this interface element when it is placed within a container, giving you more control over it's position. If you place this UI element within a container, the following properties will appear. Remove it from the container, 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 in a horizontal layout	Available in a vertical layout	Available in an absolute layout	Available in an absolute layout
Relative Size				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				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				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				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				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				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.