Document UI Schema loading mechanism

[Copilot]

The UI Schema defines all form fields, validation rules, and rendering configuration for the demographic data capture process. This PR documents how it loads and processes through the application stack.

Loading Flow

// 1. App initialization loads base configuration
AppConfigService.loadAppConfig()  // reads config.json
  → BASE_URL + PRE_REG_URL

// 2. Component requests schema
DataStorageService.getIdentityJson()
  → GET {BASE_URL}{PRE_REG_URL}uispec/latest

// 3. Process and filter fields
DemographicComponent.getIdentityJsonFormat()
  → Extract identity fields
  → Filter by inputRequired
  → Set alignment groups
  → Fetch dynamic field values

API Endpoint: https://api-internal.niradev.idencode.link/preregistration/v1/uispec/latest

Schema Structure

{
  "response": {
    "jsonSpec": {
      "identity": {
        "identity": [{
          "id": "fullName",
          "labelName": { "eng": "Full Name", "ara": "...", "fra": "..." },
          "controlType": "textbox|dropdown|fileupload|ageDate",
          "fieldType": "default|dynamic",
          "validators": [{ "validator": "[a-zA-Z ]+$", "errorMessageCode": "UI_1000" }],
          "visibleCondition": { /* json-rules-engine syntax */ }
        }],
        "locationHierarchy": ["region", "province", "city", "zone", "postalCode"]
      }
    }
  }
}

Documentation Delivered

• UI_SCHEMA_QUICK_REFERENCE.md - Developer quick reference with common tasks, troubleshooting, API endpoints
• UI_SCHEMA_LOADING_DOCUMENTATION.md - Complete technical flow, schema structure, component patterns
• UI_SCHEMA_FLOW_DIAGRAM.md - Visual ASCII flow with component interactions and data structures

Code Documentation

Enhanced JSDoc comments in:

• AppConfigService.loadAppConfig() - Configuration initialization
• DataStorageService.getIdentityJson() - Schema fetch with endpoint details
• DemographicComponent.getIdentityJsonFormat() - Schema processing steps

Key Capabilities

• Multi-language support (eng, ara, fra)
• Dynamic validation via regex patterns
• Conditional visibility using json-rules-engine
• Location hierarchy for address fields
• Control types: textbox, dropdown, fileupload, ageDate, button
• Dynamic field values from masterdata APIs
• Transliteration support

Components Consuming Schema

Component	Usage
DemographicComponent	Renders all form fields with validation
FileUploadComponent	Filters controlType: "fileupload" fields
PreviewComponent	Displays data with localized labels
CenterSelectionComponent	References location hierarchy

Original prompt

Find out how UI Schema is loading

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.