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.
