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:

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

A CustomField in edit mode:

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

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

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.

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