Configuring web forms

Introduction

ReDBox has a flexible and configurable framework that allows you to capture as metadata for a variety different purposes such as data management plans, provisioned workspaces and data collections. Metadata is stored in the JSON-LD format and has a very loose schema to support this flexibility.

For each type of metadata record stored, it is also possible to configure a workflow that the record may pass through to map to the business processes within your organisation.

There is also a configurable form system that allows you to design a form to meet your needs without having the need to understand code. It is possible to attach different form structures to each workflow stage to suit the requirements for the user of the form.

Record Type Configuration

Record Types are configured in the config/recordtype.js file.

The record type configuration defines the record type (e.g. a research data managment plan record) and what fields in the record should be displayed on the search interface for the purposes of filtering and faceting.

Record's are configured via the config/workflow.js file and specifies the workflow stages a record can transition through and the roles that are permitted to view and edit a record for each workflow stage.

<record-type>
|
|- search-filters []
    |- name
    |- title
    |- type
    |- typeLabel

Where <> are property labels that are variables.

Example

"rdmp": {
  searchFilters: [
    {
      name: "text_title",
      title: "search-refine-title",
      type: "exact",
      typeLabel: "search-refine-contains"
    },
    {
      name: "text_description",
      title: "search-refine-description",
      type: "exact",
      typeLabel: "Can read text from the language file"
    },
    {
      name: "grant_number_name",
      title: "search-refine-grant_number_name",
      type: "facet",
      typeLabel: null,
      alwaysActive: true
    },
    {
      name: "finalKeywords",
      title: "search-refine-keywords",
      type: "facet",
      typeLabel: null,
      alwaysActive: true
    },
    {
      name: "workflow_stageLabel",
      title: "search-refine-workflow_stageLabel",
      type: "facet",
      typeLabel: null,
      alwaysActive: true
    }
  ]
}

Workflow Configuration

The structure of the configuration is as follows

<record-type>
|
|- <workflow-stage>
    |
    |- config
        |
        |- workflow
            |
            |- stage
            |- stageLabel
            |- next
        |- authorization
            |
            |- viewRoles
            |- editRoles
        |- form
    |- starting

Where <> are property labels that are variables.

Example

"rdmp": {
    "draft": {
      config: {
        workflow: {
          stage: 'draft',
          stageLabel: 'Draft',
          next: 'review',
        },
        authorization: {
          viewRoles: ['Admin'],
          editRoles: ['Admin']
        },
        form: 'rdmp-1.0-draft'
      },
      starting: true
    },

Form/view configuration

The form and view layout is configured via config/form.js file.

The structure of the configuration file is as follows

defaultForm
|
|- forms
    |
    |- <form-name>
        |
        |- name
        |- type
        |- skipValidationOnSave
        |- editCssClasses
        |- viewCssClasses
        |- messages
            |
            |- <message-code>
        |
        |- fields []
            |
            |- class
            |- compClass
            |- viewOnly
            |- definition
                |
                |- <component specific properties>

Form-wide configuration

The settings in this section control the behaviour of the entire form.

Field configuration

The fields section lays out the components to appear in the form.

Example

fields: [
  {
    class: 'Container',
    compClass: 'TextBlockComponent',
    viewOnly: true,
    definition: {
      name: 'title',
      type: 'h1'
    }
  },

Language Configuration

Messages in the system can be configured using Language files. This allows for internationalisation of the portal as well as editing in a translation management system such as Locize.

The application uses i18next to render the messages and the language files are kept in the assests/locales/ directories.

Please see the i18next documentation for more information on how the language file is structured and it's features.