CustomField

The CustomField component is returned from a function defined in the app manifest to render content for a custom field.

This component can be used in Jira Core, Jira Software, and Jira Service Desk to render the field in the new issue view.

You can also consider using the CustomFieldEdit component to further customize the editing experience of a custom field.

Usage

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

Props

Name	Type	Required	Description
`children`	`Array`	Yes	The view code for the custom field. Can only contain `Avatar`, `AvatarStack`, `Fragment`, `Image`, `StatusLozenge`, `DateLozenge`, and `Text` components.

Example

A simple example of the custom field component.

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

Preview

Displays the custom field view.

Example of a custom field in view mode with the above sample code

In edit state, custom fields use the built-in mechanism of Jira to update the field values.

Example of a custom field in edit mode with the above sample code

Forge Developer