Skip to main content

Drawer Form with Address Lookup Integration

Description​

This screen demonstrates a drawer-style detail view with integrated address lookup functionality. The Customer Create Drawer showcases how to build forms that interact with external services for address validation and autocomplete. It includes multiple queries for address suggestions, formatted address retrieval, and sales channel lookups. This pattern is ideal for creating slide-out forms that maintain context while providing rich data entry experiences with external API integration.

Use Case​

Used in a CRM system to create new customer records with validated addresses. The drawer slides out from the side, allowing users to search for addresses with autocomplete suggestions, retrieve properly formatted addresses with postal codes, and link customers to sales channels. The address lookup integration ensures data quality and reduces manual entry errors.

Key Features​

  • Drawer-style form for contextual data entry
  • Address autocomplete with suggestion API
  • Formatted address retrieval with global address keys
  • Country-specific address validation
  • Sales channel lookup by code
  • Parameter passing between queries
  • Component-based architecture for flexible layouts
  • Integration with external address validation services

JSON Definition​

{
  "head": {
    "title": "Customer create drawer",
    "key": "customer_create_drawer",
    "route": "/customer-create-drawer",
    "app": "crm",
    "description": "Customer create drawer"
  },
  "screenType": "detailView",
  "components": {
    "ROOT": {
      "type": {
        "resolvedName": "PageRoot"
      },
      "isCanvas": true,
      "props": {},
      "displayName": "Container",
      "custom": {},
      "parent": "",
      "hidden": false,
      "nodes": [],
      "linkedNodes": {}
    }
  },
  "queries": [
    {
      "name": "searchAddressSuggestions",
      "queryKey": "searchaddresssuggestions",
      "userParams": {
        "address": "{{address}}",
        "countryISO": "{{countryISO}}"
      }
    },
    {
      "name": "getFormattedAddressWithKey",
      "queryKey": "getformattedaddresswithkey",
      "userParams": {
        "global_address_key": "{{global_address_key}}"
      }
    },
    {
      "name": "createCustomer",
      "queryKey": "createcustomer"
    },
    {
      "name": "getSalesChannelByCode",
      "queryKey": "getsaleschannelbycode",
      "userParams": {}
    }
  ]
}

Notes​

  • Drawer forms maintain parent context while providing focused data entry
  • Address lookup queries can be chained for progressive enhancement
  • The {{}} syntax in userParams allows dynamic parameter injection
  • Empty userParams objects can be populated at runtime
  • The component architecture supports custom form layouts
  • External API integration provides real-time validation
  • This pattern reduces data quality issues through validated address entry