Rate this page:

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

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

Props

NameTypeRequiredDescription
viewForgeExtensionYesThe view code for the custom field. The component that’s passed as the view prop needs to be wrapped in CustomFieldView. Can only contain Avatar, AvatarStack, Fragment, Image, StatusLozenge, DateLozenge, and Text components.

Example

A simple example of the custom field component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import ForgeUI, {
  render,
  useProductContext,
  CustomField,
  CustomFieldView,
  Text,
  StatusLozenge,
} from "@forge/ui";

const App = () => {
  const {
    platformContext: { fieldValue },
  } = useProductContext();

  const fieldAppearance = (value) => {
    switch (value) {
      case "medium":
        return "success";
      case "high":
        return "removed";
      default:
        return "default";
    }
  };

  return (
    <CustomFieldView>
      <Text>
        <StatusLozenge
          text={fieldValue}
          appearance={fieldAppearance(fieldValue)}
        />
      </Text>
    </CustomFieldView>
  );
};

export const run = render(<CustomField view={<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

Rate this page: