Last updatedApr 9, 2020

Rate this page:

Part 2: Call a Confluence API

This step describes how to call a Confluence API from your Forge app and check the app logs. The goal is to call the Confluence Cloud REST API to get the comments on a page.

This is part 2 of 3 in this tutorial. Complete Part 1: Build a Confluence hello world app before working on this page.

Call a Confluence API

Modify your app’s code to call the Confluence REST API to get the comments on a page. You’ll use the Product Fetch API in the runtime to make the REST call. The runtime API simplifies some operations, including HTTP calls. You’ll also use a Forge UI hook to get context information about the page the app is on.

  1. In the app’s top-level directory, install the npm package dependency.

    1
    npm install @forge/api
  2. Navigate to the src directory and open the index.jsx file.

  3. Import the runtime API by adding the following to the top of the file.

    1
    import api from "@forge/api";
  4. Create a function that uses api from the runtime API to call the Confluence REST API by adding the following code below the import statement:

    1
    2
    3
    4
    5
    6
    7
    8
    const fetchCommentsForContent = async (contentId) => {
      const res = await api
        .asApp()
        .requestConfluence(`/wiki/rest/api/content/${contentId}/child/comment`);
    
      const data = await res.json();
      return data.results;
    };

    This function takes the contentId for a page to call the REST API with path /rest/api/content/{contentId}/child/comment. Using the asApp function means the request is made on behalf of you, the owner of the app. If you want the request made by the page viewer, use the asUser function.

  5. Use the Forge UI hook useProductContext to get the contentId to call fetchCommentsForContent.

    1. Add useProductContext to the import statement as shown below:

      1
      import ForgeUI, { render, Fragment, Text, useProductContext } from "@forge/ui";
    2. Add the following code to the App function directly before the return statement:

      1
      const context = useProductContext();
  6. Fetch the comments for the page and log the output in the App function.

    1. Add the Forge UI hook useState to the import statement.
    2. Add the following code to the App function directly above the return statement:

      1
      2
      3
      const [comments] = useState(async () => await fetchCommentsForContent(context.contentId));
      
      console.log(`Number of comments on this page: ${comments.length}`);

Your index.jsx file should look like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import api from "@forge/api";
import ForgeUI, { render, Fragment, Text, Macro, useProductContext, useState } from '@forge/ui';

const fetchCommentsForContent = async (contentId) => {
  const res = await api
    .asApp()
    .requestConfluence(`/wiki/rest/api/content/${contentId}/child/comment`);

  const data = await res.json();
  return data.results;
};

const App = () => {
  const context = useProductContext();
  const [comments] = useState(async () => await fetchCommentsForContent(context.contentId));

  console.log(`Number of comments on this page: ${comments.length}`);

  return (
    <Fragment>
      <Text>Hello world!</Text>
    </Fragment>
  );
};

export const run = render(
  <Macro
    app={<App />}
  />
);

Update permissions in the manifest file

In the development environment, your app is deployed with all available scopes. However, if you were to deploy your app to a staging or production, environment the API requests in the previous example would fail.

See Add scopes to call an Atlassian REST API to learn how to apply new scopes to an app.

Deploy your app

Deploy your changes to update the app installed on your developer site. You don’t need to run the install command as the app is installed on your developer site.

  1. Deploy your app by running:

    1
    forge deploy
  2. Add a comment to the Confluence page that contains your macro. For example, a comment with Hello from the comments.

  3. Refresh the Confluence page that contains your macro.

You shouldn’t notice any changes yet.

Check the logs

See the logs for your function to check the API call you just made. If the log does not display immediately, try again. It can take a minute for the log to display.

  1. Check the logs by running:

    1
    forge logs

You’ll see the logs for the API call that was made when you refreshed the Confluence page. It should look something like the following:

1
Number of comments on this page: 1

The number will change as you add or remove comments and refresh the page. Note, nested comments are not counted by this app, only top-level comments.

Next step

See Part 3: Change the front end with Forge UI to learn how to display the result of your call using Forge UI.

Rate this page: