Skip to content

Text Inputs

Jump to bottom
mdoyle023 edited this page Mar 19, 2021 · 3 revisions

*required property

Property Value Use Example
*type String Indicates that the schema object should be rendered as a text input. "type": "string"
*name String The corresponding label for the form element "name": "Form Display Name"
helpText String Will display as an information icon next to the form element. The provided string will display when the user hovers over the icon. "helpText": "This is help text that can be very long."
tooltip String The tooltip that will display when hovering over the form element "tooltip": "Tooltip for the form element."
placeholder String Set this string as a placeholder text inside of the text box. "placeholder": "This is a placeholder"
format String Indicates that this string should apply specific type of string validation. Currently supported options are email and url. "format": "email"
listDelimiter String Setting this property indicates that this text input contains a list of items. The list delimiter is used to separate items within the list. This can be combined with the validation field to validate things like a list of emails. "listDelimiter": ":"
default String The default value that should be in the input. "default": "This is a default string"
isReadOnly Boolean This property indicates that the input control cannot be changed by the user. Any data within a readonly field will not be returned upon form submission. "isReadOnly": true
display String This property will make the text input field into text area field. "display":"textarea:rows=3,cols=30"
isHidden Boolean This flag will hide the element from the view of the user. However, this can still be programmatically set. "isHidden": true
maxLength Integer The maximum character length of the string. "maxLength": 10
minLength Integer The minimum character length of the string. "minLength": 5
pattern String Indicates that this string should apply a specific RegEx for string validation. "pattern": "^(\([0-9]{3}\))?[0-9]{3}-[0-9]{4}$"

Text Input Validation

Please note that the keywords format, minLength, maxLength apply string validation. In official data validation against the schema, empty strings are considered invalid when one or more of these keywords are applied; if no value was entered, it is expected the property will not be returned at all.

However, in most cases, the form generated by the library library will result in data that includes all fields (excepting secured inputs), and empty strings will be sent back where no value was provided.

To enable empty strings to pass through standard validation of data against the schema, it will be necessary to include a oneOf property that contains two schema objects: one with the validation you wish to impose in the first place (such as format), and the other with a maxLength of 0, to enable an empty string to be considered valid.

Example

For an email, the property may start out like this:

"myEmail": {
	"type": "string",
	"format": "email"
}

To enable validation to pass with empty strings, it must be modified to look like this:

"myEmail": {
      "type": "string",
      "oneOf": [
 		{
          "format": "email" // validation I want to apply in the first place
        },
        {
          "maxLength": 0 // enables an empty string to pass validation
        }
       
      ]
    }

Button

A button can be added to the right side of a text input. A text input button can be configured to emit an event to the parent project containing additional data.

Note: At this point in time it is possible to add more than one button, but you may run into issues with spacing.

Property Value Use Example
type "button" Indicates that this child object needs to be rendered as a button. "type": "button"
name String The text that is displayed on the button. "name": "Button Display Name"
targetPaths String[] An array of paths that point to a target that will be emitted on button click. These paths can point to just about anything: sections, checkboxes with children, nested child form elements, read-only controls, and even hidden controls. Note: if a target path does not exist, it will not be emitted. "targetPaths": ["key1.key2", "key1.key3"]

Button Example

"textInput": {
  "type": "string",
  "name": "Text Input",
  "buttonEventKey": {
    "type": "button",
    "name": "Button Display Name",
    "targetPaths": [
      "key1.key2",
      "key1.key3"
    ]
  }
},
"key1": {
  "type": "object",
  "name": "Example Object",
  "properties": {
    "key2": {
      "type": "string",
      "name": "Example Text Input"
    }
    "key3": {
      "type": "boolean",
      "name": "Example Checkbox Input"
    }
  }
}

When the button is clicked, the JSF will emit a custom event containing an event key and an array of objects. Each object will contain a path from the targetPaths array and each paths corresponding form value. Using the simplified example above, the output will look similar to the following JSON:

{
  key: buttonEventKey,
  targets: [
    {
      "path": "key1.key2",
      "data": "Text Input Data"
    },
    {
      "path": "key1.key3",
      "data": true
    }
  ]
}

Revision History

2.1.0

  • Enhancement Added the ability to define a pattern

2.0.0

  • Breaking Change: Changed "validation" keyword to "format"
  • Enhancement: Added the capability to add a button to a text input
  • Enhancement: Added the ability to make a control readonly
  • Enhancement: Added the capability to turn text input into a text area input
  • Enhancement: Added the ability to hide a form control
  • Enhancement: Added the ability to define a maxLength and minLength
  • Enhancement: Added the ability to emit multiple button event destinations

1.0.0

  • Enhancement: Added the basic text input functionality
Clone this wiki locally