Common UI kit components
Confluence UI kit components
Jira UI kit components

Rate this page:

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

Import statement

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

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

Rate this page: