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.

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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for the components to display on the page. Can contain any UI kit component.

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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for the components to display on the page. Can contain any UI kit component.

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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for the components to display on the page. Can contain any UI kit component.

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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for the components to display on the page. Can contain any UI kit component.

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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for the components to display on the page. Can contain any UI kit component.

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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for the components to display on the page. Can contain any UI kit component.

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

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

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

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

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

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

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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for the components to display on the page. Can contain any UI kit component.

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

Import statement

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

Props

NameTypeRequiredDescription
isMonospacedbooleanWhether or not to style the text as monospaced.
placeholderstringThe placeholder helper text.
spellCheckbooleanThe HTML attribute that determines whether the text should be checked for spelling errors. Defaults to false.
ValuestringThe text value of the field.

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

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

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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for the components to display on the page. Can contain any UI kit component.

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

Rate this page: