Skip to end of metadata
Go to start of metadata

  The Button widget enables the creation of rich, graphical buttons. Unlike traditional HTML form buttons, the Button widget can have a label that is different from its value. The Button widget can also be used to create toggle, menu, and split buttons, controls that are not available natively in HTML.

Key Features

A Button iBloc adds the following capabilities to an iRise simulation:

  • The ability to create four different button types (click the links below to see live examples):
  • Several unique events:
    • On button click - Fires when the button is clicked.
    • On toggle - Fires on toggle of a Toggle button (applies only to a Toggle button).
    • On menu selection - Fires when a menu item is selected (applies only to Split and Menu buttons).
    • On label change - Fires when the label of the button is changed.
    • On disabled change - Fires when the button state changes between disabled and enabled.

Special Properties

Property
Description
Expects/Produces
Type Determines the type of the button. Selection (Button, Toggle, Split or Menu)
Label Determines the text label on the button. Text string
Disabled Determines whether the widget is disabled in the browser by default. Boolean value
Menu Items This property only applies to menu and split buttons. Can either be linked to a field in a datasheet, or added manually. The items are displayed as dropdown menu under the button. Text strings
Update Label This property only applies to menu and split buttons. When checked, updates the button label with the value selected from the dropdown menu. Boolean value
Value Determines the current value of the button, depending on the button type.
Type= Button: No visual/behavioral affect on the button.
Type=Toggle: If the ‘value’ field is not null then the default state of the button is checked/pressed.
Type=Split: Sets ‘value’ as the currently selected item from the dropdown list
(Update the button label with selected item, if the ‘Update Label’ property is ‘true’)
Type=Menu: Sets ‘value’ as the currently selected item from the dropdown list
(Update the button label with selected item, if the ‘Update Label’ property is ‘true’)
Text string
Background Color Determines the background color of the button. If null, then default color will be applied. A hexadecimal RGB value
Hover Color Determines the color of the button when the user hover it. If null, then default color will be applied. A hexadecimal RGB value
Down Color Determines the button down background color. If null, then default color will be applied. A hexadecimal RGB value
Pressed Color This property usually applies to ‘Toggle’ button to differentiate the toggle state. Determines the background color after the button is pressed. If null, then the hover color will be applied. A hexadecimal RGB value
Background Image Determines the background image of the button. Since background colors have precedence over background images, it is advised to delete any background colors when providing a background image. This precedence applies to all other background image fields. An image selected from the user's file system
No Borders If checked, the button is rendered without borders. Boolean value
Hover Image (optional) Determines the background hover image of the button. An image selected from the user's file system
Down Image (optional) Determines the background mouse down image of the button. An image selected from the user's file system
Pressed Image (optional) Determines the background pressed state image of the button. An image selected from the user's file system
Icon (optional) Displays an icon image for the button. An image selected from the user's file system
Icon x-position Determines the x-position of the icon image in relation to the left edge of the button. Any positive integer. Even with left edge of widget if left blank.

Note: To associate a data field with one of the properties listed above, click the small square to the right of the property field. The Set Property dialog will allow you to select a data field currently flowing into the widget.

iBloc Details

Type: Widget
Latest Version: 1.0
Supported By: iRise
Sample: Button 1.0.idoc (v8.7)

iBloc Version Studio Versions Supported Browsers
1.0 8.7, 8.8 IE7, IE8, Firefox v3.5, Safari v4, Chrome v8

Usage Scenarios

Simple Button

  1. Drag a Button iBloc to the page.
  2. In the Properties panel, make sure "Button" is selected in the Type field.
  3. Use the Formatting Properties to change the font, font size and font color of the Button label.
  4. Use the Formatting Properties to change the background, hover and down color of the Button.
    • Alternatively, set a background image for each state of the Button. If using background images, make sure No Border is selected.
  5. If desired, select an icon image using the Icon property. If an icon is selected, enter a number in the Icon x-position field to specify the distance of the icon from the left edge of the Button.
  6. Connect an event (page action or navigation) to the Button in the same manner that you would for a native widget.

Variation 1 - Toggle Button

  1. Drag a Button iBloc to the page.
  2. In the Properties panel, change the Type attribute to Toggle.
  3. Format the Button to meet the needs of your simulation.
  4. Wrap the Button in a Form widget.
  5. Connect the Button to a Submit Form action.
  6. Change the trigger for the event to On toggle.
  7. Add a Clipboard widget to the canvas, and send data from the Button to the Clipboard. Call the field "Toggle Value".
  8. Important: Associate the new data field with the Button's Value attribute.
  9. Add a second Clipboard widget to the canvas and send the Toggle Value field from the Clipboard to the Button.
  10. In the Button's Properties panel, associate the Value attribute with the incoming Toggle Value field.
  11. Use the Toggle Button's output values (0 for off and 1 for on) to control an event such as the Decision shown in the image below.

Variation 2 - Split Button

  1. Drag a Button iBloc to the page.
  2. In the Properties panel, change the Type attribute to Split.
  3. Click the chooser button in the Menu Items field. The Editor box appears.
  4. For each Menu Item, click the +Add link and type the Menu Item label. When finished, click Done.
  5. If desired, select the Update Label checkbox to change the Button Label to the label of the selected Menu Item.
  6. Connect an event (page action or navigation) to the Split Button and change the trigger to On button click, On label change, or On menu selection, depending on the needs of your simulation.
  7. If desired, follow the instructions above for capturing the output value of the Split Button. Note that the output value of the Split Button corresponds to the Menu Item the reviewer selects.
    • Tip: Make sure the Form widget containing your Split Button is large enough to accommodate the expanding menu.

Support and Feedback

People-Powered Customer Service for iRise

Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.