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. You can manage the FormBuilder and get its state in custom components using useFormBuilder. It provides access to IFormBuilder. The management options are limited at the moment, but they will be expanded in the future. Another option for customizing the component is to use pure CSS. Each component has a static CSS class named with the component’s name prefixed by FE_. This class is applied to the same element as the style or className attributes, utilizing the customization map. The components palette in the left panel also has some additional rules for CSS customization. A list of customizable components is also available as a Set.

Example

const CustomToggleModeButton = () => {
  const builder = useFormBuilder()
  const label = builder.builderMode === 'builder' ? 'PreviewMode' : 'EditMode'

  const toggleMode = useCallback(() => {
    builder.builderMode = builder.builderMode === 'builder' ? 'viewer' : 'builder'
  }, [builder])

  return <button onClick={toggleMode}>{label}</button>
}

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>
  },

  // Component toolbar (the toolbar on each selected component in the canvas): add a custom button and hide the default remove (trash) button.
  Component_Toolbar: {
    customRenderer: defaultElement => (
      <div>
        {defaultElement}
        <span style={{marginLeft: 4, padding: '2px 6px', fontSize: 24}}>
          Custom
        </span>
      </div>
    )
  },

  // Changing the "Toggle mode" button to a custom component.
  ToggleModeButton: {
    customRenderer: () => <CustomToggleModeButton/>
  },

  // 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
  />
}

Complete list of customizable component keys

#	Name	className
1	MainContainer	FE_MainContainer
2	LeftPanel	FE_LeftPanel
3	CentralPanel	FE_CentralPanel
4	RightPanel	FE_RightPanel
5	LeftPanel_Nav	FE_LeftPanel_Nav
6	LeftPanel_Content	FE_LeftPanel_Content
7	Header	FE_Header
8	FormContainer	FE_FormContainer
9	RightPanel_Nav	FE_RightPanel_Nav
10	RightPanel_Content	FE_RightPanel_Content
11	MainMenu_Dropdown	FE_MainMenu_Dropdown
12	MainMenu_Button	FE_MainMenu_Button
13	Header_Toolbar	FE_Header_Toolbar
14	Component_Toolbar	FE_Component_Toolbar
15	Component_Toolbar_Items	FE_Component_Toolbar_Items
16	Component_Toolbar_Title	FE_Component_Toolbar_Title
17	Component_Toolbar_AddButton	FE_Component_Toolbar_AddButton
18	Component_Toolbar_CloneButton	FE_Component_Toolbar_CloneButton
19	Component_Toolbar_PresetComponentButton	FE_Component_Toolbar_PresetComponentButton
20	Component_Toolbar_RemoveButton	FE_Component_Toolbar_RemoveButton
21	ToggleModeButton	FE_ToggleModeButton
22	ResolutionSelect	FE_ResolutionSelect
23	LocalizationSelect	FE_LocalizationSelect
24	JsonViewButton	FE_JsonViewButton
25	ToggleThemeButton	FE_ToggleThemeButton

| # | Name | className | aux classes | |:—:|:-------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------|---------------| | 1 | Components_Tab | FE_Components_Tab | | | 2 | Components_Tab_Content | FE_Components_Tab_Content | | | 3 | Tree_Tab | FE_Tree_Tab | | | 4 | Tree_Tab_Content | FE_Tree_Tab_Content | | | 5 | Settings_Tab | FE_Settings_Tab | | | 6 | Settings_Tab_Content | FE_Settings_Tab_Content | | | 7 | Forms_Tab | FE_Forms_Tab | | | 8 | Forms_Tab_Content | FE_Forms_Tab_Content | | | 9 | Main_Tab | FE_Main_Tab | | | 10 | Style_Tab | FE_Style_Tab | | | 11 | Actions_Tab | FE_Actions_Tab | | | 12 | Rules_Tab | FE_Rules_Tab | | | 13 | Main_Tab_Content,
Style_Tab_Content,
Actions_Tab_Content,
Rules_Tab_Content | FE_Main_Tab_Content,
FE_Style_Tab_Content,
FE_Actions_Tab_Content,
FE_Rules_Tab_Content | | | 14 | LabeledProperty | FE_LabeledProperty | valueModified | | 15 | PropertyCodeButton | FE_PropertyCodeButton | | | 16 | PropertyLabel | FE_PropertyLabel | | | 17 | PropertyInput | FE_PropertyInput | |

Next steps

Component Styling — Customize form component appearance
Designer Presets — Create reusable component groups

Components palette

Each group and component receives a set of classes composed of its name and type. When defining a component, you can specify its category. Components with the same category are merged into component groups on the palette.

export const richTextEditor = define(RichTextEditor, 'RichTextEditor')
  .name('Rich text editor')
  .category('fields')
  .props({
    //...
  })

Components group

A component group is assigned the static class FE_Palette_ComponentGroup along with a category name prefixed with FE_. If a component group is not defined, components appear at the top of the list without a title and within container with additional class FE_top.

Single component

A component receives the static class FE_Palette_Component composed with its title and name, both prefixed with FE_.

export const rsCalendar = define(RsCalendar, 'RsCalendar')
  .name('Calendar')
  .props({
    // ...
  })

Custom property editors

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

Example

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
  />
}

​Customizing the FormBuilder interface

​Example

​Complete list of customizable component keys

​Next steps

​Components palette

​Components group

​Single component

​Custom property editors

​Example

Customizing the FormBuilder interface

Example

Complete list of customizable component keys

Next steps

Components palette

Components group

Single component

Custom property editors

Example