drupal-rjsf

RJSF

The module integrats the ReactJSONSchemForm js library into Drupal's Form and Field API.

Post Install Build

FOR THIS MODULE TO FUNCTION THE EDITOR AND EDITOR WIDGETS MUST BE BUILT AFTER INSTALL USING NPM.

The easiest way to ensure the editor and widgets are always built is to add a post install and update command to the scripts section of your composer.json like so.

"scripts": {
    "post-install-cmd": [
        "@buildRjsfEditor"
    ],
    "post-update-cmd": [
        "@buildRjsfEditor"
    ],
    "buildRjsfEditor": [
        "npm install --cwd ./docroot/modules/contrib/rjsf --prefix ./docroot/modules/contrib/rjsf",
        "npm --prefix ./docroot/modules/contrib/rjsf run build:all"
    ]
}

Examples

Form API

To use an RJSF editor in a Drupal all that needs to be done is to add a rjsf_editor element to the form and provide the schema configs for the editor.

Usage Example

$form['rjsf_element'] = [
  '#type' => 'rjsf_editor',
  '#server_validation' => TRUE,
  '#client_validation' => TRUE,
  '#schema' => [
    'title' => 'A registration form',
    'description' => 'A simple form example.',
    'type' => 'object',
    'required' => ['firstName', 'lastName'],
    'properties' => [
      'firstName' => [
        'type' => 'string',
        'title' => 'First name',
        'default' => 'Chuck',
      ],
      'lastName' => [
        'type' => 'string',
        'title' => 'Last name',
      ],
      'telephone' => [
        'type' => 'string',
        'title' => 'Telephone',
        'minLength' => 10,
      ],
    ],
  ],
  '#uiSchema' => [
    'firstName' => [
      'ui:autofocus' => TRUE,
      'ui:emptyValue' => '',
      'ui:autocomplete' => 'family-name',
    ],
    'lastName' => [
      'ui:emptyValue' => '',
      'ui:autocomplete' => 'given-name',
    ],
    'age' => [
      'ui:widget' => 'updown',
      'ui:title' => 'Age of person',
      'ui:description' => '(earthian year)',
    ],
    'bio' => [
      'ui:widget' => 'textarea',
    ],
    'password' => [
      'ui:widget' => 'password',
      'ui:help' => 'Hint: Make it strong!',
    ],
    'date' => [
      'ui:widget' => 'alt-datetime',
    ],
    'telephone' => [
      'ui:options' => [
        'inputType' => 'tel',
      ],
    ],
  ],
];

Editor Widgets

To leverage the full power of Drupal within the RJSF editor several custom react form widgets have been created to cover the most common use cases. There is also an extension pattern making use of Module Federation that allows for integrating custom widgets into the editing experience.

Entity Browser(rjsf_entity_browser)

The integration of entity browser allows for RJSF to reference any entity inside of Drupal. With support for multiple browsers developers can define as many entity browser's as they want tailoring the editing experience to the content.

Usage example

@TODO

Rich Text(rjsf_rich_text)

Drupal's WYSIWYG editing experience is available inside of components. Developers can set up, configure, control permissions for all rich text styles all from within the normal Drupal pages.

Usage example

@TODO

Links

@TODO write a link widget to reference Drupal content

Usage example

@TODO

Autocomplete

@TODO write a simple autocomplete widget to compliment the more complex Entity Browser widget.

Usage example

@TODO