This section describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.
We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.
To add the CustomFieldEdit
component to your app:
1 2import { CustomFieldEdit } from '@forge/react/jira';
A CustomFieldEdit
is a wrapper component that provides inline edit features for Forge custom fields in edit mode for apps with isInline
property defined in app's manifest. The wrapper replicates the behavior of all other Jira fields.
Name | Type | Required | Description |
---|---|---|---|
onSubmit | () => void | Yes | Event handler called when the field is submitted. |
hideActionButtons | boolean | No | Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field in the issue view render context. |
children | Forge Element | Yes | The content of the component. |
CustomFieldEdit
is a wrapper around a custom edit implementation for Forge custom fields. Create this implementation using UI Kit components.
1 2import React, { useState, useCallback } from "react"; import { Textfield } from "@forge/react"; import { CustomFieldEdit } from "@forge/react/jira"; import { view } from "@forge/bridge"; const Edit = () => { const [value, setValue] = useState(""); const onSubmit = useCallback(() => { view.submit(value); }, [view, value]); return ( <CustomFieldEdit onSubmit={onSubmit}> <Textfield onChange={(e) => { setValue(e.target.value); }} /> </CustomFieldEdit> ); };
1 2import React, { useState, useCallback } from "react"; import { Select } from "@forge/react"; import { CustomFieldEdit } from "@forge/react/jira"; import { view } from "@forge/bridge"; const Edit = () => { const [value, setValue] = useState("apple"); const onSubmit = useCallback(() => { view.submit(value); }, [view, value]); const selectOptions = [ { label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }, ]; return ( <CustomFieldEdit hideActionButtons onSubmit={onSubmit}> <Select appearance="default" options={selectOptions} onChange={(e) => { setValue(e.value); }} /> </CustomFieldEdit> ); };
1 2import React, { useState, useCallback } from "react"; import { Select, Textfield, Box, Stack } from "@forge/react"; import { CustomFieldEdit } from "@forge/react/jira"; import { view } from "@forge/bridge"; const Edit = () => { const [textValue, setTextValue] = useState("defaultValue"); const [selectValue, setSelectValue] = useState(""); const onSubmit = useCallback(() => { view.submit(`Text: ${textValue} | Select: ${selectValue}`); }, [view, textValue, selectValue]); return ( <CustomFieldEdit onSubmit={onSubmit}> <Box> <Stack space="space.100"> <Select appearance="default" options={[ { label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }, ]} onChange={(e) => { setSelectValue(e.value); }} /> <Textfield defaultValue="defaultValue" onChange={(e) => { setTextValue(e.target.value); }} /> <Textfield /> <Textfield /> </Stack> </Box> </CustomFieldEdit> ); };
On the Issue view, contextual action buttons are rendered next to each field by default. These are a checkmark (confirm edit) and a cross (cancel edit). You can use hideActionButtons
to hide them, but we don’t recommend doing so if you want to maintain consistency with the overall Jira experience.
1 2import React, { useState, useCallback } from "react"; import { Textfield } from "@forge/react"; import { CustomFieldEdit } from "@forge/react/jira"; import { view } from "@forge/bridge"; const Edit = () => { const [value, setValue] = useState(""); const onSubmit = useCallback(() => { view.submit(value); }, [view, value]); return ( <CustomFieldEdit onSubmit={onSubmit} hideActionButtons> <Textfield defaultValue="press enter or click outside to submit the value" onChange={(e) => { setValue(e.target.value); }} /> </CustomFieldEdit> ); };
Rate this page: