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 2import 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 2import 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: