How to insert Google API script - Jira Cloud - Forge - React

[splinterface]

Greetings,

To use Google places API on CREATE and EDIT screens in Jira Cloud, I need to insert a script onto the page - as per Google Guidelines:

The Places service is a self-contained library, separate from the main Maps JavaScript API code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL:

<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY**&libraries=places** &callback=initMap">
</script>

I have a custom field defined in my manifest.yml as:

  jira:customFieldType:
    - key: customfield-key
      name: Name of Field
      description: Description of Field
      type: string
      function: renderField

This is a very basic example, but the custom field returns something like:

  return (
    <>
    <CustomField>
      <Text content={`${fieldValue}`}/>
    </CustomField>
    <script async
        src="https://maps.googleapis.com/maps/api/js?key=abc123&libraries=places&callback=initMap">
    </script>
    </>
  );

but when the field is rendered, it gives this error:

TypeError: Cannot convert a Symbol value to a string

Is there a proper way to add this Google script to a custom field in Jira Cloud / Forge / React?

Thank You

[mpaisley]

Hi @splinterface,

Is there any reason you wanted to do this within a custom field?

I think the issue you’re running into is that custom fields need to be populated with a predefined data type as per https://developer.atlassian.com/platform/forge/manifest-reference/modules/jira-custom-field/#data-types and I don’t think a script is a valid string for this purpose.

I think a better way of implementing this might be using the Jira issue view background script Module.

I hope this helps!
Cheers,
Melissa

[splinterface]

Hello @mpaisley , somehow I missed your update, thank you.
To answer your first question, I have an app on Jira Data Center that introduces a custom field that is ‘googe-enabled’ to predict an address as you type - like what we see on a web form everyday.

Now I want to do this on cloud but obviously have to do it very differently and I don’t have a guide so I’m stumbling a bit on this.

@mpaisley Thank you for the link, this looks promising but would it only work for issue VIEW? I need to predict the address as the user enters an address on the CREATE and EDIT screens.

Example with map:

Example without map: