Combo Box

Overview

The combo box performs the tasks of a select box and textbox, allowing a user to select from a list or enter a specific value. The value property determines what selected option value will be populated in the field when the program gets the screen input. The values are always what is displayed in the field. The list of choices can be loaded in a variety of ways, please see below for more detail.

Validation (Rich UI Only)

Please visit the Validation and Error Messages page.

Field Binding Dialog (Rich UI Only)

Please visit the Field Binding page.

Choices / Choice Values

• choices property - Is where your set the options in order how you would like the combo box to display them.
• choice values property - Is where the value you want returned to your application is set.

One option will appear in the box

There are two ways to populate the choice option/values properties:

1. Comma separated list - A simple list of values separated by just a comma (i.e. Option 1, Option 2, Option 3, etc...).
2. JSON array format - Using JSON array format, meaning the choices/values are enclosed in a bracket with quotations and then comma separated (i.e. ["ElementOne", "ElementTwo", "ElementThree"] ) within the choices and choice values fields also allows you to populate the auto-complete, these fields can also be bound to an RPG field (Rich UI only).

Database-Driven Selection

This section allows choices/choice values to be retrieved from a database file.

Choices database file - Enter the database file to use to populate your options/values. When setting your database file it's not required to qualify with library name, although you can. if the library is omitted, the application job's library list will be used.

Choice options field - Select the field you wish to use to populate the values shown as choice options.

Choice values field - Select the field to return a value to your application.

In the example, records will be loaded from file CATEGP. The options will be populated by field CNAME. The value in field CATID in the selected record will be returned to the program.

Choice selection criteria - This acts as a WHERE clause in an SQL statement to filter your criteria. SQL parameter markers are always specified by a question mark (?). The property "choices parameter value" can be used to provide the value for this parameter marker.

This will produce an SQL statement like this:

SELECT DISTINCT CNAME, CATID FROM CATEGP WHERE CNAME = ?

Choice parameter value - This is where the choice selection criteria value for '?' is set. This value may also be bound to a field (Rich UI only).

By completing the choice parameter value we can see our statement should return only the items named "Soaps". You can have multiple "parameter value" properties, however this does require multiple choices selection criteria. These can be added by right-clicking the choices parameter value property name and selecting "Add Another Choices Parameter Value":

For Rich Display Files the choices parameter values would ususlly be bound to a field allowing dynamic SQL selection.

To find more information on the choice selection criteria and choices parameter properties, view the Parameter Markers section here.

Blank Option

The blank option property allows you to provide a option containing blank text before any other choices from the database file are displayed.

Blank Option Label

By default the blank option label contains no text. This property allows a specific text to be provided to display in the initial blank option. If the initial 'blank' option is submitted with the alternate text the value will be sent to the program as a blank value.

Both 'blank option' and 'blank option label' properties can only be used with a Database-Driven selection. These properties may also be assigned to a bound field. (Rich UI only).

Order By

Optional expression that allows you to specify which fields determine the order of the items in the list. This is equivalent to the ORDER BY clause used in SQL statements. The default behavior of this property is to show the items in ascending order. You can add DESC to this property to sort in descending order. For example:

This will sort by product id (PRID) in descending order. 

Max Choices
The max choices property allows you to set the number of choices you will see from your database-driven selection. There is no limit to the number of choices you can show, however if there is no limit set the default is 10.

Dynamic Auto-Complete

Choices URL

The choices URL property allows you to use an external program to return your choice options and values by passing them using JSON data. PHP scripts or Universal Display Files are examples of custom programs used to pass the values to your application. When using the choices URL property, all database-driven auto-complete properties are ignored.

JSON Successful Response Example

These are values returned from an auto-complete select box in a successful response from the external program:

{
     "success":true,
     "response":[
          {"text":"Dishes and Cups", "value":"18"},
          {"text":"Soaps", "value":"14"}
     ]
}

{
     "success":true,
     "response":[
          new Option("Dishes and Cups","18"),
          new Option("Soaps","14")
     ]
}

In the successful response you can see the choices are being set by the values returned. Also in the example above the first value returned is the choice text, and the second returned value is the numeric value associated with the corresponding choice.

JSON Error Response Example

This example is JSON information returned when the script encounters an error with an database driven auto-complete.

{
     success:false,
     "errorId":"-206",
     "errorText":"Column or global variable CNAMED not found.",
     "errorText2":"SQLPrepare()"
}

If you are unable to get any information to display on your choice URL script you can use the showErrors() API to try and debug the reason the results are unable to display.

showErrors() API Documentation

Example of the showErrors() API displaying JSON error response example: