Overview and Architecture

In the ANDP context the architecture establishes a strict separation between backend configuration and frontend rendering:

  1. Form Type Definition (CMS): Defines which input controls and layout blocks are available to editors within the Form Editor.

  2. FormGen Component Renderer (App): The React Native / Expo based frontend application that interprets the configured fields and renders the actual UI components on the screen[cite: 1].

Customizing Existing Elements (Controls)

Input elements (such as text fields, checkboxes, or date pickers) that a visitor interacts with already possess standardized renderers in FormGen.

When you need to customize the logic, validation, or visual behavior of an existing control specifically for ANDP, all modifications are handled directly within the FormGen application.

Approach:

  • Logic & UI: You can override existing element renderers or point existing configuration keys to your custom React Native components.

  • Mapping: The connection between the configuration key and the actual UI component is registered within the FormGen mapping tables.

NOTE: Detailed step-by-step instructions on implementing the element contract (implementing validate and getSummaryValue) and registering your custom components can be found in the CMS Documentation for FormGen

Creating New Structural and Layout Components (Block Elements)

For ANDP, simply customizing standard input fields is often not enough. If you need to introduce completely new, structural, or layout-related controls (e.g., specific visual spacers, custom containers, or rich-text information blocks), these are referred to as Block Elements in the new Form Editor.

Implementing a new Block Element is a two-step process:

Step 1: Extend the Backend Configuration (Form Type)

Before FormGen can render a new block element, it must be formally defined in the CMS form type configuration so that authors can see and place it within the Form Editor.

  • This definition is managed in the configuration file conf/forms.yml under the blocks section of your specific form type.

  • You will define the block’s unique ID, translations (labelI18n), and any editable settings required for the block.

NOTE: For a precise explanation of all available setting types (such as translation, string, boolean) and the exact structural configuration of the YAML file, please refer to the CMS Documentation for the Forms Feature

Step 2: Extend FormGen (Renderer & Mapping)

Once the block element is recognized by the backend, you must instruct the frontend (FormGen) on how this structural element should be visually rendered.

  1. Create a New Component Renderer: Implement the new React Native component

  2. Configure ElementType Mapping: Register the new element inside custom/ElementTypes.tsx. To ensure the FormGen engine resolves your block type to the correct React component, the mapping key must exactly match the block type key configured in your forms.yml

NOTE: For the exact implementation details—including how to re-export your component from ElementDefinitions.tsx and map it to specific plugin contexts (such as acta-nova or shared)—please consult the verbatim file formgen.textile.