Address Field Type

Description:
The address field type is designed to capture detailed address information with integrated Google Maps Places Autocomplete functionality. It enhances user experience by providing real-time address suggestions as users type, ensuring standardized and accurate address entries.

YAML Definition 

- name: shipping_address
  type: address
  display_name: "Shipping Address"
  guidance: "Enter the complete shipping address."
  required: true
  api_key: "YOUR_GOOGLE_MAPS_API_KEY"
  country_list:
    - "us"
    - "ca"
    - "uk"

Attributes

In addition to the standard field attributes, the address field type includes the following specific attributes:

  • api_key (string): Required.
    Your Google Maps API key used for the Places Autocomplete functionality. Ensure that the API key has the necessary permissions for the Places API.

  • country_list (string[]): Optional.
    An array of country codes to restrict autocomplete suggestions to specific countries.
    Default: ["uk"]

Example 

- name: billing_address
  type: address
  display_name: "Billing Address"
  guidance: "Please provide your billing address."
  required: true
  api_key: "YOUR_GOOGLE_MAPS_API_KEY"
  country_list:
    - "us"
    - "ca"

Implementation Details

The address field type leverages a custom Vue.js component to provide an enhanced user interface for address input. This component integrates with the Google Maps Places Autocomplete API to offer dynamic address suggestions and ensure data consistency.

Vue.js Address Field Component Overview

Key Features:

  • Autocomplete Integration: Utilizes Google Maps Places Autocomplete to provide address suggestions as the user types.
  • Clear Functionality: Allows users to clear the entered address with a clear button.
  • Responsive Design: Supports both embedded and non-embedded layouts to fit different UI contexts.
  • Event Handling: Emits events when the address is updated or cleared to synchronize data with parent components.

Component Structure:

  • Template: Contains the input field for address entry, clear button, and search icon. Adjusts layout based on the embedded property.
  • Script: Manages data binding, initializes the Google Maps Autocomplete, and handles events such as place selection and clearing the address.
  • Styles: Defines styles for the address input field in both embedded and non-embedded contexts.

Key Props and Data:

  • field: Object containing field configuration.
  • data: Current value of the address field.
  • embedded: Boolean indicating if the field is in an embedded layout.
  • apiKey: Google Maps API key, retrieved from user account settings or default value.
  • countryList: List of country codes to restrict address suggestions.

Computed Properties:

  • address: Getter and setter for the address value. Handles formatting and updates to the parent component.
  • addressId: Unique identifier for the address input element, useful for referencing in the DOM.
  • fieldLabel: The display label for the field, derived from display_name or the field’s name.
  • readonly: Determines if the field should be read-only based on the readonly attribute.

Methods:

  • init(): Initializes the Google Maps Autocomplete functionality with the specified API key and country restrictions.
  • clearAddress(): Clears the address input and emits an event to update the parent component.
  • handlePlaceChanged(): Handles the event when a user selects an address from the autocomplete suggestions. Parses the returned place data and updates the address.

Dependencies:

  • Google Maps API: Ensure you have a valid API key with the Places API enabled.
  • Vuex: Used for state management, particularly for accessing the current user’s account information.
  • Helpers: Utility functions for tasks like formatting field labels.

Important Notes:

  • API Key Security: Always ensure that your Google Maps API key is securely managed and not exposed publicly.
  • Country Restrictions: Use the country_list attribute to limit address suggestions to relevant countries, improving user experience and performance.
  • Error Handling: The component includes error handling for cases where the API key or country list is not found, defaulting to preset values.

By integrating the address field type into your schema, you can provide users with an intuitive and efficient way to enter address information, leveraging the power of Google Maps to ensure accuracy and consistency.

Copyright © 2024 Caseblocks Limited.