How to use AP? where do I need to import from?

Jira Development Jira Cloud
1

I am new to jira, I couldnt find the AP object which is showed in connect javascript api modules. how can I import it?

2

Hi @gokhanunsal,

The AP object comes from the all.js library which you can load via:

<script src="https://connect-cdn.atl-paas.net/all.js"></script>

I also recommend going through the getting started guide and maybe some other documentation pages that go into more detail.

Cheers,
Sven

1 Like
3

If you’re using the atlassian-connect-express client library to build your app, this script is inserted into your pages at run time.

I use ACE, so it says I dont need to import anything ; but I always get “ReferenceError: AP is not defined” error; for example I cannot use this one in a jsx file;

AP.user.getCurrentUser(function(user) {
console.log(“The Atlassian Account ID is”, user.atlassianAccountId);
});

4

Are you using custom templates for your iframes / views? As per the README of ACE, they are making the url available for your templates via the hostScriptUrl context parameter.

  • hostScriptUrl : the URL to the Connect JS client. This JS file contains the code that will establish the seamless iframe bridge between the add-on and its parent. It also contains a handful of methods and objects for accessing data through the parent (look for the AP JS object).

In the source, you can see that the main difference between this and inserting the url manually is that this will also work if you are writing a bitbucket app:

function getHostScriptUrl() {
    const JIRACONF_ALL_CDN = "https://connect-cdn.atl-paas.net/all.js";
    const BB_ALL_CDN = "https://bitbucket.org/atlassian-connect/all.js";

    return product.isBitbucket ? BB_ALL_CDN : JIRACONF_ALL_CDN;
  }

Cheers,
Sven

1 Like
5 
import React, { Component } from "react";

AP.user.getCurrentUser(function (user) {
  console.log("The Atlassian Account ID is", user.atlassianAccountId);
});

export default class extends Component {
  render() {
    return <h1>Test</h1>;
  }
}

I have a simple jsx file like this.And layout.hbs file I have imported script:

  <script src="https://connect-cdn.atl-paas.net/all.js" type="text/javascript"></script>

did I miss something?

6

Looks good. Did you check your iframe in your browser to see if everything is correct? I.e. if the script tag actually got rendered into the final HTML and also if the AP object is available in the console context of your iframe?

7

I have noticed that component file is loading before all.js so it cannot find AP then gives error. But if I comment that AP code block, it loads all.js file including AP. how can solve this? thanks…

8

Maybe you could share your template with us? One way to achieve this can be to simply put the all.js script tag before your own.

Alternatively, you could also do the following which I’ve shamelessly stolen from @remie:

const waitForAP = async () => {
  let count = 0;
  while (!AP || count > 10) {
    await new Promise((resolve) => setTimeout(resolve, 200));
    count++;
  }
  if (!AP) {
    throw new Error('Atlassian Javascript API (AP) is not available, please verify if you have added a reference to `all.js`');
  }
  return AP;
};

Cheers,
Sven

1 Like