Part 3: Change the front end with the UI kit

This section describes how to use tools in the UI kit, including UI kit components. You'll use these components to build dynamic and interactive interfaces for your app's front end. When your app is complete, you'll learn how to continue monitoring the Forge environment using the forge logs command.

Modify the user interface

The hello world app contains a single Text component that displays 'Hello world!' on a Confluence page. In the UI kit, this is represented by <Text>Hello world!</Text>. You’ll update the component to display the number of comments on a page.

When using multiple UI kit components, you must wrap them in a Fragment block because a function can only return one top-level component. In the example below Fragment acts as a wrapper for the other UI components.

1. Start the tunnel by running:

   1

   forge tunnel

2. Navigate to the src directory and open the index.jsx file.

3. Inside the Fragment section, add the following after the first Text component:

   1
   2
   3

   <Text>
       Number of comments on this page: {comments.length}
   </Text>

4. Refresh the Confluence page that contains your app.

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
31
32
33

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(`/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>
      <Text>
        Number of comments on this page: {comments.length}
      </Text>
    </Fragment>
  );
};

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

Your app should display the number of comments on the page. You can add more top-level comments to the page and refresh the page to see your app update. Your page should look like the following:

Close the tunnel and deploy the app

Now that your app works using the local code, deploy the changes so the app continues to work when the tunnel is closed.

1. Close your tunnel by pressing Ctrl+C.

2. Deploy your app by running:

   1

   forge deploy

3. Refresh the page where your app is installed.

Check the logs

After you deploy your app, run the forge logs command to view app events. Logs are processed after deployment, so you may need to wait a moment before running the command.

1. Check for new logs in your development environment by running:

   1

   forge logs

   Your logs should look something like the following:

   1

   INFO  2020-03-19T04:32:29.689Z 91be7233-f758-40f6-ae9d-478bfb9a12e2 Number of comments on this page: 1

Your logs are an important tool when debugging Forge apps. Learn more about debugging.

Next steps

You now know enough to develop your own Forge apps. Learn more with our tutorials, explore the example apps, or find out more in the reference pages.

• Automate Jira using Triggers uses triggers to respond to user actions in Jira.
• Create a GIPHY app using the UI kit creates a more complex front end with the UI kit.
• Promote an app to staging or production makes your app ready for your users.
• Learn how to build a custom UI app in Confluence.
• See the reference pages to learn what else you can do with what you’ve learned.