AdvancedForm

The AdvancedForm component is a reusable and dynamic form builder used to render one or more AdvancedInputField components. It enables advanced UI features such as search/view/add buttons per field, custom rendering for specific fields, conditional dropdowns, and complete form disabling.

✨ Features

• Renders a customizable form layout dynamically from a configuration array (formDefinition).
• Supports enhanced field actions like search, view, and add.
• Supports custom rendering per field.
• Works seamlessly with AdvancedInputField.
• Responsive layout with grouped form rows.

🔧 Props

Prop	Type	Description
formName	string	Title of the form rendered above the fields.
formDefinition	Array<Object>	Array of field definitions to render dynamically.
onSearch	function	Callback triggered when search icon is clicked.
onView	function	Callback triggered when view icon is clicked.
onAppend	function	Callback triggered when add icon is clicked.
handleChange	function	Callback for updating field value.
updateFieldQuery	function	Callback for updating field's query (condition).
formData	Object	Current state values for all form fields.
isFormDisabled	boolean	Disables the entire form when set to true.

🧩 Field Definition Structure (formDefinition)

Each item in the formDefinition array can contain the following:

{
  name: "fieldName",             // required, field key
  label: "Field Label",          // required, label to show
  type: "text" | "number" | "date", // required, type of input
  showCondition: true | false,   // optional, show/hide condition dropdown
  size: "small" | "medium" | "large", // optional, input size
  hasAdvancedFeatures: true,     // optional, enables buttons (search/view/add)
  searchable: true,              // optional, overrides default search button logic
  viewable: true,                // optional, overrides default view button logic
  appendable: true,              // optional, overrides default add button logic
  render: () => <CustomJSX />    // optional, render custom JSX instead of AdvancedInputField
}

🧪 Example

<AdvancedForm
  formName="User Filter"
  formDefinition={[
    { name: "username", label: "Username", type: "text", hasAdvancedFeatures: true },
    { name: "age", label: "Age", type: "number", size: "medium" },
    { name: "dob", label: "Date of Birth", type: "date", showCondition: false }
  ]}
  formData={{ username: { value: "", query: "" }, age: { value: null, query: "" }, dob: { value: null, query: "" } }}
  handleChange={(field, val) => console.log(field, val)}
  updateFieldQuery={(field, val) => console.log("Condition", field, val)}
  onSearch={(label) => console.log("Searching", label)}
  onView={(label) => console.log("Viewing", label)}
  onAppend={(label) => console.log("Appending", label)}
  isFormDisabled={false}
/>

---

Next Step: You can place this file inside the docs folder of your Docusaurus project.