The components presented on this page belong to an older version of our UI Kit. While they are functional, they might not provide the optimal performance you seek for your application. We strongly recommend upgrading to the latest version of our UI Kit.
A modal dialog triggered from the more actions (...) menu in Confluence.
ContentAction
is the top-level component required for the confluence:contentAction
module.
1 2import ForgeUI, { ContentAction } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can only contain ModalDialog. |
1 2import ForgeUI, {render, Text, ContentAction, ModalDialog, useState} from '@forge/ui'; const App = () => { const [isOpen, setOpen] = useState(true) if (!isOpen) { return null; } return ( <ModalDialog header="Hello" onClose={() => setOpen(false)}> <Text>Hello world</Text> </ModalDialog> ); }; export const run = render( <ContentAction> <App/> </ContentAction> );
An inline dialog triggered from the content byline section of a Confluence page.
ContentBylineItem
is the top-level component required for the
confluence:contentBylineItem
module.
1 2import ForgeUI, { ContentBylineItem } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can only contain InlineDialog. |
1 2import ForgeUI, { render, Text, ContentBylineItem, InlineDialog } from '@forge/ui'; const App = () => { return ( <InlineDialog> <Text>Hello world!</Text> </InlineDialog> ); }; export const run = render( <ContentBylineItem> <App/> </ContentBylineItem> );
A menu shown in Confluence when a user selects a piece of text, which triggers an InlineDialog.
The ContextMenu
:
The InlineDialog:
Example: Dictionary app
ContextMenu
is the top-level component required for the
confluence:contextMenu
module.
1 2import ForgeUI, { ContextMenu } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can only contain InlineDialog. |
1 2import ForgeUI, { render, Text, ContextMenu, InlineDialog } from '@forge/ui'; const App = () => { return ( <InlineDialog> <Text>Hello world!</Text> </InlineDialog> ); }; export const run = render( <ContextMenu> <App/> </ContextMenu> );
Renders a full-page app in the content area of Confluence.
CustomContent
is the top-level component required for the confluence:customContent
module.
1 2import ForgeUI, { CustomContent } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any UI kit component. |
1 2import ForgeUI, {render, Text, CustomContent} from '@forge/ui'; const App = () => { return ( <Text>This is a place where the custom content will be rendered!</Text> ); }; export const run = render( <CustomContent> <App/> </CustomContent> );
Renders a full page app that appears in place of a Confluence page.
GlobalPage
is the top-level component required for the confluence:globalPage
module.
1 2import ForgeUI, { GlobalPage } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any UI kit component. |
1 2import ForgeUI, {render, Text, GlobalPage} from '@forge/ui'; const App = () => { return ( <Text>Hello world</Text> ); }; export const run = render( <GlobalPage> <App/> </GlobalPage> );
Renders a full page app that appears in the Confluence global settings.
GlobalSettings
is the top-level component required for the confluence:globalSettings
module.
1 2import ForgeUI, { GlobalSettings } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any UI kit component. |
1 2import ForgeUI, {render, Text, GlobalSettings} from '@forge/ui'; const App = () => { return ( <Text>Hello world!</Text> ); }; export const run = render( <GlobalSettings> <App/> </GlobalSettings> );
A selectable section in the right panel of the Confluence homepage, which expands to reveal content.
confluence:homepageFeed
module.1 2import ForgeUI, { HomepageFeed } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any UI kit component. |
1 2import ForgeUI, {render, Text, HomepageFeed} from '@forge/ui'; const App = () => { return ( <Text>Hello world!</Text> ); }; export const run = render( <HomepageFeed> <App/> </HomepageFeed> );
An area of dynamic content in a Confluence page or blog.
Macro
component is used for the macro module.1 2import ForgeUI, { Macro } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
app | ForgeExtension | Yes | The app code for the macro. |
1 2import ForgeUI, { render, Macro, Text } from "@forge/ui"; const App = () => { const data = { name: "Fluffy", age: 2 } return <Text>{data.name} is {data.age} years old.</Text>;; }; export const run = render( <Macro app={<App />} /> );
Renders a list of custom content created within a page.
PageCustomContentListView
component is available for
confluence:contentAction,
confluence:contentBylineItem and
confluence:contextMenu
modules.
1 2import ForgeUI, { PageCustomContentListView } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
contentId | sting | Yes | The content ID for which the list is displayed. |
spaceKey | sting | Yes | The key for the space for which the list is displayed. |
type | string | Yes | The custom content type for which the list is displayed. Use the following format for the type: forge:[APP_ID]:[ENVIRONMENT_ID]:[MODULE_KEY] .Where:
|
1 2import ForgeUI, {render, useState, useProductContext, ContentAction, ModalDialog, PageCustomContentListView} from '@forge/ui'; const App = () => { const [isOpen, setOpen] = useState(true); const {contentId, spaceKey, localId, environmentType} = useProductContext(); // extractAppId implementation omitted const type = `forge:${extractAppId(localId)}:${environmentType}:note`; if (!isOpen) { return null; } return ( <ModalDialog header={`List of notes`} width="x-large" onClose={() => setOpen(false)}> <PageCustomContentListView contentId={contentId} spaceKey={spaceKey} type={type} /> </ModalDialog> ); }; export const run = render( <ContentAction> <App/> </ContentAction> );
Renders a list of custom content created within a space.
SpaceCustomContentListView
component is available for
confluence:spacePage and
confluence:spaceSettings modules.
1 2import ForgeUI, { SpaceCustomContentListView } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
spaceKey | sting | Yes | The key for the space for which the list is displayed. |
type | string | Yes | The custom content type for which the list is displayed. Use the following format for the type: forge:[APP_ID]:[ENVIRONMENT_ID]:[MODULE_KEY] .Where:
|
1 2import ForgeUI, {render, Text, SpacePage, useProductContext, SpaceCustomContentListView} from '@forge/ui'; const App = () => { const {spaceKey, localId, environmentType} = useProductContext(); // extractAppId implementation omitted const type = `forge:${extractAppId(localId)}:${environmentType}:customer`; return ( <SpaceCustomContentListView type={customContentType} spaceKey={spaceKey} /> ); }; export const run = render( <SpacePage> <App/> </SpacePage> );
Renders a full-page app in the content area of Confluence.
SpacePage
is the top-level component required for the confluence:spacePage
module.
1 2import ForgeUI, { SpacePage } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any UI kit component. |
1 2import ForgeUI, {render, Text, SpacePage} from '@forge/ui'; const App = () => { return ( <Text>Hello from the space page!</Text> ); }; export const run = render( <SpacePage> <App/> </SpacePage> );
A piece of content in a Confluence space, accessible from a tab under Space Settings > Integrations.
SpaceSettings
is the top-level component required for the
confluence:spaceSettings
module.
1 2import ForgeUI, { SpaceSettings } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any UI kit component. |
1 2import ForgeUI, {render, Text, SpaceSettings} from '@forge/ui'; const App = () => { return ( <Text>Hello world!</Text> ); }; export const run = render( <SpaceSettings> <App/> </SpaceSettings> );
Rate this page: