Rate this page:

CustomFieldEdit

The CustomFieldEdit component is returned from a function defined in the edit property in the app manifest. When the component is returned, an edit view of the custom field is rendered.

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

Usage

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

Props

NameTypeRequiredDescription
childrenArrayYesA container for displaying multiple components. Can contain any component with the exception of Form, ConfigForm, MacroConfig and CustomFieldEdit.
onSave(formData: FormData) => PromiseYesAn 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 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".
headerstringThe title of the edit dialog. Defaults to Custom field edit.

onSave

The value returned from the onSave function must be of the same type as the custom field. For example, for a custom field of type string, the value returned from onSave 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 onSave should be an array of strings. Otherwise, the custom field will not be saved at all.

Example

A simple example of the custom field edit 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
import ForgeUI, {
  render,
  Fragment,
  useProductContext,
  CustomFieldEdit,
  Select,
  Option,
} from "@forge/ui";

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

  return (
    <CustomFieldEdit onSave={onSave} 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 />);

Preview

Displays the custom field edit dialog.

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

Rate this page: