Skip to main content

Form Renderer - Vivid Component

The form renderer is used to dynamically render fields within a form based on a schema given as a plan JSON object. The <FormRenderer /> component will determine which fields should be visible/hidden and pass those fields down along with the form data to a render prop function.

Each of the different available inputs can be overridden by the user. These are given as props to the FormRenderer or DefaultFormRenderer components. Every other prop passed to these components will be passed on to the ReactForms component to be used as options for the form.

To give a field or input custom props you can modify the schema to add the fieldProps and inputProps keys to any field and these objects will be spread onto the appropriate field/input.

Note - In most cases the more appropriate way to pass custom props would be to define a custom input and pass that to the FormRenderer, however this escape hatch is here in case props need to be overridden on only one particular field/input

Schema Versions​

2_draft​

type Schema = {
  id: string;
  name?: string;
  definition: {
    schema: '2_draft';
    name: string;
    label: string;
    description: string;
    pages: {
      name: string;
      label?: string;
      conditions?: {
        name: string;
        operator: string;
        value: string;
      }[];
    }[];
    groups: {
      name: string;
      label?: string;
      conditions?: {
        name: string;
        operator: string;
        value: string;
      }[];
    }[];
    fields: {
      type: string; // TODO: type enum
      custom_type?: string;
      name: string;
      description?: string;
      label?: string;
      page: string;
      group: string;
      column?: number;
      validation?: string[];
      data?: any;
      conditions: {
        name: string;
        operator: string;
        value: string;
      }[];
    }[];
  };
};

1​

type FieldV1 = {
  type: string;
  name: string;
  label?: string;
  description?: string;
  prefill?: string;
  validation?: string[];
  conditions?: {
    name: string;
    operator: string;
    value: string;
  }[];
  fields: FieldV1[];
};

type SchemaV1 = {
  id: string;
  definition: {
    schema: 1;
    name: string;
    label?: string;
    description?: string;
    fields: FieldV1[];
    required_submission_context?: string[];
  };
};

Caveats​

While the forms-api does support field-groups and nested fields/field-groups the first version of the form-renderer does not support this functionality. It will expect your field schema to have a flat list of fields under the definitions key.

Installation​

$ yarn add @rexlabs/form-renderer

Usage​

import DefaultFormRenderer, {
  FormRenderer,
  DefaultFormView,
  DefaultDescriptionView,
} from '@rexlabs/form-renderer';

Copyright © 2020 Rex Software All Rights Reserved.