Skip to main content

Notifications

Announcements

No record found.

Service | Customer Service, Contact Center, Fie...
Suggested answer

D365 Field Service Mobile app - Postcode lookup

Posted on by 5

Fields Service Mobile app: I have a requirement such that when a user enters a postcode it should pull out the address details using some web API and populate the address fields on my entity. We have this functionality working in CRM side but I do not know how to integrate that with the Field app - Woodford Resco Mobile. Has anyone worked on something similar and has any inputs for me?

  • Meena Padha Profile Picture
    Meena Padha 5 on at
    RE: D365 Field Service Mobile app - Postcode lookup

    Thanks Thomas. I believe this would be really useful. On CRM side we are using something different than https://getaddress.io/, it looks like some custom code to achieve the same.

    Apart from the code above is there anything else you had to do to integrate https://getaddress.io/ to the mobile app?

    Also what is postcode.min.js, is it part of getaddressio API?

    Is it possible for you to list down the steps (briefly) -

    How to integrate/use https://getaddress.io/ API and what changes/hooks are required on the mobile app?

    Thanks

  • Suggested answer
    Thomas David Dayman Profile Picture
    Thomas David Dayman 11,323 on at
    RE: D365 Field Service Mobile app - Postcode lookup

    I have done this in the past using a HTML page embedded inside a form. I think I used this API - https://getaddress.io/

    I have pasted the code below. Its a little crude but you can use it as reference. 

    If you wanted to use what I did below then you would need to download the jquery.min.js file and also a local copy of the api code so it can work offline.

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="LiberationSans-Regular">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Post Code Lookup</title>
    <meta name="viewport" content="initial-scale=1, minimum-scale=1, user-scalable=false">
    <script type="text/javascript" src="JSBridge.js" ></script>
    <script type="text/javascript" src="jquery.min.js" ></script>
    <style type="text/css">
    @font-face {
    font-family: LiberationSans-Regular;
    src: url(LiberationSans-Regular.ttf);
    }
    input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 2px; /* Some padding */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 2px; /* Add a top margin */
    margin-bottom: 2px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
    }
    /* Style the submit button with a specific background color etc */
    input[type=submit] {
    background-color: #0066CC;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    }
    /* When moving the mouse over the submit button, add a darker green color */
    input[type=submit]:hover {
    background-color: #45a049;
    }
    /* Add a background color and some padding around the form */
    .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    }
    label {
    font-size: 14px;
    }
    body {
    font-family: LiberationSans-Regular;
    }
    #setAddress {
    background-color: #0066CC;
    color: #FFFFFF;
    border: none;
    }
    #idpc_button
    {
    background-color: #0066CC;
    color: #FFFFFF;
    border: none;
    }
    </style>
    </head>
    <body>
    <div id="lookup_field"></div>
    </br>
    <!-- Add to your existing form -->
    <label>First Address Line: </label>
    <input id="first_line" type="text"/>
    <label>Second Address Line: </label>
    <input id="second_line" type="text"/>
    <label>Town: </label>
    <input id="post_town" type="text"/>
    <label>Postcode: </label>
    <input id="postcode" type="text"/>
    <label>Latitude: </label>
    <input id="latitude" type="text"/>
    <label>Longitude: </label>
    <input id="longitude" type="text"/>
    <button type="button" id="setAddress" onclick="setAddressBuilding();setAddressLine1();
    setAddressCity();setAddressPostcode();
    setAddressLong(); setAddressLat();">Set Address</button>
    <script type="text/javascript" src="postcodes.min.js"></script>
    <script type="text/javascript">
    // Add this after your form
    $('#lookup_field').setupPostcodeLookup({
    // Add your API key
    api_key: 'ADD API KEY HERE',
    // Identify your fields with CSS selectors
    output_fields: {
    line_1: '#first_line',
    line_2: '#second_line',
    post_town: '#post_town',
    postcode: '#postcode',
    longitude: '#longitude',
    latitude: '#latitude'
    }
    });
    </script>
    <script type="text/javascript">

    function setAddressBuilding()
    {

    MobileCRM.UI.EntityForm.requestObject(
    function(entityForm){

    var addressline1 = document.getElementById("first_line").value;
    var addressline2 = document.getElementById("second_line").value;

    if(addressline1 && addressline2)
    {
    entityForm.entity.properties["address_building"] = addressline1;
    entityForm.entity.properties["address_line1"] = addressline2;
    }
    },
    MobileCRM.bridge.alert, null);
    }

    function setAddressLine1()
    {

    MobileCRM.UI.EntityForm.requestObject(
    function(entityForm){

    var addressline1 = document.getElementById("first_line").value;
    var addressline2 = document.getElementById("second_line").value;

    if(addressline1 && !addressline2)
    {
    entityForm.entity.properties["address_line1"] = addressline1;
    }

    },
    MobileCRM.bridge.alert, null);
    }

    function setAddressCity()
    {

    MobileCRM.UI.EntityForm.requestObject(
    function(entityForm){

    var addresstown = document.getElementById("post_town").value;

    if(addresstown)
    {
    entityForm.entity.properties["address_city"] = addresstown;
    }

    },
    MobileCRM.bridge.alert, null);
    }
    function setAddressPostcode()
    {

    MobileCRM.UI.EntityForm.requestObject(
    function(entityForm){

    var addresspostcode = document.getElementById("postcode").value;

    if(addresspostcode)
    {
    entityForm.entity.properties["address_postalcode"] = addresspostcode;
    }

    },
    MobileCRM.bridge.alert, null);
    }
    function setAddressLong()
    {

    MobileCRM.UI.EntityForm.requestObject(
    function(entityForm){

    var addresslong = document.getElementById("longitude").value;

    if(addresslong)
    {
    entityForm.entity.properties["address1_longitude"] = addresslong;
    }

    },
    MobileCRM.bridge.alert, null);
    }
    function setAddressLat()
    {

    MobileCRM.UI.EntityForm.requestObject(
    function(entityForm){

    var addresslat = document.getElementById("latitude").value;

    if(addresslat)
    {
    entityForm.entity.properties["address1_latitude"] = addresslat;
    }

    },
    MobileCRM.bridge.alert, null);
    }
    </script>
    </body>
    </html>

  • Suggested answer
    ba365guy Profile Picture
    ba365guy 2,946 on at
    RE: D365 Field Service Mobile app - Postcode lookup

    Exact functionality is not available in the guide. Based on the JSBridge customization needs to be implemented.

    Did you look at the Fetch (www.resco.net/.../

    You can also look at the sample QR code reader html page in  D365 field service app to see how to implement the customization (fetch and populate). This will give you an idea.

  • Meena Padha Profile Picture
    Meena Padha 5 on at
    RE: D365 Field Service Mobile app - Postcode lookup

    I had a look at the JSBridge guide and can't seem to locate any related info about postcode lookup search. Can you pls let me know which section does mention that?

  • Suggested answer
    ba365guy Profile Picture
    ba365guy 2,946 on at
    RE: D365 Field Service Mobile app - Postcode lookup

    You can implement this using JSBridge.

    Please refer the documentation here: www.resco.net/.../

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,280 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,235 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans