UI kit components

Rate this page:

CustomField

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

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

This component can only be used in Jira company-managed projects.

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, Badge, Code, DateLozenge Fragment, Image, StatusLozenge, Text, and Tooltip 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: