Introduction

This control is similar to a select or drop-down list with some additional features:

• The options of the drop-down list are provided in the JSON configuration when using the Input Control in uStore backoffice.
• It automatically includes an "Other" option that if selected, will display a text input tag for the customer to manually type another option that is not available in the drop-down list.

Configuration parameters

availableOptions

Type: string array

Example:

"availableOptions": ["London","New York","Hong Kong","Sydney"]

This parameter sets the options that are displayed for the customer to select in the drop-down list.

selectedOption

Type: string

Example:

"selectedOption": "New York"

If provided, this parameter sets the selected option in the drop-down list.

Note this is the same as using the Default Value property on the uStore dial Customization Wizard page.

addSelectText

Type: boolean

Example:

  "addSelectText": true

If this parameter is set to true, then the Input Control will automatically add an extra element to the top of the drop-down list. This is useful if you want to force the customer to make a selection.

If the parameter is set to false, then the first element of the availableOptions array will be at the top of the drop-down list and will be selected when the page loads.

selectText

Type: string

Example:

"selectText": "-- select an option --"

This parameter allows you to set the text that will be used at the top of the drop-down list if addSelectText is set to true.

Full sample configuration

{
  "availableOptions": [
    "London",
    "New York",
    "Hong Kong",
    "Sydney"
  ],
  "selectedOption": "New York",
  "addSelectText": false,
  "selectText": "-- select an option --"
}

Downloads

Built versions ready to install in uStore Presets:

DropDownWithOther v1

You can download and modify the source code below. To modify and build new versions follow these instructons using the source zip instead of the ng_duc_project_sample.zip:

DropDownWithOther v1 Source code

Tips

• uStore v25.2 or later is required
• If your storefront shows "sorry an error occurred" when viewing a product that uses this Input Control, first check that the configuration JSON is valid by using a tool such as JSONLint
• If you experience other problems, or have suggestions for future versions, you should ask or comment on the XMPie-Users Google Group. Remember that this Input Control is not authored by XMPie, so you will probably not get support for this custom Input Control from XMPie Support.