axButton

Description

axButton allows a push button to be inserted into the 5250 screen.

Usability

Context

Supported

Input screen fields

No

Output screen fields

Yes

Input subfile fields

No

Output subfile fields

No

New screen elements

Yes

Properties

Name

Description and Comments

JavaScript

Shipped default

buttonType

The type of Material Design button to apply. The values are text, raised, unelevated, outlined, and dense.

For Material Design theme only.

No

unelevated

caption

Specifies the text that is to appear on the button.

Yes. Must return a string.

None

enabled

Indicates whether this element is enabled.

TS2 only.

Yes. Must return a Boolean.

True

hidden

Indicates whether this button is hidden or visible.

Yes. Must return a Boolean.

False

icon

The name of icon to display on the button.

For Material Design theme only.

Yes. Must return a string.

None

onClick

Optional. JavaScript code to be executed when the user clicks on the button.

Yes

SENDKEY(ENV.defaultKey);

onFocus

Optional. JavaScript code to be executed when the element receives the focus.

Yes

None

onBlur

Optional. JavaScript code to be executed when the element lost the focus.

Yes

None

style

Additional style properties that should be applied to the button.

Yes. Must return a valid style object.

None

sizeToField

Indicates whether this button should be sized to fill its containing field or automatically sized to match its content.

Yes

True

tooltip

The tool tip (or hint) that should appear when the user hovers the mouse over this button.

Yes. Must return a string.

None

Notes, Comments and Warnings

In Application, appStylesTheme = JQueryUI

When JQueryUI is selected from Application->Styling->appStylesTheme property, the display will change according to the theme that was set in the Application’s jqueryTheme property.

Basic display:

Image

When JQueryUI theme is selected:

Image

Hovering on the button will also change its styles.

Image

In Application, appStylesTheme = Material Design

When Material Design is selected from Application->Styling->appStylesTheme property, the display will change according to the theme that was set in the Application’s mdTheme property.

When buttonType property is set to unelevated (default):

Image

When buttonType property is set to text:

Image       when hovered:   Image

When buttonType property is set to raised:

Image       when hovered:   Image

When buttonType property is set to outlined:

Image       when hovered:   Image

When buttonType property is set to dense:

Image       when hovered:   Image

When icon property is set to save:

Image

Examples

(1). On the System i Main Menu, with the command input field named Commandline, if this push button is added to the display:

Image

 

with this onClick code:

FIELDS("CommandLine").setValue("WRKOUTQ QPRINT");
SENDKEY("Enter");

then clicking on the button will cause the output queue QPRINT to be displayed.

(2). On the System i Main Menu turn the function key strings Fn=xxxx into buttons:

Click on F3=Exit to select it.

Image

In the extensions list, select Push Button and F3=Exit should turn into a button with a caption of Exit:

Image

Size the button as required and repeat for other desired function keys:

Image

See Also

Using Screen Customization to Add Value

Using Scripting in Properties to Add Value

Push Buttons in Tutorial 3 - Advanced Screen Enhancement

Using Multilingual Captions on Buttons (and other places) in Tutorial 3 - Advanced Screen Enhancement

Using alert()

 

Administrators

Legal Mentions

aXes is brought to you by:

LANSA

Serving the IBM i community for 30 years.