This section describes how to use tools in 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.
This is part 3 of 3 in this tutorial. Complete Part 2: Call a Confluence API before working on this page.
The hello world app contains two Text
components that display 'Hello world!' on a Confluence page.
In the UI Kit, this is represented by <Text>Hello world!</Text>
.
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 <>
acts as a wrapper for
the other UI Kit components.
You’ll update one of these components to display the number of comments on a page.
Start the tunnel by running:
1 2forge tunnel
Navigate to the frontend
directory and open the index.jsx
file.
Inside the <>
tag, add the following before the first Text
component:
1 2<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 2import React from 'react'; import ForgeReconciler, { Text, useProductContext } from '@forge/react'; import { requestConfluence } from '@forge/bridge'; const fetchCommentsForPage = async (pageId) => { const res = await requestConfluence(`/wiki/api/v2/pages/${pageId}/footer-comments`); const data = await res.json(); return data.results; }; const App = () => { const context = useProductContext(); // add these code to keep track of comments const [comments, setComments] = React.useState(); console.log(`Number of comments on this page: ${comments?.length}`); React.useEffect(() => { if (context) { // extract page ID from the context const pageId = context.extension.content.id; fetchCommentsForPage(pageId).then(setComments); } }, [context]); return ( <> <Text> Number of comments on this page: {comments?.length} </Text> <Text>Hello world!</Text> </> ); }; ForgeReconciler.render( <React.StrictMode> <App /> </React.StrictMode> );
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:
After confirming the app works locally, deploy the app so that it continues to work when you close the tunnel.
Close your tunnel by pressing Ctrl+C.
Deploy your app by running:
1 2forge deploy
Refresh the page where your app is installed.
Once your app is deployed, it will appear in the developer console. From the console, you can manage and distribute your apps. You can also see how your app is performing, view your app logs and installations, and manage app alerts.
You now know enough to develop your own Forge apps. Learn more from our tutorials, guides, example apps or reference pages.
Rate this page: