Component Reference

quikFormsManager

Main dashboard for managing all form definitions with search, filtering, and bulk operations.

QuikForms Manager Dashboard

Purpose

Central hub for form administration providing complete form lifecycle management including creation, editing, version control, import/export, and deletion.

Key Features

• Sortable data table with form information
• Real-time search by name, title, or form ID
• Filter by object type and activation status
• Bulk export to JSON
• Import forms from JSON with preview
• Quick actions: Edit, Preview, Delete, Clone
• Draft status indicators
• Version management

Configuration

Add to Lightning App Builder as an App Page with full-width layout.

<!-- Lightning App Builder Configuration -->
<aura:component implements="flexipage:availableForAllPageTypes"
                access="global">
    <c:quikFormsManager />
</aura:component>

Table Columns

Related Components

• quikFormsBuilder - Form editing interface
• quikFieldsLibrary - Field management

quikFormsBuilder

Wrapper component that manages the Form Builder loading lifecycle and progress indicators.

Purpose

Lightweight wrapper around quikFormsBuilderTabs that handles initialization, progress tracking, and error states.

Key Features

• Progress bar during loading (0-100%)
• Tracks builder data loading (0-90%)
• Tracks preview editor initialization (90-100%)
• Error handling with user-facing toasts
• Non-blocking UI updates

Configuration

Add to FormConfigVersion__c record page in Lightning App Builder.

Related Components

• quikFormsBuilderTabs - Main builder interface

quikFormsBuilderTabs

Main Form Builder interface with 5 tabs for comprehensive form configuration.

Form Builder - Complete Interface

Purpose

Comprehensive form editing interface providing all configuration options across five specialized tabs.

Tabs

1. Fields Tab - Manage form fields, ordering, and layout
2. Settings Tab - Form metadata, messages, and behavior
3. Styling Tab - Visual customization (colors, fonts, layout)
4. Related Objects Tab - Multi-object form configuration
5. Preview Tab - Live form preview with draft token

Fields Tab Features

• Drag-and-drop field ordering
• Four field sections: Available, Display, Hidden, Populated
• Column span configuration (1-6 columns)
• Field preview with icons
• Real-time drag placeholders
• Field search and filtering

State Management

• Tracks original field states for change detection
• Maintains dragging state for UX feedback
• Supports undo capability
• Version comparison (draft vs published)

Data Wire

@wire(getFormWithFieldsVersioned, { formConfigId: '$recordId' })
wiredForm({ error, data }) {
    if (data) {
        this.formConfig = data;
        this.initializeFields();
    }
}

Related Components

• quikFormsStyling - Styling tab child
• quikFormsSettings - Settings tab child
• quikRelatedObjectsManager - Related Objects tab

quikFieldsLibrary

Field catalog management interface for creating and managing reusable form fields.

Purpose

Central repository for all form fields with search, filtering, usage tracking, and bulk operations.

Key Features

• Table view of all FormField__c records
• Search by name, label, ID, object field
• Filter by field type and target object
• Usage tracking (shows count of forms using each field)
• Clone fields for quick duplication
• Delete with usage validation
• Required/used filters

Table Columns

• Name, ID, Label, Type
• Object Field, Target Object
• Required flag
• Used in Forms count
• Last Modified
• Actions (Edit, Clone, Delete)

Field Type Icons

Related Components

• quikFieldEditor - Field creation/editing

FormDefinition__c

Master record for each form definition.

Purpose

Represents a form template with metadata and relationships to versioned configurations.

Key Fields

Relationships

• FormConfigVersion__c - One-to-many relationship (all versions)
• ActiveVersion__c - Lookup to published version

FormConfigVersion__c

Versioned form configuration with complete form settings, styling, and field configuration.

Purpose

Stores complete form configuration including fields, styling, settings, and version control metadata.

Version Lifecycle

• Draft - Unpublished, editable
• Published - Live, publicly accessible
• Archived - Historical version

Key Field Categories

Version Control (7 fields)

• FormDefinition__c (Lookup)
• VersionNumber__c (Decimal)
• Status__c (Picklist: Draft/Published/Archived)
• VersionTag__c (Text)
• PublishedDate__c (DateTime)
• PublishedBy__c (Lookup to User)
• ArchivedDate__c (DateTime)

Form Configuration (6 fields)

• FormType__c (Email/Survey/Record Creation/Chat)
• FormObject__c (Text - Case, Survey__c, etc.)
• Activated__c (Checkbox)
• DisplayFields__c (Long Text - Comma-separated field IDs)
• HiddenFields__c (Long Text - Hidden field values)
• PopulatedFields__c (Long Text - Pre-populated values)

Styling (21 color fields + layout)

• BackgroundColor__c, TextColor__c, ButtonColor__c
• HighlightColor__c, Title_Color__c
• Content_Background_Color__c, Logo_Background_Color__c
• Input_Background_Color__c, Input_Text_Color__c
• Border_Color__c, Input_Border_Color__c
• Gradient_Color_1__c, Gradient_Color_2__c
• Font_Family__c, Border_Radius_Large__c
• Border_Radius_Small__c, Border_Width__c
• Content_Container_Width__c

Display Settings (8 fields)

• Title__c, Subtitle__c, Submit_Label__c
• ConfirmationMessage__c, DescriptionPosition__c
• Logo__c, FavIcon__c

Advanced Features (15+ fields)

• Custom_HTML_Head__c, customHeaderHTML__c, customFooterHTML__c
• Disable_Captcha__c, Disable_Field_Icons__c
• Enforce_In_IFrame__c, Log_User_Browser_Info__c
• reCaptcha_Dark_Mode__c, Show_Language_Picker__c
• Supported_Languages__c (JSON)
• PostSubmitRedirect__c
• ChatSnippet__c + chat-related fields

inputText

Single-line text input field.

Use Cases

• Name, email, phone
• Short answers
• Validated inputs (regex)

Configuration Options

Example Configuration

{
  "Name": "email_field",
  "Label": "Email Address",
  "Type": "inputText",
  "ObjectField": "$EMAIL",
  "IsRequired": true,
  "ValidationRegex": "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$"
}

selectList

Dropdown select field with single-choice options.

Configuration Variants

• selectList - Dropdown
• selectRadio - Radio buttons
• selectCheckboxes - Multiple checkboxes

Options Format

Simple array:

["Option 1", "Option 2", "Option 3"]

Advanced with values:

[
  {"label": "Small", "value": "S"},
  {"label": "Medium", "value": "M"},
  {"label": "Large", "value": "L"}
]

Decorators

• stars - Star rating display
• icons - Icon decorations
• colors - Color-coded options

Other Option

Enable custom text input for "Other" option:

{
  "OtherOption__c": true
}