Common UI kit components
Confluence UI kit components
Jira UI kit components
Jira Service Management 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
2
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
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: