Rate this page:
A modal dialog used to edit a CustomField.
The modal dialog opens when the CustomField
is selected in Jira.
edit
property of the
jira:customField
module.1 2import ForgeUI, { CustomField, CustomFieldView, CustomFieldEdit } from "@forge/ui";
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 . |
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.
1 2import 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 />);
Rate this page: