axQuickPick

Description

The Quick Pick extension is used to insert a menu on the screen, in elements or subfiles to allow the user to quickly select the option required. This extension is like a drop down except that the submenu items show in a panel when the user hovers rather than a list after clicking the arrow down.

Usability

Properties

Notes, Comments and Warnings

axQuickPick may be used in two different ways:

The first is when the image property is used with a new screen element or with an existing 5250 screen element whose default visualization has been unchecked/removed.

axQuickPick displays an image on the 5250 screen, like this example:

As the user mouses over the image a quick pick menu appears, like this example:

As the user mouses over the menu items the font weight changes:

When the user clicks on a menu item an associated script is executed.

The second is when the image property is not used - typically only with existing 5250 elements whose default visualization has not been unchecked/removed:

axQuickPick does not display an image. Instead it underlines the associated 5250 screen element's default visualization as the mouse passes over it, presenting the quick pick menu near the visualized field.

This is an example of a quick pick menu that has been associated with the "Sel" (selection) column in a subfile. The quick pick menu appears beside the selection field.

Likewise, here a quick pick menu has been associated with the Employee column in a subfile. As the user moves the mouse down the column the quick pick menu follows - indicating which employee it is currently associated with by underlining it:

Quick pick menus may be used as new screen elements in place of push buttons.

For example a quick pick menu could contain these items:

Quick pick menus may also useful for selecting items from subfiles. For example. here the selection field in a subfile is visualized as a quick pick menu indicating what action should be taken against an employee:

items:

To set the items of Quick Pick Menu using script, the ENV.returnValue must contain an array of item object as follows:

ENV.returnValue = [ { caption: "item1" },

{ caption: "item2" },

{ caption: "item3" }

];

In Application, appStylesTheme property = JQueryUI

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

Basic theme display:

JQueryUI theme display:

Hovering on the option changes the background of the option.

Examples

Used as way to a launch other web sites

A quick menu with an orange ball image is added to the IBM i Main Menu:

The onItemSelection script allows the LANSA, IBM and Microsoft web sites to be viewed in another window:

switch (ENV.itemNumber)

{

case 1:

window.open("http://www.lansa.com","_blank");

break;

case 2:

window.open("http://www.ibm.com","_blank");

break;

default:

window.open("http://www.microsoft.com","_blank");

break;

}

Used as way to minimize keystrokes for common actions

The preceding example is changed to:

and the onItemSelection script was changed to:

var command = "";

switch (ENV.itemNumber)

{

case 1:

command = "ADDLIBLE AXESDEMO";

break;

case 2:

command = "CALL XHRRPGTRN";

break;

default:

command = "SIGNOFF";

break;

}

FIELDS("CommandLine").setValue(command);

SENDKEY("Enter");

Used to select subfile entries

Here a classic 5250 "Work With" style screen has an option column (titled "Opt") in which action values can be entered.

The subfile option column was named SFLOption and replaced by the axQuickPick eXtension:

The onItemSelection script was set to:

var sOption = "";

/* Set the correct subfile value for the menu item number */

switch (ENV.itemNumber)

{

case 1: sOption = "2"; break;

case 2: sOption = "4"; break;

case 3: sOption = "5"; break;

case 4: sOption = "6"; break;

case 5: sOption = "12"; break;

case 6: sOption = "16"; break;

case 7: sOption = "17"; break;

case 8: sOption = "33"; break;

default: break;

}

/* If an option was set, put into the 5250 subfile field */

/* and press the enter key */

if (sOption != "")

{

FIELD.setValue(sOption);

SENDKEY("Enter");

}

See Also

Dynamically Changing Themes in Tutorial 7 – Themes

Application Style Collection for Application themes