DEPRECATION NOTICE UI Kit 1 is now in the deprecation period. This version will no longer be supported or functional after 28 Feb 2025
To support your upgrade, please use the following guides:
We highly recommend using the latest version of UI Kit to quickly build your user interface with its updated library of components.
This page is about the previous version of UI Kit.
We highly recommend upgrading to and utilizing the latest version. Get started with UI Kit's latest library of components to quickly build your user interface.
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> );
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.
Renders a Jira page that is only accessible to Jira admins, selected
from the Apps
section of the left navigation of Jira admin settings.
AdminPage
is the top-level component required for the jira:adminPage
module.
1 2import ForgeUI, { AdminPage } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, {AdminPage, render, Text} from '@forge/ui'; const App = () => { return ( <AdminPage> <Text>Hello, world!</Text> </AdminPage> ); }; export const run = render( <App/> );
The CustomFieldContextConfig
component is returned from a function
defined in the contextConfig
property
in the app manifest. When the component is returned, a view of the custom field type configuration details for a context are rendered.
This component can be used in Jira Work Management, Jira Software, and Jira Service Management to render a configured view of the field in a custom field context.
1 2import ForgeUI, { CustomFieldContextConfig } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any component except for Form , ConfigForm , MacroConfig , and all extension-specific components. |
onSubmit | (formData: FormData) => Promise<any> | any | Yes | An event handler that can be asynchronous. The argument, formData , is an object of input field
keys and their values (see the following example). The return value is either an object which can contain the field
configuration and schema (only for custom field object type) or a promise that’s resolved with the returned object.
|
Object type custom fields can have the schema
property in the return object of the onSubmit
method.
The schema
property contains the JSON schema that is used to validate values stored in the field.
Here is an example:
1 2const onSubmit = (formData) => ({ schema: { properties: { value: formData.value, currency: formData.currency } } });
This example shows how configuration details defining the maximum and minimum values for a slider component type can be
retrieved, displayed, and saved. The example uses the useProductContext hook
to extract the extensionContext
that stores the configuration
. Any modified configuration
is then saved with the
onSubmit
method of the component.
1 2import ForgeUI, { render, useProductContext, CustomFieldContextConfig, TextField, } from "@forge/ui"; const ContextConfig = () => { const {extensionContext: {configuration = {}}} = useProductContext(); const onSubmit = (formData) => ({ configuration: { minValue: +formData.minValue || 0, maxValue: +formData.maxValue || 100, } }); return ( <CustomFieldContextConfig onSubmit={onSubmit}> <TextField name="minValue" label="Minimum value" defaultValue={configuration.minValue}/> <TextField name="maxValue" label="Maximum value" defaultValue={configuration.maxValue}/> </CustomFieldContextConfig> ); }; export const runContextConfig = render(<ContextConfig />);
This screenshot shows the slider component's custom field context configuration page in edit mode.
A modal dialog used to edit a CustomField.
The modal dialog opens when the CustomField
is selected in Jira.
edit
property of the
jira:customField
module.1 2import ForgeUI, { CustomField, CustomFieldView, CustomFieldEdit } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any component except for Form , ConfigForm , MacroConfig , and all extension-specific components. |
onSubmit | (formData: FormData) => Promise<CustomFieldValue> | CustomFieldValue | Yes | An event handler that can be asynchronous. The argument, formData, is an object of input field keys and their values (see example below). The return value is either the field value or a promise that’s resolved with the returned field value. The value is checked against the validation expression defined in the manifest and must be the same type as custom field. |
width | "small" | "medium" | "large" | "x-large" | The width of the edit dialog. This can range from the width of a small pop-up to a pop-up that’s almost full-screen. Defaults to medium . | |
header | string | The title of the edit dialog. Defaults to Custom field edit . |
The value returned from the onSubmit
function must be of the same type as the custom field.
For example, for a custom field of type string
, the value returned from onSubmit
should also
be a string
.
For custom fields storing collections of values, where for example you've set the type
to be
string
and collection
to be list
, the value returned from onSubmit
should be
an array
of strings
. Otherwise, the custom field will not be saved at all.
1 2import ForgeUI, { render, CustomFieldEdit, Select, Option, } from "@forge/ui"; const Edit = () => { const onSubmit = (values) => values.valueSelect; return ( <CustomFieldEdit onSubmit={onSubmit} width="small" header="Example header"> <Select label="Select Value " name="valueSelect"> <Option label="low" value="low" /> <Option label="medium" value="medium" /> <Option label="high" value="high" /> </Select> </CustomFieldEdit> ); }; export const runEdit = render(<Edit />);
Renders content of a jira:customField
module, which lets users add specific pieces of information to a Jira issue.
For more information, see Jira custom field and Jira custom field type.
A CustomField
in view mode:
A CustomField
in edit mode:
function
defined in the app manifest.1 2import ForgeUI, { CustomField } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array | Yes | The view code for the custom field. Can only contain Code , Image , Text , Tooltip , Tag , TagGroup , User , and UserGroup components. |
1 2import ForgeUI, { render, useProductContext, CustomField, Text, StatusLozenge, } from "@forge/ui"; const App = () => { const { extensionContext: { fieldValue }, } = useProductContext(); const fieldAppearance = (value) => { switch (value) { case "medium": return "success"; case "high": return "removed"; default: return "default"; } }; return ( <CustomField> <Text> <StatusLozenge text={fieldValue} appearance={fieldAppearance(fieldValue)} /> </Text> </CustomField> ); }; export const run = render(<App />);
The DashboardGadgetEdit
component is returned from a function
defined in the edit
property
in the app manifest. When the component is returned, an edit mode is rendered for the dashboard gadget.
This component can be used in Jira Core, Jira Software, and Jira Service Desk to render an edit mode for a dashboard gadget in the Dashboards page.
In edit mode, dashboard gadgets use a mechanism built into Jira to update the stored gadget configuration.
1 2import ForgeUI, { DashboardGadgetEdit } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array | Yes | The edit code for the dashboard gadget. Can contain any UI Kit component. |
onSubmit | (formData: FormData) => Promise | Yes | An event handler that can be asynchronous. The argument, formData , is an object made up of input field keys and their
values (see the following example).
|
The onSubmit
function must be provided for the gadget configuration to be saved. The values returned from onSubmit
are the values that are saved as the gadget configuration.
A simple example of a dashboard gadget edit component enabling the input of a name that is displayed in the app's view mode.
1 2import ForgeUI, { render, DashboardGadgetEdit, TextField, } from "@forge/ui"; const Edit = () => { const onSubmit = (values) => { return values; } return ( <DashboardGadgetEdit onSubmit={onSubmit}> <TextField name="name" label="Say hello to:" /> </DashboardGadgetEdit> ); }; export const runEdit = render(<Edit />);
This is the dashboard gadget edit mode created by the example code.
The DashboardGadget
component is returned from a function
defined in the app manifest to render content for a
dashboard gadget.
This component can be used in Jira Core, Jira Software, and Jira Service Desk to render the gadget in the Dashboards page.
You can also use the DashboardGadgetEdit component to extend the gadget to save a configuration.
1 2import ForgeUI, { DashboardGadget } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array | Yes | The view code for the dashboard gadget. Can contain any UI Kit component. |
An example of a dashboard gadget component that displays a hello message. The user can input a name in the edit mode of this app that is used in the message; otherwise, the message says "Hello world."
1 2import ForgeUI, { render, DashboardGadget, Text, useProductContext, } from "@forge/ui"; const App = () => { const { extensionContext: { gadgetConfiguration }, } = useProductContext(); return ( <DashboardGadget> <Text content={`Hello ${gadgetConfiguration.name || "world"}`} /> </DashboardGadget> ); }; export const run = render(<App />);
This is the dashboard gadget view created by the example code.
See DashboardGadgetEdit for an example of an editable gadget.
Renders a Jira page selected from the Apps
section of the main navigation.
GlobalPage
is the top-level component required for the jira:globalPage
module.
1 2import ForgeUI, { GlobalPage } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { GlobalPage, render, Text } from '@forge/ui'; const App = () => { return ( <GlobalPage> <Text>Hello, world!</Text> </GlobalPage> ); }; export const run = render(<App/>);
A modal dialog triggered from the more actions (...) menu in Jira.
This is an example of an IssueAction
button:
This is an example of the triggered modal dialog:
IssueAction
is the top-level component required for the
jira:issueAction
module.
1 2import ForgeUI, { IssueAction } 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, IssueAction, 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( <IssueAction> <App/> </IssueAction> );
A piece of content displayed in the Activity panel of a Jira issue.
IssueActivity
is the top-level component required for the
jira:issueActivity
module.1 2import ForgeUI, { IssueActivity } 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, IssueActivity, Text } from "@forge/ui"; const App = () => { return <Text>Hello from the Issue activity!</Text>; }; export const run = render( <IssueActivity> <App /> </IssueActivity> );
A selectable field in the right panel of a Jira issue, which shows/hides content.
IssueContext
is the top-level component required for the jira:issueContext
module.
Can be used in Jira Work Management, Jira Software, and Jira Service Management new issue view.
1 2import ForgeUI, { IssueContext } 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, IssueContext, Text } from "@forge/ui"; const App = () => { return <Text>Hello from the Issue context panel!</Text>; }; export const run = render( <IssueContext> <App /> </IssueContext> );
A selectable field in the right panel of a Jira issue, which shows/hides content.
IssueGlance
is the top-level component required for the jira:issueGlance
module.
Can be used in Jira Work Management, Jira Software, and Jira Service Management new issue view.
1 2import ForgeUI, { IssueGlance } 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, IssueGlance, Text } from "@forge/ui"; const App = () => { return <Text>Hello from the Issue glance!</Text>; }; export const run = render( <IssueGlance> <App /> </IssueGlance> );
An item in the more actions (•••) menu of an IssuePanel.
actions
property of the
IssuePanel component.1 2import ForgeUI, { IssuePanelAction } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
text | string | Yes | The name of the item that’s added to the actions menu of an issue panel. |
onClick | () => void|Promise<void> | Yes | An event handler executed when the item is clicked. You can perform state updates inside this function. |
1 2import ForgeUI, {IssuePanel, IssuePanelAction, render, Text, useProductContext, useState} from '@forge/ui'; const App = () => { const [waveCount, setWaveCount] = useState(0); return ( <IssuePanel actions={[ <IssuePanelAction text="Custom action" onClick={() => { setWaveCount(waveCount + 1); }}/> ]}> <Text>Hello, world! {"👋".repeat(waveCount)}</Text> </IssuePanel> ); }; export const run = render( <App/> );
A piece of content displayed in the body of a Jira issue.
IssuePanel
is the top-level component required for the jira:issuePanel
module.The following context variables are available for issue panels:
localId
- The unique ID of the panel, which makes panel instances distinct from each other if allowMultiple
is set to true
.extensionContext.isNewToIssue
- This variable is set to true
when a panel has just been added to an issue; otherwise, it's false
.The example shows how to access these variables with the useProductContext
UI hook.
1 2import ForgeUI, { IssuePanel } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for displaying multiple components. Can contain any UI kit component. |
actions | Array<IssuePanelAction> | A list of IssuePanelAction components that correspond to items in the actions menu. No more than five actions can be defined. |
1 2import ForgeUI, {IssuePanel, IssuePanelAction, render, Text, useProductContext, useState} from '@forge/ui'; const App = () => { const {localId: panelId, extensionContext: {isNewToIssue}} = useProductContext(); return ( <IssuePanel actions={[ <IssuePanelAction text="Custom action" onClick={() => {}}/> ]}> <Text>Hello, world!</Text> </IssuePanel> ); }; export const run = render( <App/> );
Renders content of the jira:projectPage
module on a Jira page.
ProjectPage
is the top-level component required for the
jira:projectPage
module.
1 2import ForgeUI, { ProjectPage } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { ProjectPage, render, Text } from "@forge/ui"; const App = () => { return ( <ProjectPage> <Text>Hello, world!</Text> </ProjectPage> ); }; export const run = render(<App />);
Renders a Jira page selected from the project settings sidebar.
ProjectSettingsPage
is the top-level component required for the jira:projectSettingsPage
module.
1 2import ForgeUI, { ProjectSettingsPage } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { ProjectSettingsPage, render, Text } from '@forge/ui'; const App = () => { return ( <ProjectSettingsPage> <Text>Hello, world!</Text> </ProjectSettingsPage> ); }; export const run = render( <App/> );
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.
Renders content of the jiraServiceManagement:assetsImportType
module on Configure app
modal for Assets Imports.
The modal appears when a user selects an object schema within Assets, then selects Schema configuration
, then selects Import
, then selects their import type, then selects Configure App
in the dropdown.
AssetsImportType
is a component required for the
jiraServiceManagement:assetsImportType
module.1
import ForgeUI, { AssetsAppImportTypeConfiguration } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import ForgeUI, { render, Text, AssetsAppImportTypeConfiguration, useProductContext } from "@forge/ui"; const App = () => { const { extensionContext } = useProductContext(); const importId = extensionContext.importId; const workspaceId = extensionContext.workspaceId; const onSubmit = async () => { console.log("submit button clicked"); }; return ( <AssetsAppImportTypeConfiguration onSubmit={onSubmit}> <Text>Hello World!, ImportId = {importId}, WorkspaceId = {workspaceId}</Text> </AssetsAppImportTypeConfiguration> ); }; export const renderImportConfig = render(<App />);
Renders content of the jiraServiceManagement:organizationPanel
module on the Organization
page in the Project settings
section.
OrganizationPanel
is the top-level component required for the
jiraServiceManagement:organizationPanel
module.1 2import ForgeUI, { OrganizationPanel } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { OrganizationPanel, render, Text } from "@forge/ui"; const App = () => { return ( <OrganizationPanel> <Text>Hello, world!</Text> </OrganizationPanel> ); }; export const run = render(<App />);
Renders content of the jiraServiceManagement:portalFooter
module at the bottom of a customer's portal pages.
PortalFooter
is the top-level component required for the
jiraServiceManagement:portalFooter
module.1 2import ForgeUI, { PortalFooter } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { PortalFooter, render, Text } from "@forge/ui"; const App = () => { return ( <PortalFooter> <Text>Hello, world! This is a portal footer. </Text> </PortalFooter> ); }; export const run = render(<App />);
Renders content of the jiraServiceManagement:portalHeader
module at the top of a customer's portal pages.
PortalHeader
is the top-level component required for the
jiraServiceManagement:portalHeader
module.1 2import ForgeUI, { PortalHeader } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { PortalHeader, render, Text } from "@forge/ui"; const App = () => { return ( <PortalHeader> <Text>Hello, world! This is a portal header.</Text> </PortalHeader> ); }; export const run = render(<App />);
Renders content of the jiraServiceManagement:portalProfilePanel
module on the Portal profile
page in the Project settings
section.
PortalProfilePanel
is the top-level component required for the
jiraServiceManagement:portalProfilePanel
module.1 2import ForgeUI, { PortalProfilePanel } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { PortalProfilePanel, render, Text } from "@forge/ui"; const App = () => { return ( <PortalProfilePanel> <Text>Hello, world! This is a Forge profile panel.</Text> </PortalProfilePanel> ); }; export const run = render(<App />);
Renders content of the jiraServiceManagement:portalRequestCreatePropertyPanel
module is displayed on the request creation screen in the customer portal.
PortalRequestCreatePropertyPanel
is the top-level component required for the
jiraServiceManagement:PortalRequestCreatePropertyPanel
module.1 2import ForgeUI, { PortalRequestCreatePropertyPanel } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { PortalRequestCreatePropertyPanel, render, Text } from "@forge/ui"; const App = () => { return ( <PortalRequestCreatePropertyPanel> <Text>Hello, world! This is a Forge Portal request create property panel.</Text> </PortalRequestCreatePropertyPanel> ); }; export const run = render(<App />);
A piece of content displayed in the side panel of a Jira Service Management customer portal request.
PortalRequestDetailPanel
is the top-level component required for the
jiraServiceManagement:portalRequestDetailPanel
module.1 2import ForgeUI, { PortalRequestDetailPanel } 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, { PortalRequestDetailPanel, render, Text } from "@forge/ui"; const App = () => { return ( <PortalRequestDetailPanel> <Text>Hello, World!</Text> </PortalRequestDetailPanel> ); }; export const run = render(<App />);
A piece of content displayed in the body of a Jira Service Management customer portal request.
PortalRequestDetail
is the top-level component required for the
jiraServiceManagement:portalRequestDetail
module.1 2import ForgeUI, { PortalRequestDetail } 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, { PortalRequestDetail, render, Text } from "@forge/ui"; const App = () => { return ( <PortalRequestDetail> <Text>Hello, World!</Text> </PortalRequestDetail> ); }; export const run = render(<App />);
A modal dialog triggered from the request detail view action section in Jira Service Management customer portal.
This is an example of a PortalRequestViewActionButton
button:
This is an example of the triggered modal dialog:
PortalRequestViewAction
is the top-level component required for the
jiraServiceManagement:portalRequestViewAction
module.
1 2import ForgeUI, { PortalRequestViewAction } 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, PortalRequestViewAction, 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( <PortalRequestViewAction> <App/> </PortalRequestViewAction> );
Renders content of the jiraServiceManagement:portalSubheader
module on a customer's portal pages.
PortalSubheader
is the top-level component required for the
jiraServiceManagement:portalSubheader
module.1 2import ForgeUI, { PortalSubheader } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { PortalSubheader, render, Text } from "@forge/ui"; const App = () => { return ( <PortalSubheader> <Text>Hello, world! This is a portal sub-header.</Text> </PortalSubheader> ); }; export const run = render(<App />);
A field for users to enter multiple lines of text.
The PortalTextArea
component should be used only to the Request Create Property Panel module.
Unlike a TextArea
, the PortalTextArea
component does not maintain its own state. Instead,
you can retrieve the values using onBlur
.
1 2import ForgeUI, { PortalTextArea } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
isMonospaced | boolean | Whether or not to style the text as monospaced . | |
placeholder | string | The placeholder helper text. | |
spellCheck | boolean | The HTML attribute that determines whether the text should be checked for spelling errors. Defaults to false. | |
Value | string | The text value of the field. |
The example shows PortalTextArea
.
1 2<PortalTextArea placeholder="placeholder" onBlur={(value) => { console.log(value); }} ></PortalTextArea>
A modal dialog triggered from the user menu in Jira Service Management customer portal.
This is an example of a PortalUserMenuActionButton
button:
This is an example of the triggered modal dialog:
PortalUserMenuAction
is the top-level component required for the
jiraServiceManagement:portalUserMenuAction
module.
1 2import ForgeUI, { PortalUserMenuAction } 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, PortalUserMenuAction, 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( <PortalUserMenuAction> <App/> </PortalUserMenuAction> );
Renders content of the jiraServiceManagement:queuePage
module on a Jira page.
QueuePage
is the top-level component required for the
jiraServiceManagement:queuePage
module.1 2import ForgeUI, { QueuePage } from "@forge/ui";
Name | Type | Required | Description |
---|---|---|---|
children | Array<ForgeComponent> | Yes | A container for the components to display on the page. Can contain any UI kit component. |
1 2import ForgeUI, { QueuePage, render, Text } from "@forge/ui"; const App = () => { return ( <QueuePage> <Text>Hello, world!</Text> </QueuePage> ); }; export const run = render(<App />);
Rate this page:
Our new navigation is here to guide you on your developer journey. Dive in and explore the refreshed Forge documentation!