About UI Kit 2
UI Kit 2 components
UI kit components
Product bridge APIs
Jira bridge APIs

Warning

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.

ContentAction

A modal dialog triggered from the more actions (...) menu in Confluence.

Usage notes

ContentAction is the top-level component required for the confluence:contentAction module.

Import statement

1
2
import ForgeUI, { ContentAction } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can only contain ModalDialog.

Example

1
2
import 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>
);

ContentBylineItem

An inline dialog triggered from the content byline section of a Confluence page.

Usage notes

ContentBylineItem is the top-level component required for the confluence:contentBylineItem module.

Import statement

1
2
import ForgeUI, { ContentBylineItem } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can only contain InlineDialog.

Example

1
2
import ForgeUI, { render, Text, ContentBylineItem, InlineDialog } from '@forge/ui';

const App = () => {
    return (
        <InlineDialog>
            <Text>Hello world!</Text>
        </InlineDialog>
    );
};

export const run = render(
    <ContentBylineItem>
        <App/>
    </ContentBylineItem>
);

ContextMenu

A menu shown in Confluence when a user selects a piece of text, which triggers an InlineDialog.

The ContextMenu:

The InlineDialog:

Example: Dictionary app

Usage notes

ContextMenu is the top-level component required for the confluence:contextMenu module.

Import statement

1
2
import ForgeUI, { ContextMenu } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can only contain InlineDialog.

Example

1
2
import ForgeUI, { render, Text, ContextMenu, InlineDialog } from '@forge/ui';

const App = () => {
    return (
        <InlineDialog>
            <Text>Hello world!</Text>
        </InlineDialog>
    );
};

export const run = render(
    <ContextMenu>
        <App/>
    </ContextMenu>
);

CustomContent

Renders a full-page app in the content area of Confluence.

Usage notes

CustomContent is the top-level component required for the confluence:customContent module.

Import statement

1
2
import ForgeUI, { CustomContent } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any UI kit component.

Example

1
2
import 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>
);

GlobalPage

Renders a full page app that appears in place of a Confluence page.

Usage notes

GlobalPage is the top-level component required for the confluence:globalPage module.

Import statement

1
2
import ForgeUI, { GlobalPage } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any UI kit component.

Example

1
2
import ForgeUI, {render, Text, GlobalPage} from '@forge/ui';

const App = () => {
    return (
        <Text>Hello world</Text>
    );
};


export const run = render(
    <GlobalPage>
        <App/>
    </GlobalPage>
);

GlobalSettings

Renders a full page app that appears in the Confluence global settings.

Usage notes

GlobalSettings is the top-level component required for the confluence:globalSettings module.

Import statement

1
2
import ForgeUI, { GlobalSettings } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any UI kit component.

Example

1
2
import ForgeUI, {render, Text, GlobalSettings} from '@forge/ui';

const App = () => {
    return (
        <Text>Hello world!</Text>
    );
};


export const run = render(
    <GlobalSettings>
        <App/>
    </GlobalSettings>
);

HomepageFeed

A selectable section in the right panel of the Confluence homepage, which expands to reveal content.

Usage notes

  • This component is the top-level component required for the confluence:homepageFeed module.
  • When a user selects the app, the section expands to reveal content.

Import statement

1
2
import ForgeUI, { HomepageFeed } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any UI kit component.

Example

1
2
import ForgeUI, {render, Text, HomepageFeed} from '@forge/ui';

const App = () => {
    return (
        <Text>Hello world!</Text>
    );
};

export const run = render(
    <HomepageFeed>
        <App/>
    </HomepageFeed>
);

Macro

An area of dynamic content in a Confluence page or blog.

Usage notes

Import statement

1
2
import ForgeUI, { Macro } from '@forge/ui';

Props

NameTypeRequiredDescription
appForgeExtensionYesThe app code for the macro.

Example

1
2
import 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 />}
  />
);

PageCustomContentListView

Renders a list of custom content created within a page.

Usage notes

PageCustomContentListView component is available for confluence:contentAction, confluence:contentBylineItem and confluence:contextMenu modules.

Import statement

1
2
import ForgeUI, { PageCustomContentListView } from '@forge/ui';

Props

NameTypeRequiredDescription
contentIdstingYesThe content ID for which the list is displayed.
spaceKeystingYesThe key for the space for which the list is displayed.
typestringYesThe custom content type for which the list is displayed.

Use the following format for the type: forge:[APP_ID]:[ENVIRONMENT_ID]:[MODULE_KEY].

Where:
  • forge: The prefix for content type created with Forge.
  • APP_ID: The identifier for your Forge app.
  • ENVIRONMENT_ID: The environment ID where the app was deployed. For more details, see Environments and versions.
  • MODULE_KEY: `confluence:customContent` module key.

Example

1
2
import 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>
);

SpaceCustomContentListView

Renders a list of custom content created within a space.

Usage notes

SpaceCustomContentListView component is available for confluence:spacePage and confluence:spaceSettings modules.

Import statement

1
2
import ForgeUI, { SpaceCustomContentListView } from '@forge/ui';

Props

NameTypeRequiredDescription
spaceKeystingYesThe key for the space for which the list is displayed.
typestringYesThe custom content type for which the list is displayed.

Use the following format for the type: forge:[APP_ID]:[ENVIRONMENT_ID]:[MODULE_KEY].

Where:
  • forge: The prefix for content type created with Forge.
  • APP_ID: The identifier for your Forge app.
  • ENVIRONMENT_ID: The environment ID where the app was deployed. For more details, see Environments and versions.
  • MODULE_KEY: `confluence:customContent` module key.

Example

1
2
import 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>
);

SpacePage

Renders a full-page app in the content area of Confluence.

Usage notes

SpacePage is the top-level component required for the confluence:spacePage module.

Import statement

1
2
import ForgeUI, { SpacePage } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any UI kit component.

Example

1
2
import ForgeUI, {render, Text, SpacePage} from '@forge/ui';

const App = () => {
    return (
        <Text>Hello from the space page!</Text>
    );
};


export const run = render(
    <SpacePage>
        <App/>
    </SpacePage>
);

SpaceSettings

A piece of content in a Confluence space, accessible from a tab under Space Settings > Integrations.

Usage notes

SpaceSettings is the top-level component required for the confluence:spaceSettings module.

Import statement

1
2
import ForgeUI, { SpaceSettings } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any UI kit component.

Example

1
2
import ForgeUI, {render, Text, SpaceSettings} from '@forge/ui';

const App = () => {
    return (
        <Text>Hello world!</Text>
    );
};

export const run = render(
    <SpaceSettings>
        <App/>
    </SpaceSettings>
);

Rate this page: