UI Kit 1 product components

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

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

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

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

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

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

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

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

• The Macro component is used for the macro module.
• To enable app users to customize the macro, see Add configuration to a macro.

Import statement

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

Props

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

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

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

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

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>
);

AdminPage

Renders a Jira page that is only accessible to Jira admins, selected from the Apps section of the left navigation of Jira admin settings.

Usage notes

AdminPage is the top-level component required for the jira:adminPage module.

Import statement

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

Props

Example

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

const App = () => {
    return (
        <AdminPage>
            <Text>Hello, world!</Text>
        </AdminPage>
    );
};
export const run = render(
    <App/>
);

CustomFieldContextConfig

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.

Usage

1
2
import ForgeUI, { CustomFieldContextConfig } from "@forge/ui";

Props

Object type

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
2
const onSubmit = (formData) => ({
  schema: {
    properties: {
        value: formData.value,
        currency: formData.currency
    }
  }
});

Example

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

Preview

This screenshot shows the slider component's custom field context configuration page in edit mode.

CustomFieldEdit

A modal dialog used to edit a CustomField. The modal dialog opens when the CustomField is selected in Jira.

Usage notes

• This component is the top-level component required for the edit property of the jira:customField module.
• Can be used in Jira Work Management, Jira Software, and Jira Service Management new issue view.

Import statement

1
2
import ForgeUI, { CustomField, CustomFieldView, CustomFieldEdit } from "@forge/ui";

Props

onSubmit

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.

Example

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

CustomField

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:

Usage notes

• Can be used in Jira Work Management, Jira Software, and Jira Service Management new issue view.
• For Jira company-managed projects only.
• This component is returned from a function defined in the app manifest.
• Use the CustomFieldEdit component to further customize the editing experience of a custom field.

Import statement

1
2
import ForgeUI, { CustomField } from "@forge/ui";

Props

Example

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

DashboardGadgetEdit

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.

Import statement

1
2
import ForgeUI, { DashboardGadgetEdit } from "@forge/ui";

Props

onSubmit

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.

Example

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

Preview

This is the dashboard gadget edit mode created by the example code.

DashboardGadget

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.

Import statement

1
2
import ForgeUI, { DashboardGadget } from "@forge/ui";

Props

Example

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

Preview

This is the dashboard gadget view created by the example code.

See DashboardGadgetEdit for an example of an editable gadget.

GlobalPage

Renders a Jira page selected from the Apps section of the main navigation.

Usage notes

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

Import statement

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

Props

Example

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

const App = () => {
    return (
        <GlobalPage>
            <Text>Hello, world!</Text>
        </GlobalPage>
    );
};
export const run = render(<App/>);

IssueAction

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:

Usage notes

IssueAction is the top-level component required for the jira:issueAction module.

Import statement

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

Props

Example

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

IssueActivity

A piece of content displayed in the Activity panel of a Jira issue.

Usage notes

• IssueActivity is the top-level component required for the jira:issueActivity module.
• Can be used in Jira Work Management, Jira Software, and Jira Service Management new issue view .

Import statement

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

Props

Example

1
2
import ForgeUI, { render, IssueActivity, Text } from "@forge/ui";

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

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

IssueContext

A selectable field in the right panel of a Jira issue, which shows/hides content.

Usage notes

• 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.

Import statement

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

Props

Example

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

IssueGlance

A selectable field in the right panel of a Jira issue, which shows/hides content.

Usage notes

• 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.

Import statement

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

Props

Example

1
2
import ForgeUI, { render, IssueGlance, Text } from "@forge/ui";

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

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

IssuePanelAction

An item in the more actions (•••) menu of an IssuePanel.

Usage notes

• It must be provided as an argument to the actions property of the IssuePanel component.
• You can view existing issue panel actions via the more actions (•••) menu.

Import statement

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

Props

Example

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

IssuePanel

A piece of content displayed in the body of a Jira issue.

Usage notes

• IssuePanel is the top-level component required for the jira:issuePanel module.
• Can be used in Jira Work Management, Jira Software, and Jira Service Management new issue view.
• A list of IssuePanelAction components can be provided to add items to the more actions (•••) menu.
• You can view existing issue panel actions via the more actions (•••) menu.

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.

Import statement

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

Props

Example

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

ProjectPage

Renders content of the jira:projectPage module on a Jira page.

Usage notes

ProjectPage is the top-level component required for the jira:projectPage module.

Import statement

1
2
import ForgeUI, { ProjectPage } from "@forge/ui";

Props

Example

1
2
import ForgeUI, { ProjectPage, render, Text } from "@forge/ui";

const App = () => {
  return (
    <ProjectPage>
      <Text>Hello, world!</Text>
    </ProjectPage>
  );
};
export const run = render(<App />);

ProjectSettingsPage

Renders a Jira page selected from the project settings sidebar.

Usage notes

ProjectSettingsPage is the top-level component required for the jira:projectSettingsPage module.

Import statement

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

Props

Example

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

const App = () => {
    return (
        <ProjectSettingsPage>
            <Text>Hello, world!</Text>
        </ProjectSettingsPage>
    );
};
export const run = render(
    <App/>
);

AssetsImportType

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.

Usage notes

• AssetsImportType is a component required for the jiraServiceManagement:assetsImportType module.

Import statement

1
2
import ForgeUI, { AssetsAppImportTypeConfiguration } from "@forge/ui";

Props

Example

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

OrganizationPanel

Renders content of the jiraServiceManagement:organizationPanel module on the Organization page in the Project settings section.

Usage notes

• OrganizationPanel is the top-level component required for the jiraServiceManagement:organizationPanel module.

Import statement

1
2
import ForgeUI, { OrganizationPanel } from "@forge/ui";

Props

Example

1
2
import ForgeUI, { OrganizationPanel, render, Text } from "@forge/ui";

const App = () => {
  return (
    <OrganizationPanel>
      <Text>Hello, world!</Text>
    </OrganizationPanel>
  );
};
export const run = render(<App />);

PortalFooter

Renders content of the jiraServiceManagement:portalFooter module at the bottom of a customer's portal pages.

Usage notes

• PortalFooter is the top-level component required for the jiraServiceManagement:portalFooter module.

Import statement

1
2
import ForgeUI, { PortalFooter } from "@forge/ui";

Props

Example

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

PortalHeader

Renders content of the jiraServiceManagement:portalHeader module at the top of a customer's portal pages.

Usage notes

• PortalHeader is the top-level component required for the jiraServiceManagement:portalHeader module.

Import statement

1
2
import ForgeUI, { PortalHeader } from "@forge/ui";

Props

Example

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

PortalProfilePanel

Renders content of the jiraServiceManagement:portalProfilePanel module on the Portal profile page in the Project settings section.

Usage notes

• PortalProfilePanel is the top-level component required for the jiraServiceManagement:portalProfilePanel module.

Import statement

1
2
import ForgeUI, { PortalProfilePanel } from "@forge/ui";

Props

Example

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

PortalRequestCreatePropertyPanel

Renders content of the jiraServiceManagement:portalRequestCreatePropertyPanel module is displayed on the request creation screen in the customer portal.

Usage notes

• PortalRequestCreatePropertyPanel is the top-level component required for the jiraServiceManagement:PortalRequestCreatePropertyPanel module.

Import statement

1
2
import ForgeUI, { PortalRequestCreatePropertyPanel } from "@forge/ui";

Props

Example

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

PortalRequestDetailPanel

A piece of content displayed in the side panel of a Jira Service Management customer portal request.

Usage notes

• PortalRequestDetailPanel is the top-level component required for the jiraServiceManagement:portalRequestDetailPanel module.
• Can be used in Jira Service Management request view.

Import statement

1
2
import ForgeUI, { PortalRequestDetailPanel } from "@forge/ui";

Props

Example

1
2
import ForgeUI, { PortalRequestDetailPanel, render, Text } from "@forge/ui";

const App = () => {
  return (
    <PortalRequestDetailPanel>
      <Text>Hello, World!</Text>
    </PortalRequestDetailPanel>
  );
};
export const run = render(<App />);

PortalRequestDetail

A piece of content displayed in the body of a Jira Service Management customer portal request.

Usage notes

• PortalRequestDetail is the top-level component required for the jiraServiceManagement:portalRequestDetail module.
• Can be used in Jira Service Management request view.

Import statement

1
2
import ForgeUI, { PortalRequestDetail } from "@forge/ui";

Props

Example

1
2
import ForgeUI, { PortalRequestDetail, render, Text } from "@forge/ui";

const App = () => {
  return (
    <PortalRequestDetail>
      <Text>Hello, World!</Text>
    </PortalRequestDetail>
  );
};
export const run = render(<App />);

PortalRequestViewAction

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:

Usage notes

PortalRequestViewAction is the top-level component required for the jiraServiceManagement:portalRequestViewAction module.

Import statement

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

Props

Example

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

PortalSubheader

Renders content of the jiraServiceManagement:portalSubheader module on a customer's portal pages.

Usage notes

• PortalSubheader is the top-level component required for the jiraServiceManagement:portalSubheader module.

Import statement

1
2
import ForgeUI, { PortalSubheader } from "@forge/ui";

Props

Example

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

PortalTextArea

A field for users to enter multiple lines of text.

Usage notes

• 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.

Import statement

1
2
import ForgeUI, { PortalTextArea } from "@forge/ui";

Props

Example

The example shows PortalTextArea.

1
2
<PortalTextArea
  placeholder="placeholder"
  onBlur={(value) => {
    console.log(value);
  }}
></PortalTextArea>

PortalUserMenuAction

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:

Usage notes

PortalUserMenuAction is the top-level component required for the jiraServiceManagement:portalUserMenuAction module.

Import statement

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

Props

Example

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

QueuePage

Renders content of the jiraServiceManagement:queuePage module on a Jira page.

Usage notes

• QueuePage is the top-level component required for the jiraServiceManagement:queuePage module.

Import statement

1
2
import ForgeUI, { QueuePage } from "@forge/ui";

Props

Example

1
2
import ForgeUI, { QueuePage, render, Text } from "@forge/ui";

const App = () => {
  return (
    <QueuePage>
      <Text>Hello, world!</Text>
    </QueuePage>
  );
};
export const run = render(<App />);