QuickStart - Dynamic Select Box

Each entry in a Dynamic Select Box is defined by an entry in a working list or a set of items hardcoded in the weblet properties.

If you use a working list:

To use a working list to define the dropdown options, you need to create a webroutine that specifies a field to store the selected value and the working list of options in the WEB_MAP. The working list must be defined as a *JSON list. The working list will usually contain 2 or 3 columns:

A caption column containing the values to display in the list

A code column containg the code associated with each caption. The code is the value that will be sent back to indicate the user's choice.

An optional selector column. This will be used in conjunction with the selectorValueField property to filter the list displayed to the user

 

1.Click on the Weblets tab, select Standard Weblets from the drop-down list near the top and locate the Dynamic Select Box weblet.

2.Drag the Dynamic Select Box weblet onto the field to store the value and release the left-mouse button.

3.Click on the weblet to review the Details tab. Notice that the vf_wamevent and value properties have been set to indicate the field you dragged the weblet on to. The value property indicates that on presentation of the web page any value currently in this field will be used to set the selected entry. When the weblet value is changed the appropriate value will be placed in the field nominated on the name property – in this case the same field.

4.Change the listname property to the working list passed on the WEB_MAP.

5.Set the codefield and captionfield properties to the appropriate fields from the working list.

6.Set the size property to indicate the desired height of the list box in rows (a value of 1 will cause it to render as a dropdown).

If you use the items property:

To use a set of items hardcoded in the weblet properties, you would need to create a webroutine that specifies a field for the selected value in its WEB_MAP. When you open the XSL generated for the webroutine in the LANSA Editor:

1. lick on the Weblets tab, select Standard Weblets from the drop-down list near the top and locate the Dynamic Select Box weblet.

2.Drag the Dynamic Select Box weblet onto the field to store the value and release the left-mouse button.

3.Click on the weblet to review the Details tab. Notice that the vf_wamevent and value properties have been set to indicate the field you dragged the weblet on to. The value property indicates that on presentation of the web page any value currently in this field will be used to set the selected entry. When the weblet value is changed the appropriate value will be place in the field nominated in the name property – in this case the same field.

4.Set up the list of items to be used as drop down options by selecting the ellipses button on the items property. Proceed to define the require entries for the select box.

Automatic Updating

The dynamic select box can monitor another field and automatically refresh itself whenever that field is updated. If the weblet has been filled using a working list then you will need to create a JSON webroutine that will output a fresh copy of the working list. The weblet will call this Webroutine each time it needs to refresh.

1.Set the updateOnFieldChange to the id of the field you want to monitor. This will usually be the name of a field but it can be the id of any HTML form element capable of generating a change event. This field will be submitted to the Webroutine supplying the new list.

2. Set the updateWamName and updateWrName properties to the name of the WAM/Webroutine that will supply the new list. This webroutine must output a new copy of the list defined in the listname property.

3. Set the updateFieldsToSubmit property to identify the input values to be sent to the update webroutine.

It is not necessary to use an update webroutine to refresh the list. In many simple cases you can supply all possible values to the weblet in the initial list output by your main webroutine and filter the list using the selectorField. The weblet will remember the initial list and reapply the selectorField filter when doing a refresh, avoiding the need to send a request to the server and wait for a response.

For example, if the updateOnFieldChange and selectorValueField properties both specify the same field, the list will update itself by re-filtering every time the user changes that field.

Deciding which approach to take is a balancing act. Using the selectorField makes the list update more quickly but may result in a longer initial page load as more data has to be sent to the browser. Using an update webroutine will improve initial load and allows real time retrieval of the latest data or allows more complex logic in the list construction but may introduce a delay while the list is retrieved from the server.

Also see

QuickStart - Dynamic Select Box