Rate this page:
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.
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.
Start the tunnel by running:
1
forge tunnel
Navigate to the src
directory and open the index.jsx
file.
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>
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:
Now that your app works using the local code, deploy the changes so the app continues to work when the tunnel is closed.
Deploy your app by running:
1
forge deploy
Refresh the page where your app is installed.
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.
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.
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.
Rate this page: