Buttons & Hyperlinks

Overview

Buttons widgets operate the same way as a standard HTML button would. These clickable elements can be used to return control to your back end program or even initiate a client-side scripts. Hyperlinks also function similarly to buttons.

Validation (Rich UI Only)

bypass validation - Setting this property, you can allow buttons to not trigger validation and clear the data entered. Most often this is used for an exit or cancel button. When bypass validation is set to 'true', all validation is bypassed and data from the screen is not sent to the application.

Field Binding Dialog (Rich UI Only)

Please visit the Field Binding page.

Button Properties

value - This property is used to set the value to display on the button. This property may be bound to an RPG field. (Rich UI Only)

response - The response property sets a response indicator to return to the program when the button widget is clicked. (Rich UI Only)

shortcut key - This property specifies a keyboard shortcut to trigger the button click and submit a response to the server. If the 'shortcut key' property is used this will also allow the program to receive a key code in INFDS data structure. (Rich UI Only)

onclick - The onclick property is used when you wish to initiate a client-side script when the button widget is clicked.

Note: By default, a button's "onclick" event will take precedence over the "response" property. If both are defined, the "onclick" event will fire and control will not return to the server.

Alternative Button Widget Types

Gradient Buttons

Gradient buttons are the same as standard buttons with the exception they are constructed with images to provide effects like rounded corners and shadows. These can be used in browsers that don't support these types of effects through CSS.

button style - This property identifies the look and feel of the button. This property can be bound to an RPG field to change the style of the button. (Rich UI Only)

Gradient button example:

Graphic Buttons

Graphic buttons use background images to display an image on the button, but function the same as a standard or gradient button.

image source - This property specifies the path to the image you want to display on the graphic button. This property can be bound to an RPG field to set the location of the image. (Rich UI Only)

Graphic button example:

Using the image selector you can change the graphic displayed on the button:

This opens the image source selector where you can change the image on the button:

Once the new image is selected the button should now display the new image:

CSS Buttons

CSS Buttons are hyperlinks which use CSS styling for look of the button. All of the CSS button specific properties can be bound to an RPG field or indicator. (Rich UI Only)

theme -This property specifies the preset theme to use for the button. The theme is associated with specific CSS rules. Custom themes can be applied through your own custom CSS code.

icon position -The icon position property sets whether the icon displays on the left or right side of the CSS button text. (This must be set to use the icon property.)

icon - This property determines what icon will show up in the position specified from the icon position property. (Must have the icon position set in order to display the icon.)

small button -The small button property provides a smaller more compact button to use in smaller spaces such as toolbars or mobile applications.

straight edge -This property determines which parts of the button will have a straight edge instead of a rounded corner.

hyperlink reference -This specifies an href attribute for the hyperlink. This can be used as an alternative to the response property or the onclick event property.

target - The target property specifies where to open the hyperlink reference. One way to use the target property is to open a new URL in a pop-up window.

The following targets can be specified:

_parent - Opens the hyperlink reference in the parent frame.

_blank - Opens the hyperlink reference in a new window or tab.

_top - Opens the hyperlink reference in the full body of the window.

_self - Opens the hyperlink reference in the same frame as it was clicked (this is the default).

CSS button examples:

Mini button:

CSS button w/Icon:

Regular CSS button: