Forge Developer

Beta

Forge Developer

Beta

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 } from "@forge/ui";

Props

NameTypeRequiredDescription
childrenArrayYesThe 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.

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
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

Rate this page: