This control is similar to a regular textarea tag, but it provides a label that shows a character counter, and can restrict the customer to enter a maximum number of characters.

Type: string

Example:

"countMessage": "{value} character{s}.",

This parameter allows you to control the text shown under the <textarea> tag to show the customer how many characters they have entered.

The text {value} will be replaced automatically with the current count of characters.

The text {s} will be removed automatically when the count is 1 to remove the plural "s" from the label.

Type: integer

Example:

"rowsHigh": 3

If provided, this parameter sets the rows attribute of the <textarea> tag.

If the parameter is not provided, a default of 3 rows will be set.

Type: integer

Example:

  "maxCharacterLength": 20

The maxCharacterLength defines the maximum number of characters that can be entered into the <textarea> tag.

Type: integer

Example:

"warnRemainingCount": 5

This parameter is used to determine when to warn the customer that they are approaching the maximum number of characters permitted in the <textarea> tag.

For example, if the maxCharacterLength is 50 and the warnRemainingCount is 10, then the warning message will be displayed to the customer once 40 characters have been typed into the <textarea> tag.

Type: string

Example:

"maxErrorMessage": "A maximum of {value} characters is permitted."

This is the message that will be displayed to the customer when the number of character they have typed exceeds maxCharacterLength - warnRemainingCount.

Type: string (Being an HTML color name.)

Example:

"warningMessageColor": "DarkOrange"

This parameter sets the color of the warning message displayed to the customer. To not change the color when the message is displayed, use "warningMessageColor": "Black" or whatever color you are using for default text in the storefront.

A list of HTML color names can be found here

{
  "rowsHigh": 2,
  "maxCharacterLength": 20,
  "countMessage": "{value} character{s}.",
  "maxErrorMessage": "A maximum of {value} characters is permitted.",
  "warningMessageColor": "Tomato",
  "warnRemainingCount": 5
}

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

• 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.