Skip to main content

Form Builder Guide

Overview​

The Platform Form Builder provides a streamlined way to create and integrate forms into your application. This guide covers the CLI command usage, template structure, and implementation process.

CLI Command​

platform add-form

This command initiates the form creation process with the following workflow:

  1. Displays the portal menu for form location selection
  2. Prompts for the form name
  3. Generates the form structure
  4. Offers wizard integration options

Template Structure​

The form generation process utilizes three main template components:

1. Builder Template (forms/_TEMPLATE/builder.tsx)​

  • Contains the Form Field Selector interface
  • Allows visual form construction
  • Provides field configuration options

2. Client Template (forms/_TEMPLATE/client.tsx)​

  • Houses the implemented form code
  • Generated from the Builder selections
  • Handles form rendering and client-side logic

3. Server Template (forms/_TEMPLATE/server.tsx)​

  • Manages dynamic server-side operations
  • Handles data processing and validation
  • Configures backend integrations

Video Demonstration​

Watch this comprehensive video guide to see the Form Builder in action:

This video demonstrates:

  • Using the Form Field Selector
  • Configuring form fields and properties
  • Implementing client and server templates
  • Testing the completed form

Implementation Steps​

1. Form Generation​

  1. Run the platform add-form command
  2. Select the target menu location
  3. Provide a name for your form
  4. Choose whether to integrate with a wizard

2. Form Building​

  1. Navigate to the Form Field Selector (right side panel)
  2. Select desired form controls from available options
  3. Configure each field's properties:
    • Validation rules
    • Field labels
    • Default values
    • Required/Optional status
  4. Preview the form layout
  5. Copy the generated code

3. Implementation​

  1. Replace the content in the client template with the copied code
  2. Configure server-side logic in the server template
  3. Test form functionality:
    • Validate all form fields
    • Verify error handling
    • Test data submission flow

4. Wizard Integration (Optional)​

If wizard integration was selected:

  1. Choose the target wizard step
  2. The form will be automatically integrated into the wizard flow
  3. Additional wizard-specific configurations may be required

Best Practices​

  1. Remove the implementation guide component after setup
  2. Implement comprehensive form validation
  3. Include proper error handling
  4. Verify the complete data submission flow
  5. Test wizard integration thoroughly if implemented