This is a follow-up post for using Google Maps API with the TypeAhead Block in OmniScript, on this post we are going to learn how to auto-populate the input fields based on what was selected from the Type Ahead block.

After you have implemented the Google Maps API key in OmniScript, we need to perform the following:

• Enable Edit Mode on the Type Ahead Properties
• Creating a Google Mapping Transformation
• Add the input fields to the Type Ahead Block

Enable Edit Mode on the Type Ahead Properties

Click on the Type Ahead Block and tick the checkbox for Edit Mode. ( this will show the input fields without the user clicking on the pencil icon).

Creating a Google Mapping Transformation

We need to create additional mapping based on the Response JSON. (Check the Action Debugger)

{
  "address_components": [
    {
      "long_name": "11",
      "short_name": "11",
      "types": [
        "street_number"
      ]
    },
    {
      "long_name": "Liverpool Street",
      "short_name": "Liverpool St",
      "types": [
        "route"
      ]
    },
    {
      "long_name": "Auckland CBD",
      "short_name": "Auckland CBD",
      "types": [
        "sublocality_level_1",
        "sublocality",
        "political"
      ]
    },
    {
      "long_name": "Auckland",
      "short_name": "Auckland",
      "types": [
        "locality",
        "political"
      ]
    },
    {
      "long_name": "Auckland",
      "short_name": "Auckland",
      "types": [
        "administrative_area_level_1",
        "political"
      ]
    },
    {
      "long_name": "New Zealand",
      "short_name": "NZ",
      "types": [
        "country",
        "political"
      ]
    },
    {
      "long_name": "1010",
      "short_name": "1010",
      "types": [
        "postal_code"
      ]
    }
  ],
  "formatted_address": "11 Liverpool Street, Auckland CBD, Auckland 1010, New Zealand",
  "geometry": {
    "location": {
      "lat": -36.8565497,
      "lng": 174.7637478
    },
    "viewport": {
      "northeast": {
        "lat": -36.8551357197085,
        "lng": 174.7649575802915
      },
      "southwest": {
        "lat": -36.8578336802915,
        "lng": 174.7622596197085
      }
    }
  },
  "name": "11 Liverpool Street",
  "types": [
    "premise"
  ],
  "vicinity": "Auckland CBD",
  "place_id": "ChIJHeF8PeZHDW0RK7DHooAaFFM"
}

Create the new mapping. Click on the Type Ahead block to edit the properties. Under Google Maps Transformation click on new mapping.

Enter a name for the Child Element and mapping form the Google Response Node.

Some examples below.

Add the input fields to the Type Ahead Block

Next, I’m not sure if this is a bug, but I am not able to drop input fields in the TypeAhead block unless I add an Action element first. We won’t be using the Action element you can set it Inactive.

Add the input fields and make sure the Name matches the mapping node.

Note: Text fields should map to text and numeric fields like the latitude and the longitude nodes should map to Number input field.

Summary

That should be it. Test by previewing your changes. You have learned how to map the response nodes to input fields in an OmniScript.

Hope you like this tutorial. Enjoy! Hit the comments section below if you face any issues.