By Ayush Dahiya
How to Customize Address
Fields for Bing Maps in
Dynamics 365 CE
Bing Maps integration in Dynamics 365 Customer Engagement (CE) offers an intuitive way to visualize customer locations on entity forms like Contacts, Accounts, and Leads. However, out-of-the-box, Bing Maps relies on Address 1 and Address 2 fields, which include text fields for state, country, and other address details. This presents a challenge when clients require structured data, like dropdowns, for address components such as the state field.
In this blog, I will explain how to enable Bing Maps, what address fields it uses, and provide a workaround for situations where dropdowns or custom fields are needed. By leveraging custom fields and JavaScript, you can ensure the user selects from dropdowns, and Bing Maps gets the correct address information without disrupting the default behavior.
Enabling Bing Maps in Dynamics 365 CE
Before customizing address fields, ensure that Bing Maps is enabled in your Dynamics 365 CE environment. Follow these steps:
1. Navigate to Admin Center: Go to the Power Platform Admin Center.
2. Enable Bing Maps:
– Select the appropriate environment.
– UnderFeatures, toggle Bing Maps integration to “On.”
Once enabled, Bing Maps automatically displays on entity forms that contain the default address fields.
Default Address Fields Used by Bing Maps
By default, Bing Maps in Dynamics 365 CE is tied to two sets of address fields: Address 1 and Address 2. Each set includes several fields like:
Address 1:
- Street 1, Street 2, Street 3
- City
- State/Province
- Postal Code
- Country/Region
Address 2:
- Similar fields for a secondary address.
These fields are text-based, meaning users must manually enter values such as the state, country, or city. This can lead to data entry inconsistencies and may not satisfy clients who require structured data inputs, like dropdowns for state or country.
Customization Challenge: Dropdowns for Address Fields
When clients want dropdown options (Option Sets) for fields like State or Country, the default address fields don’t accommodate this need. Simply replacing the Address 1 or Address 2 fields with custom fields won’t work, as Bing Maps requires those default address fields for geolocation.
Workaround: Custom Address Fields and JavaScript
To solve this problem, the best approach is to create new custom fields (e.g., dropdowns for states or countries), hide the default Address 1 and Address 2 fields from users, and use JavaScript to copy the values from the custom fields back into the corresponding Address 1 or Address 2 fields for Bing Maps to function correctly.
Here’s how you can implement this workaround:
Step 1: Create Custom Address Fields
1. Go to Solution Explorer in Dynamics 365.
2. Create New Fields for the entity (e.g., Account, Contact, or Lead). You will need custom fields for:
- Street 1, Street 2, Street 3
- City
- State (Option Set)
- Postal Code
- Country (Option Set)
3. Add the Custom Fields to the Form:
- Edit the entity form (e.g., Account form).
- Add all your custom address fields (e.g., custom_street1, custom_state, custom_country) to the form.
- Make sure to hide the defaultAddress 1 and Address 2fields from the user.
4. Save and Publish the changes.
Step 2: Use JavaScript to Copy Custom Fields to Address 1/2 Fields
Since Bing Maps only works with Address 1 and Address 2 fields, you need to copy the values from the custom fields into those fields behind the scenes. This can be achieved using JavaScript.
1. Create a JavaScript Web Resource:
- In Solution Explorer, create a newWeb Resource and select JavaScript(JScript) as the type.
2. Write the JavaScript Code:
Here’s an example of JavaScript that copies values from custom fields into the default Address 1 fields:
function copyCustomAddressToDefault(executionContext) {
var formContext = executionContext.getFormContext();
// Copy custom address fields to Address 1 fields used by Bing Maps
var street1 = formContext.getAttribute("custom_street1").getValue();
var city = formContext.getAttribute("custom_city").getValue();
var state = formContext.getAttribute("custom_state").getText(); // Option Set Text
var postalCode = formContext.getAttribute("custom_postalcode").getValue();
var country = formContext.getAttribute("custom_country").getText(); // Option Set Text
// Copy values into Address 1 fields
formContext.getAttribute("address1_line1").setValue(street1);
formContext.getAttribute("address1_city").setValue(city);
formContext.getAttribute("address1_stateorprovince").setValue(state);
formContext.getAttribute("address1_postalcode").setValue(postalCode);
formContext.getAttribute("address1_country").setValue(country);
// Optional: If using Address 2, apply the same logic
// formContext.getAttribute("address2_line1").setValue(street1);
// formContext.getAttribute("address2_city").setValue(city);
// formContext.getAttribute("address2_stateorprovince").setValue(state);
// formContext.getAttribute("address2_postalcode").setValue(postalCode);
// formContext.getAttribute("address2_country").setValue(country);
}
3. Attach the JavaScript to the Form:
- Open the form editor.
- Add the JavaScript web resource to the form.
- Bind the copyCustomAddressToDefault function to theOnChange event of each custom address field (e.g., custom_street1, custom_state, custom_country).
4. Save and Publish the form.
Step 3: Hide Default Address Fields and Display Custom Fields to Users
Now that the custom fields are set up to synchronize with Address 1 and Address 2, you can hide the default fields from the users:
- Hide Default Address 1/Address 2 Fields: In the form editor, set the default address fields to hidden.
- Display Custom Fields: Make sure that only your custom fields are visible on the form.
Step 4: Test the Solution
1. Navigate to the Entity Form (e.g., Account or Contact).
2. Fill Out the Custom Address Fields.
- Select the state, country, and enter other address details using the custom fields.
- The JavaScript will automatically copy these values into the hidden Address 1 or Address 2 fields, ensuring Bing Maps gets the correct data.
3. Check the Bing Maps Display:
- After saving the record, Bing Maps will correctly display the location based on the values in the Address 1 or Address 2 fields, which were populated from the custom fields.
Final Thoughts
Although Dynamics 365 CE does not natively support using Option Sets or other field types directly in the default Address 1 and Address 2 fields for Bing Maps, this workaround offers a clean solution. By creating custom fields, copying their values using JavaScript, and hiding the default fields, you can meet client requirements for structured input (e.g., dropdowns for state and country) while maintaining the Bing Maps functionality.
This approach allows you to achieve both flexibility and functionality without compromising the user experience or data consistency.
Featured Insights
Stay Informed with ITKnocks'
Latest Technical Articles
Let's Shape the Future Together!
Ready to shape the future of your business? Connect with ITKnocks, your catalyst for innovation. Let’s collaborate and transform possibilities into reality. Contact us, and let the possibilities unfold!