CustomFieldEdit

A modal dialog used to edit a CustomField. The modal dialog opens when the CustomField is selected in Jira.

Example of a custom field in edit mode with the above sample code

Usage notes

This component is the top-level component required for the edit property of the jira:customField module.
Can be used in Jira Work Management, Jira Software, and Jira Service Management new issue view.

Import statement

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

Props

Name	Type	Required	Description
`children`	`Array<ForgeComponent>`	Yes	A container for displaying multiple components. Can contain any component except for `Form`, `ConfigForm`, `MacroConfig`, and all extension-specific components.
`onSubmit`	`(formData: FormData) => Promise<CustomFieldValue> \| CustomFieldValue`	Yes	An event handler that can be asynchronous. The argument, formData, is an object of input field keys and their values (see example below). The return value is either the field value or a promise that’s resolved with the returned field value. The value is checked against the validation expression defined in the manifest and must be the same type as custom field.
`width`	`"small" \| "medium" \| "large" \| "x-large"`		The width of the edit dialog. This can range from the width of a small pop-up to a pop-up that’s almost full-screen. Defaults to `medium`.
`header`	`string`		The title of the edit dialog. Defaults to `Custom field edit`.

onSubmit

The value returned from the onSubmit function must be of the same type as the custom field. For example, for a custom field of type string, the value returned from onSubmit should also be a string.

For custom fields storing collections of values, where for example you've set the type to be string and collection to be list, the value returned from onSubmit should be an array of strings. Otherwise, the custom field will not be saved at all.

Example

1
2
import ForgeUI, {
  render,
  CustomFieldEdit,
  Select,
  Option,
} from "@forge/ui";

const Edit = () => {
  const onSubmit = (values) => values.valueSelect;

  return (
    <CustomFieldEdit onSubmit={onSubmit} width="small" header="Example header">
      <Select label="Select Value " name="valueSelect">
        <Option label="low" value="low" />
        <Option label="medium" value="medium" />
        <Option label="high" value="high" />
      </Select>
    </CustomFieldEdit>
  );
};

export const runEdit = render(<Edit />);