Skip to main content

Introducing Workflow Engine, try for FREE workflowengine.io.

Designer customization

Customizing the FormBuilder interface

Using the customization FormBuilder prop, you can hide, style, or replace any parts of the FormBuilder interface. A customization map object is passed to this property, in which the options of the desired component are set using its customizable key.

Example

import {type CustomizationMap, FormBuilder} from '@react-form-builder/designer'

const simpleCustomization: CustomizationMap = {
// Hiding the "Download" item in the main menu by using nested CSS selectors.
MainMenu_Dropdown: {
style: `
#menuitem-\\:r5\\: {
display: none;
}
`
},

// Customizing Header styles
Header: {
className: 'MyClassName',
style: {
backgroundColor: 'rgba(52,152,255,.25)',
borderRadius: '10px',
margin: 5,
marginBottom: 10,
padding: '8px!important'
}
},

// Adding a custom button to the header toolbar.
Header_Toolbar: {
customRenderer: defaultElement => <div style={{display: 'flex', gap: 10}}>
{defaultElement}
<button className={'rs-btn rs-btn-sm'}>My button</button>
</div>
},

// Hiding the icon on the "Toggle mode" button.
ToggleModeButton: {
style: `
background: black !important;

svg {
display: none;
}
`
},

// Hiding the localization dropdown.
LocalizationSelect: {
hidden: true
},

// Hiding the "Json view" button
JsonViewButton: {
hidden: true
},

// Hiding the property code button
PropertyCodeButton: {
hidden: true
}
}

const FormBuilderApp = () => {
return <FormBuilder
customization={simpleCustomization}
// other props
/>
}

Customization 03

Complete list of customizable component keys

Customization 01

#Name
1MainContainer
2LeftPanel
3CentralPanel
4RightPanel
5LeftPanel_Nav
6LeftPanel_Content
7Header
8CentralPanel
9RightPanel_Nav
10RightPanel_Content
11MainMenu_Dropdown
12MainMenu_Button
13Header_Toolbar
14ToggleModeButton
15ResolutionSelect
16LocalizationSelect
17JsonViewButton
18ToggleThemeButton

Customization 02

#Name
1Components_Tab
2Components_Tab_Content
3Tree_Tab
4Tree_Tab_Content
5Settings_Tab
6Settings_Tab_Content
7Forms_Tab
8Forms_Tab_Content
9Main_Tab
10Style_Tab
11Actions_Tab
12Rules_Tab
13Main_Tab_Content, Style_Tab_Content, Actions_Tab_Content, Rules_Tab_Content
14LabeledProperty
15PropertyCodeButton
16PropertyLabel
17PropertyInput

Custom property editors

Using the propertyEditors FormBuilder prop, you can override existing component property editors or set editor for your custom property.

Example

import type {AnnotationEditorProps} from '@react-form-builder/designer'
import {FormBuilder} from '@react-form-builder/designer'
import {RgbaColorPicker} from 'react-colorful'

const MyKeyInput = (props: AnnotationEditorProps) => {
const {value, onChange} = props
return <input value={value} onChange={(event) => onChange(event.target.value)}/>
}

/**
* Converts the string containing a rgba color value into an object.
* @param value the string containing a rgba color.
* @returns the object with properties '{r, g, b, a}'.
*/
export function rgbFromString(value: string): RgbaColor {
const matchColors = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/
const [, r, g, b, a] = matchColors.exec(value) || []
return {r: Number(r), g: Number(g), b: Number(b), a: Number(a)}
}

const MyColorInput = (props: AnnotationEditorProps) => {
const {value, onChange, onClean, showError, annotation} = props

const onColorChange = useCallback((newColor?: RgbaColor) => {
if (newColor) {
const {r, g, b, a} = newColor
onChange(`rgba(${r}, ${g}, ${b}, ${a})`)
return
}
onChange(newColor)
}, [onChange])

const color = rgbFromString(value ?? 'rgba(255, 255, 255, 0)')

return <div>
<label>{annotation.name}</label>
<RgbaColorPicker color={color} onChange={onColorChange}/>
<label>{showError?.()}</label>
<button onClick={onClean}>Clean</button>
</div>
}

const FormBuilderApp = () => {
return <FormBuilder
propertyEditors={{
// Overriding the default key property editor
key: MyKeyInput,

// Setting the property editor for your own custom property
customColor: MyColorInput
}}
// other props
/>
}