Lets Form Dsl - LetsForm

LetsForm Domain Specific Language

The JSON Form schema it's not the only way of defining a form, even though it's the preferrend one.

Some specific tags are available to define the form using a Domain Specific Language, for example the simplest example can be implemented adding the component <LfField> as children of <LetsForm>

import LetsForm, { LfField } from 'lets-form/rsuite5';
 
const MyForm = () => (
  <LetsForm
    layout="vertical"
    fluid={true}
    name="Simples example"
  >
    <LfField
      component="input-text"
      label="My Text"
      name="my_field"
      hint="Some help can be useful"
    />
    <LfField
      component="select"
      label="My Select"
      name="my_select"
      options={[{"value":"one","label":"One"},{"value":"two","label":"Two"}]}
      block={true}
    />
  </LetsForm>
);

The LfField component will accept the same properties of the JSON elements, refer to the components documentation for the list of available properties for each UI framework. The component and name must always be specified, otherwise an error will be triggered.

Validation

Validation props can be specified in <LfField> as well

<LfField
  component="input-text"
  label="My Text"
  name="my_field"
  errorMessage="Value is invalid!"
  validationMaxLength={42}
  validationMinLength={0}
  validationMin={0}
  validationMax={42}
  validationPattern="/my-regex/"
  validate={`
    // .. my validation function
  `}
/>

Columns

Also layout components like Columns can be easily specified and nested with LetsForm DSL, for example

import React from 'react';
import LetsForm, { LfField, LfColumn, LfColumns } from 'lets-form/react-rsuite5';
 
const MyForm = () => {
  return (
    <LetsForm
      layout="vertical"
      name="Two columns example"
    >
      <LfColumns
        name="field_column"
      >
        <LfColumn>
          <LfField
            component="input-text"
            label="Field 1"
            name="field_1"
            fullWidth={true}
          />
        </LfColumn>
        <LfColumn>
          <LfField
            component="rate"
            label="Field 2"
            name="field_2"
            count={5}
            fractions={1}
            max={5}
          />
        </LfColumn>
      </LfColumns>
    </LetsForm>
  );
};

Refer to the Column component for all available properties.

Group

In a similar way it's possible to nest any number of fields in a <LfGroup/> component

import React from 'react';
import LetsForm from 'lets-form/react-rsuite5';
import 'rsuite/dist/rsuite.min.css';
 
import myFormSchema from './form.json';
 
const MyForm = () => {
  return (
    <LetsForm
      layout="vertical"
      name="Group example"
    >
      <LfGroup
        label="I'm a group"
        name="my_group"
        collapsible={true}
        open={true}
        align="center"
      >
        <LfField
          component="input-text"
          label="My text inside a group"
          name="my_text"
          fullWidth={true}
        />
      </LfGroup>
    </LetsForm>
  );
};

Refer to the Group component for all available properties.

Array

Also arrays are supported with the LetsForm DSL, in the <LfArray/> component can be specified any number of <LfField> and even layout components like <LfColumn> and <LfGroup>, for example

import LetsForm, { LfArray, LfField } from 'lets-form/react-rsuite5';
 
const MyForm = () => {
  return (
    <LetsForm
      layout="vertical"
      validationMode="onSubmit"
      labelSubmit="Submit"
      labelCancel="Cancel"
      name="Array example"
      fluid={true}
      onSubmit={values => {
        console.log('form values', values);
      }}
    >
      <LfArray
        label="My list"
        name="my_list"
        layout="vertical"
        alignOffset={24}
      >
        <LfColumns
          name="my_two_columns"
          layout="layout-1-1"
        >
          <LfColumn>
            <LfField
              component="input-text"
              label="First name"
              name="first_name"
              fullWidth={true}
            />
          </LfColumn>
          <LfColumn>
            <LfField
              component="input-text"
              label="Last name"
              name="last_name"
              fullWidth={true}
            />
          </LfColumn>
        </LfColumns>
      </LfArray>
    </LetsForm>
  );
};

Refer to the Array component for all available properties.

Other

Also Steps component and Tabs component are supported in the LetsForm DSL, see components documentation for examples.

LetsForm Designer (opens in a new tab) can export forms both with JSON Form schemas or LetsForm DSL.

Components like <LfField>, <LfGroup>, etc are a tags set of a Domain Specific Language, they are not translated directly into real DOM elements, instead are inspected by <LetsForm> component and translated into the corresponding JSON form schema, then rendered. For this reason it's also possible to mix the two approaches: rendering a form using the JSON form schema AND fields defined with the DSL (in that case fields will be rendered at the bottom)