Error Rendering

Support
1

Hi,

I’m trying to test a form I just created, and I get an error with two fields.
Error rendering field Do you approve AI to f… [truncated], see console for more verbose information

Error rendering field Address, see console for more verbose information

Where can I see the console to understand better the rendering issue?

Thanks

2

Hi chef,

To access the console, right-click anywhere on the page and select “Inspect”, then navigate to the “Console” tab in the developer tools panel.

You may also run the application by clicking “Run with Inspector” in Five.

1 Like
3

Thank you for the prompt response.

This is the error I’m getting:" Error rendering field Address, see console for more verbose information"

The type of this field is _AddressLookup. I’d like to implement an auto-address completed, based on location (given user gives permission).

The only partly related error I see in the console is this:

main.js:205 Unknown field type : E
main.js:205 ReferenceError: google is not defined
at e (eval at (main.js:205:4738978), :46:10099)
at eval (eval at (main.js:205:4738978), :46:10429)
at Fc (main.js:205:3379686)
at t.unstable_runWithPriority (main.js:205:3397612)
at Wo (main.js:205:3320321)
at Rc (main.js:205:3379149)
at gc (main.js:205:3370677)
at main.js:205:3320544
at t.unstable_runWithPriority (main.js:205:3397612)
at Wo (main.js:205:3320321)
cs @ main.js:205Understand this errorAI
main.js:205 ReferenceError: google is not defined
at e (eval at (main.js:205:4738978), :46:10099)
at eval (eval at (main.js:205:4738978), :46:10429)
at Fc (main.js:205:3379686)
at t.unstable_runWithPriority (main.js:205:3397612)
at Wo (main.js:205:3320321)
at Rc (main.js:205:3379149)
at gc (main.js:205:3370677)
at main.js:205:3320544
at t.unstable_runWithPriority (main.js:205:3397612)
at Wo (main.js:205:3320321)
main.js:205 ObjectcomponentStack: “\n at t.default (eval at (Five), :1:190968)\n at div\n at S (Five)\n at Five at DZCustomField (Five)\n at m (Five)\n at t (Five)\n at div\n at t (Five)\n at t (Five)\n at m (Five)\n at div\n at S (Five)\n at Five at div\n at S (Five)\n at Five at div\n at t.default (Five)\n at t (Five)\n at m (Five)\n at div\n at t (Five)\n at m (Five)\n at div\n at div\n at div\n at S (Five)\n at Five at z (Five)\n at m (Five)\n at t (Five)\n at m (Five)\n at div\n at S (Five)\n at Five at div\n at S (Five)\n at Five at main\n at div\n at div\n at t (Five)\n at m (Five)\n at div\n at S (Five)\n at Five at t (Five)\n at t (Five)\n at m (Five)\n at main\n at div\n at S (Five)\n at Five at div\n at S (Five)\n at Five at K (Five)\n at Suspense\n at h (Five)\n at l (Five)\n at d (Five)\n at V (Five)\n at a (Five)\n at div\n at t (Five)\n at m (Five)\n at l (Five)\n at h (Five)”[[Prototype]]: Object
main.js:205 Unknown field type : E

Thanks again.

4

Hello,

Unfortunately you will not be able to necessarily do ‘Auto-Address’ completion within Five’s default fields, you can however, use an external API such as Google Maps Auto Complete API to achieve this.

Alternatively, you could also include multiple text fields which include of different address features (such as address line 1, state, city, etc) to increase user accuracy, however, this will not be ‘auto-complete’ as such.

Let me know if you would like some further links to the Google Maps API!

Thanks,
Riley.

1 Like
5

Thank you.

I do have several fields for the address, including city, state, zip code and country.

I would love a further explanation on how to connect to the Google Maps API to connect the auto-complete address in my form.

Thank you!

6

Hi @chef,

To link the Google Maps API with the _AddressLookup field:

  1. Set up the API key:
    • Navigate to Setup > Instances and select the instance record.
    • Under the General tab, add an entry in the Options field.
      Key: GOOGLEMAPS_API_KEY
      Value: Paste the API key you obtained from your Google account.
  2. Create a screen field (process, form, etc) and set its display type to _AddressLookup.

The screen field will then do all the work automatically. If you need to get additional details from Google Maps, you can do so by accessing the metadata by attaching a function to the OnExit event. Below is an example of the OnExit function:

function AddressOnExit(five, context, result) {

five.field.Suburb = five.getMetadata('Address', 'locality');
five.field.Postcode = five.getMetadata('Address', 'postal_code');

return five.success(result);

}

Thanks.

7

Thank you for the reply.

image
image1080×518 44.3 KB

For some reason, I am only getting Australia’s locations. I assume the API is taking the location from the server, which is located in Australia (your HQ I assume).

Also, in my previous setup through Wordpress, the website would ask the user to use his current location, and it would fill the address from the user’s locations. Can I implement that in my form?

Thank you.

8

Hello,

Within the same section that you added the option GOOGLEMAPS_API_KEY, you will also need to add GOOGLEMAPS_TYPES and GOOGLEMAPS_COUNTRY.

For GOOGLEMAPS_TYPES, look at: Place Types  |  Maps JavaScript API  |  Google for Developers

For GOOGLEMAPS_COUNTRY, look at (note: you can parse an array of countries for the option):

EXAMPLE
GOOGLEMAPS_API_KEY: ‘your key’
GOOGLEMAPS_TYPES: electrician, bar, fire_station
GOOGLEMAPS_COUNTRY: au

Regarding your second question (within your Wordpress application), we do not currently support this but I have passed it on to be discussed within our weekly product review meeting!

Hope this helps!

Thanks,
Riley.