Skip to Content
Advanced topicsLetsForm DSL

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> );
Loading...

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> ); };
Loading...

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> ); };
Loading...

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> ); };
Loading...

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 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)