Skip to content

Schema Input Types and Validators

Brad Simpson edited this page Jun 22, 2023 · 6 revisions

In order to configure a plug-in in the Adapt authoring tool, the plug-in must supply a file named properties.schema. Its purpose is to specify which HTML input should be used to gather the necessary configuration data. Below are lists of input types and data validators that are recognised by the authoring tool.

Options for Input Types

Adapt authoring tool utilizes https://github.com/powmedia/backbone-forms. The library provides for the configuration of a variety of editors/input fields—more than have been tested by the Adapt core plug-ins. More details about configuring editors can be found here. The authoring tool includes the file required to create a list of items.

  • The fundamental model is:
    "inputType": {"type": "Tttt", "options": ["xxxx", "yyyyy", "zzzz"]}
  • If the key "inputType" is not specified, it will default to "type": "Text".
  • Attributes vary depending on the type of form input that is needed. When you don't need to specify any options, you can pass the "type" (the editor name) as a string. The following are equivalent:
    "inputType": "Text" and "inputType": {"type": "Text"}
  • Every input must supply a default, though String can be an empty string.

A short list of common input fields

  • "inputType": "Text"
  • "inputType": {"type": "Text", "dataType": "email"}
  • "inputType": {"type": "Text", "dataType": "url"}
  • "inputType": {"type": "Text", "dataType": "tel"}
  • "inputType": "TextArea"
  • "inputType": "Number"
  • "inputType": "Password"
  • "inputType": {"type": "Date", "yearStart": YYYY, "yearEnd": YYYY}
  • "inputType": {"type": "Boolean", "options": [true, false]} (Custom editor provided by Adapt.)
  • "inputType": {"type": "Select", "options": ["document", "media", "link"]}
  • "inputType": {"type": "Select", "options": ["inview", "allItems"]}
  • "inputType": {"type": "Select", "options": ["hidden", "visible"]}
  • "inputType": {"type": "Select", "options": ["page", "block", "component"]}
  • "inputType": "Asset:image" (Custom editor provided by Adapt. The Asset inputType allows a file to be selected and uploaded to the authoring tool.)
  • "inputType": "Asset:video"
  • "inputType": "Asset:audio"
  • "inputType": "Asset:other" (for use with PDFs, docs, etc.)
  • "inputType": "QuestionButton" (Custom editor provided by Adapt. If a button is needed, use the properties.schema from one of the core question components as a model.)

Adapt code for "type": "Boolean" and "_supportedLayout" requires "enum"; other "Select"s do not.

Need a Custom InputType?

The inputTypes listed above are those that are built into the Adapt authoring tool. Three are custom editors created by Adapt developers: Boolean, Asset:image, and QuestionButton. Before creating your own, recognize that deploying it requires access to the application code of your authoring tool. If you do not have such access, consider submitting your custom inputType as a pull request (PR) to the Adapt authoring tool project on GitHub.

It is recommended to use the code files of these custom editors as models for your code. They can be found in the authoring tool source code at /frontend/src/core/scaffold/views.

//snippet from scaffoldBooleanView.js  
Origin.scaffold.addCustomField('Boolean', ScaffoldBooleanView);

In the example above, 'Boolean' is the string that is assigned to type below:

"inputType": {"type": "Boolean", "options": [true, false]}   

And ScaffoldBooleanView is the name of your custom editor view class.

For more help, consult the documentation at https://github.com/powmedia/backbone-forms

Options for Data Validation

Validators are maintained in frontend/src/core/libraries/backbone-forms.js
Custom validators may be registered by using Origin.scaffold.addCustomValidator(name, validatorMethod) per scaffold.js

Built-in validators:

  • required: Checks the field has been filled in
  • number: Checks it is a number, allowing a decimal point
  • email: Checks it is a valid email address
  • url: Checks it is a valid URL
  • match: Checks that the field matches another. The other field name must be set in the field option.
  • regexp: Runs a regular expression. Requires the regexp option, which takes a compiled regular expression. Setting the match option to false ensures that the regexp does NOT pass.

Examples:

Built-in validator:
name: { validators: ['required'] }

Multiple built-in validators:
email: { validators: ['required', 'email'] }

Built-in editor with options:

password: { validators: [  
    { type: 'match', field: 'passwordConfirm', message: 'Passwords must match!' }  
] }

Regular expression:
foo: { validators: [/foo/] }

Regular expression with message:

"validators": [
  {
    "type": "regexp",
    "regexp": "^[0-9a-zA-Z]+$",
    "message": "Only letters and numbers are allowed."
  }
]
Clone this wiki locally