Create Address Autofill and Validation in Model-Driven Apps Using PCF Control (Google Maps Places API)

How to Create Address Autofill and Validation in Model-Driven Apps Using PCF Control

Model-Driven Apps in Microsoft Power Platform provide a robust way to deliver enterprise solutions. However, custom functionalities like address autofill and validation require extending the default capabilities using PowerApps Component Framework (PCF). In this blog, we will walk through creating an Address Autofill and Validation PCF control step-by-step.

Prerequisites

Ensure you have the following tools before starting:

• Node.js
• Power Platform CLI
• Visual Studio Code (my preferred IDE)
• Dataverse Environment
• API for Address Data (e.g., Google Maps API)

Step 1: Set Up Your Development Environment

// Install Node.js and Power Platform CLI
npm install -g pac

// Create a New PCF Control Project
pac pcf init --namespace AddressAutofill --name AddressAutofillControl --template field

// Navigate to the Project Directory
cd AddressAutofillControl

// Install Dependencies
npm install
        

Step 2: Design the Control

Edit ControlManifest.Input.xml to define properties:

<property name="address" display-name-key="address" type="SingleLine.Text" usage="bound" />
<property name="validatedAddress" display-name-key="validatedAddress" type="SingleLine.Text" usage="output" />

<resources>
    <js path="AddressAutofillControl/index.js" order="1" />
    <css path="AddressAutofillControl/style.css" order="1" />
</resources>
        

Step 3: Add Address Autofill Functionality

Install and configure Google Maps Places API:

// Install the API
npm install @googlemaps/js-api-loader

// Import and initialize the API
import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
    apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
    version: 'weekly',
    libraries: ['places'],
});
        

Create the input field:

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {
    const inputElement = document.createElement('input');
    inputElement.id = 'addressInput';
    inputElement.type = 'text';
    inputElement.placeholder = 'Enter your address';
    container.appendChild(inputElement);

    loader.load().then(() => {
        const autocomplete = new google.maps.places.Autocomplete(inputElement);
        autocomplete.addListener('place_changed', () => {
            const place = autocomplete.getPlace();
            if (place.formatted_address) {
                context.parameters.address.raw = place.formatted_address;
                notifyOutputChanged();
            }
        });
    });
}
        

Step 4: Add Address Validation Logic

Define and integrate validation logic:

// Validation function
private validateAddress(address: string): boolean {
    const regex = /^[A-Za-z0-9\s,.-]+$/;
    return regex.test(address);
}

// Highlight validation status
public updateView(context: ComponentFramework.Context<IInputs>): void {
    const inputField = document.getElementById('addressInput') as HTMLInputElement;
    const address = context.parameters.address.raw;

    if (this.validateAddress(address)) {
        inputField.style.borderColor = 'green';
    } else {
        inputField.style.borderColor = 'red';
    }
}
        

Step 5: Build and Test the PCF Control

// Build the control
npm run build

// Test locally using the harness
npm start
        

Step 6: Deploy the PCF Control to Dataverse

// Add the control to a solution
pac solution add-reference --path ./AddressAutofillControl

// Publish the solution
pac solution publish
        

Step 7: Integrate the PCF Control into the Model-Driven App

In the form editor, add the PCF control to the desired field, configure properties, and publish the changes.