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

Context

Supported

Input screen fields

Yes

Output screen fields

Yes

Input subfile fields

Yes

Output subfile fields

Yes

New screen elements

Yes

Properties

Name

Description and Comments

JavaScript

Shipped default

containerHOffset

Additional specific horizontal offset to be applied to the quick pick menu container. Default is zero. Specify as an integer in the range -256 to +256. Value specifies the number of pixels.

Yes. Must return an integer.

 

0

containerLocation

The displayed location of the quick pick menu relative to the image. Chose from Above and Left, Above and Right, Below and Left or Below and Right.

Yes. Must return on o f the strings "AL", AR", "BL" or "BR".

Below and Right.

containerStyle

The style of the container (DIV) of the quick pick menu items.

Yes. Must return a style object.

cursor:pointer

background:infobackground

border-top:1px solid activeborder

border-left:1px solid activeborder,

border-right:1px solid activeborder

containerVOffset

Additional specific vertical offset to be applied to the quick pick menu container. Default is zero. Specify as an integer in the range -256 to +256. Value specifies the number of pixels.

Yes. Must return an integer.

 

0

enabled

Indicates whether this element is enabled.

TS2 only.

Yes. Must return a Boolean.

True.

image

The image to be displayed. The quick pick menu is displayed as the mouse passes over this image.

Typically the image property is only used with new screen elements or with existing 5250 screen elements whose Default Visualization has been unchecked/removed.

Typically the image property is not used (ie: blanked out/removed) with existing 5250 screen elements whose Default Visualization has not been removed.

Yes. Must return a string.

axquickpick.gif

imageSize

The size of the image that is to be displayed. Choose from 16x16, 32x32 or 64x64.

Yes. Must return "S" (16x16), "M" (32x32) or "L" (64x64).

16px x 16px

items

The captions of the item(s) that are to appear on the quick pick menu.

Yes. Must return an array of item object.

None.

onItemSelection

The script to be executed when the user clicks on a quick pick menu item. Special scripting values ENV.itemNumber and ENV.itemCaption are accessible to this script. They may be used to identify which menu item was clicked.

Yes.

None/

style

The style of the item(s) on the quick pick menu. The height must be specified, be in pixels (px) and in the range 5 to 500. The width must be specified, be in pixels (px) and in the range 5 to 500.

Yes. Must return a style object.

height:15px

width:80px

background:infobackground, border-bottom:1px solid activeborder

padding-left:4px

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:

Image

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

Image

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

Image

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.

Image

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:

Image

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:

Image

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:

Image

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:

Image

JQueryUI theme display:

Image

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:

Image

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:

Image

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:

Image

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 10 - 5250 Screen Styling

Administrators

Legal Mentions

aXes is brought to you by:

LANSA

Serving the IBM i community for 30 years.