FormComposerV2

FormComposerV2 – Customisation Checklist

Overview

Follow the steps below to customise the various forms.

Usage Contexts

• Citizen Complaint Creation – Multi-step form.

• Employee Complaint Creation – Single-step form.

• Workflow Actions – Used for updating complaint status (modal forms).

Supported Field Types

• Common: text, number, radio, checkbox, select, toggle, password

• Special: time, geolocation, search, amount, mobileNumber, multiselectdropdown

• Custom: component, apidropdown, locationdropdown, dateRange

Steps

1. Add New Field to Existing Card

   {
     inline: true,
     label: "CS_COMPLAINT_POSTALCODE_DETAILS",
     isMandatory: false,
     type: "number",
     disable: false,
     populators: {
       name: "postalCode",
       maxlength: 6,
       validation: { pattern: /^[1-9][0-9]{5}$/i }
     }
   }

2. Add New Card

   {
     head: "CS_COMPLAINT_LOCATION_DETAILS",
     body: [
       {
         inline: true,
         label: "CS_COMPLAINT_DETAILS_ADDRESS_1_DETAILS",
         isMandatory: false,
         type: "text",
         key: "AddressOne",
         disable: false,
         populators: { name: "AddressOne", maxlength: 64 }
       }
     ]
   }

3. Add Custom Component

   • Create component (must accept t, config, onSelect props).

   • Register in Module.js:

     const componentsToRegister = {
       PGRBoundaryComponent: BoundaryComponent
     };

   • Use in config:

     {
       type: "component",
       isMandatory: true,
       component: "PGRBoundaryComponent",
       key: "SelectedBoundary",
       label: "Boundary",
       populators: { name: "SelectedBoundary" }
     }

The reference for PGRBoundaryComponent Source Code

1. Dynamic Field Updates

   • Use preProcessMDMSConfig to change field options/values based on another field’s selection.

2. Data Transformation for API

   • Add your field mapping to transform function (in utils/index.js) to include in API payload.