Open Source ClientConfig Field Types

You can choose a number of field types for your configurations. The xtype in brackets is for hardcore ExtJS ninjas that want to know what is used behind the scenes to craft the form.

  • Text (xtype: textfield)
  • Textarea (xtype: textarea)
  • Rich Text
  • Image (xtype: modx-panel-tv-image)
  • File (xtype: modx-panel-tv-file)
  • Number (xtype: numberfield)
  • Color picker (xtype: colorpickerfield)
  • Checkbox (xtype: xcheckbox)
  • Password (xtype: textfield with inputType password)
  • Date (xtype: datefield)
  • Time (xtype: timefield)
  • Selectbox (xtype: modx-combo); properties: Text==value||Text2==value
  • Google Font List (xtype: googlefontlist)

You can use the Selectbox field type to mimick the boolean yes||no behaviour of certain System Settings by setting the field options like the screenshot example:

Text

The textfield is a simple single-line textfield.

Textarea

the textarea is a simple multi-line textfield.

Rich Text

The Rich Text field is a simple multi-line textfield that will get enhanced to a rich text editor based on what is installed in your MODX site. Both Redactor and TinyMCE are supported, others have not been tested.

Image

Provides an input that opens the MODX Browser to select an image. Can be configured to a specific media source.

File

Provides an input that opens the MODX Browser to select any file. Can be configured to a specific media source.

Number

A simple field that only accepts numbers.

Colorpicker

Allows the user to pick a color.

Checkbox

Allows a user to toggle something on or off.

Password

Allows a user to enter a secret value that is masked, for API Keys and the likes. Note that the value should not be considered securely stored, it can still be read in plain text.

Datefield

Pick a date.

Timefield

Pick a time.

Selectbox

Combined with the Field Options setting, you can create a dropdown for your users to choose between any of a number of options. Specify the options like you would set input options for template variables:
Display==Value,Other Display==OtherValue

Google Font List

To use the Google Font List input type, you need to set the clientconfig.google_fonts_api_key setting with your API Key from Google.