Common UI kit components
Confluence UI kit components
Jira UI kit components

Rate this page:

CustomFieldContextConfig

The CustomFieldContextConfig component is returned from a function defined in the contextConfig property in the app manifest. When the component is returned, a view of the custom field type configuration details for a context are rendered.

This component can be used in Jira Core, Jira Software, and Jira Service Management to render a configured view of the field in a custom field context.

Usage

1
import ForgeUI, { CustomFieldContextConfig } from "@forge/ui";

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any component except for Form, ConfigForm, MacroConfig, and all extension-specific components.
onSubmit(formData: FormData) => Promise<any> | anyYesAn event handler that can be asynchronous. The argument, formData, is an object of input field keys and their values (see the following example). The return value is either the field configuration or a promise that’s resolved with the returned field configuration.

Example

This example shows how configuration details defining the maximum and minimum values for a slider component type can be retrieved, displayed, and saved. The example uses the useProductContext hook to extract the extensionContext that stores the configuration. Any modified configuration is then saved with the onSubmit method of the 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
25
26
import ForgeUI, {
  render,
  useProductContext,
  CustomFieldContextConfig,
  TextField,
} from "@forge/ui";

const ContextConfig = () => {
  const {extensionContext: {configuration = {}}} = useProductContext();
  
  const onSubmit = (formData) => ({
      configuration: {
          minValue: +formData.minValue || 0, 
          maxValue: +formData.maxValue || 100,
      }
  });

  return (
    <CustomFieldContextConfig onSubmit={onSubmit}>
      <TextField name="minValue" label="Minimum value" defaultValue={configuration.minValue}/>
      <TextField name="maxValue" label="Maximum value" defaultValue={configuration.maxValue}/>
    </CustomFieldContextConfig>
  );
};

export const runContextConfig = render(<ContextConfig />);

Preview

This screenshot shows the slider component's custom field context configuration page in edit mode.

Example of a custom field type context configuration page in edit mode, based on the preceding example code.

Rate this page: