Custom UI bridge
Custom UI Jira bridge

Rate this page:

uiModifications

To consume the UI Modifications (UIM) API, your app needs to import the @forge/jira-bridge package:

1
2
import { uiModificationsApi } from '@forge/jira-bridge';

This API is strictly related to the Jira UI modifications module

Initialization

onInit method signature

1
2
onInit(<initCallback>, <registerFieldsCallback>): void

onInit method description

initCallback is where apps can query field data and request modifications. registerFieldsCallback is used to specify which fields will be changed by initCallback. The information returned by registerFieldsCallback is used to display a loading indicator next to the relevant fields until initCallback finishes.

Both callback functions are called every time:

  • the Global Issue Create (GIC) or Issue view is opened from a supported entry point
  • the project or issueType (from context) changes
  • GIC only: an issue is created with the create another issue checkbox enabled

The initCallback function will receive one object as an argument. This object contains the following attributes:

  • api - the API used to find and modify the fields
  • uiModifications - an array of UIM entities registered for a given context

The registerFieldsCallback function will receive an object containing:

  • uiModifications - an array of UIM entities registered for a given context
1
2
uiModificationsApi.onInit(({ api, uiModifications }) => {
  // You can find form fields using the FieldQueryingAPI here
  const summary = api.getFieldById('summary');
  // You can manipulate the fields you found
  if (summary) {
    summary.setDescription('New summary description');
  }
}, ({ uiModifications }) => {
  // This function should return an array of the IDs of the fields
  // which are going to be changed in initCallback
  return ['summary'];
})

All modifications requested synchronously using this API will be batched and applied at once. That means that consecutive modifications applied by the same FieldAPI method within the onInit callback will override the previous ones.

1
2
uiModificationsApi.onInit(({ api }) => {
    const { getFieldById } = api;
    const summary = getFieldById('summary');

    summary.setDescription('First description'); // will be overridden by the next `summary.setDescription` call
    summary.setDescription('Second description'); //  this change will be applied
}, ({ uiModifications }) => {
    return ['summary'];
})

If a Promise is returned from the callback, all of the modifications will be postponed until the Promise resolves. This may be useful in a scenario when the app needs to perform an async operation before it requests a change.

Warning

UIM blocks any changes requested for fields within initCallback for any field IDs not in the array returned from registerFieldsCallback.

Warning

If the initCallback doesn’t return a Promise which resolves after all field modification requests are made, then field modifications requested asynchronously will be ignored.

Reacting to change

onChange method signature

1
2
onChange(<changeCallback>, <registerFieldsCallback>): void

onChange method description

changeCallback is where apps can query field data and request modifications. registerFieldsCallback is used to specify which fields will be changed by changeCallback. The information returned by registerFieldsCallback is used to display a loading indicator next to the relevant fields until changeCallback finishes.

Both callback functions are called every time:

  • the blur field event is triggered by one of the supported text fields, which are summary and description
  • the change field event is triggered by any other supported field (for select-type fields when the user picks an option; for Issue view when the user commits a value)

The changeCallback function will receive one object as an argument. This object contains the following attributes:

  • api - the API used to find and modify the fields
  • change - an object with the current attribute containing the object exposing the FieldAPI of the field which triggered the change event
  • uiModifications - an array of UIM entities registered for a given context

The registerFieldsCallback function will receive an object containing:

  • change - an object with the current attribute containing the object exposing the FieldAPI of the field which triggered the change event
  • uiModifications - an array of UIM entities registered for a given context
1
2
uiModificationsApi.onChange(({ api, change, uiModifications }) => {
  // You can find form fields using the FieldQueryingAPI here
  // You can also manipulate the fields you found or access the field
  // that triggered the change
  const { current } = change;
  if (current.getId() === 'summary') {
    // hint: You may want to read the content of uiModifications before
    // deciding what changes need to be applied here
    current.setDescription('New summary description');
  }
}, ({ change, uiModifications }) => {
  // This function should return an array of the IDs of the fields
  // which are going to be changed in changeCallback
  return ['summary'];
})

All modifications requested synchronously using this API will be batched and applied at once. That means that consecutive modifications applied by the same FieldAPI method within the onChange callback will override the previous ones.

1
2
uiModificationsApi.onChange(({ api }) => {
    const { getFieldById } = api;
    const summary = getFieldById('summary');

    summary.setDescription('First description'); // will be overridden by the next `summary.setDescription` call
    summary.setDescription('Second description'); //  this change will be applied
}, ({ uiModifications }) => {
    return ['summary'];
})

If a Promise is returned from the callback, all of the modifications will be postponed until the Promise resolves. This may be useful in a scenario when the app needs to perform an async operation before it requests a change.

Warning

UIM blocks any changes requested for fields within changeCallback for any field IDs not in the array returned from registerFieldsCallback.

Warning

If the changeCallback doesn’t return a Promise which resolves after all field modification requests are made, then field modifications requested asynchronously will be ignored.

Querying fields

getFieldById method signature

1
2
getFieldById<fieldType>(<fieldId>): FieldAPI | undefined

getFieldById method description

Uses the generic: fieldType (string) - the type of the field that the app wants to work on.

Accepts one argument: fieldId (string) - the ID of the field which the app wants to work on.

Returns the FieldAPI object if the field exists on the GIC or Issue view.

Returns undefined if the field doesn't exist or isn’t supported by UIM.

Example of usage with regular field:

1
2
uiModificationsApi.onInit(({ api }) => {
  const { getFieldById } = api;
  const description = getFieldById('description')
  // You can perform operations on 'description'
  // field using the FieldAPI here
}, () => ['description'])

Example of usage with custom field:

1
2
    uiModificationsApi.onInit(({ api }) => {
    const { getFieldById } = api;
    const select = getFieldById<'com.atlassian.jira.plugin.system.customfieldtypes:select'>('customfield_10035')
    // You can perform operations on 'customfield_10035'
    // single select field using the FieldAPI here
}, () => ['customfield_10035'])

Iterating over supported fields

getFields method signature

1
2
getFields(): FieldAPI[]

getFields method description

Returns an array of FieldAPI objects with all supported fields available on a current view form.

Example of usage:

1
2
uiModificationsApi.onInit(({ api }) => {
  const { getFields } = api;
  const fields = getFields();
  // You can iterate over fields
  // and perform operations on each
  // field using the FieldAPI here
}, () => []) 

Supported fields per view

GIC

Field / methodssetName
getName
setDescription
getDescription
setVisible
isVisible
setValue
getValue
setReadOnly
isReadOnly
setRequired
isRequired
setOptionsVisibility
getOptionsVisibility
issue type no no no yes no no yes
priority yes yes yes yes yes yes yes
summary yes yes yes yes yes no no
assignee yes yes yes yes yes yes no
reporter yes yes yes yes yes yes no
labels yes yes yes yes yes yes no
description yes yes yes yes yes yes no
components yes yes yes yes yes yes no
fix versions yes yes yes yes yes yes no
single select yes yes yes yes yes yes yes
multiple select yes yes yes yes yes yes yes
checkboxes yes yes yes yes yes yes yes
paragraph yes yes yes yes yes yes no
text field yes yes yes yes yes yes no
user picker yes yes yes yes yes yes no
multiple user picker yes yes yes yes yes yes no
people yes yes yes yes yes yes no

Issue View (preview)

This page 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.

Field / methodssetName
getName
setDescription
getDescription
setVisible
isVisible
setValue
getValue
setReadOnly
isReadOnly
setRequired
isRequired
setOptionsVisibility
getOptionsVisibility
priority yes no yes yes yes no no
summary no no no yes yes no no
assignee yes no yes yes yes no no
description yes no yes yes yes no no

Common FieldAPI

Warning

The changes requested by setters in this API are not applied immediately. They are batched and their application is postponed until the onInit or onChange callback execution ends. This means that reading the values using getters will always provide the initial form field state, which is immutable.

getId

1
2
getId(): string

Returns the field's ID.

getType

1
2
getType(): FieldType

Returns the field's type.

setName

1
2
setName(value: string): FieldAPI

Changes the field's name.

Example:

1
2
field.setName('New name for the field');

getName

1
2
getName(): string

Returns the field's name.

setDescription

1
2
setDescription(value: string): FieldAPI

Changes the field's description.

Example:

1
2
field.setDescription('This the description!');

getDescription

1
2
getDescription(): string

Returns the field’s description.

setVisible

1
2
setVisible(value: boolean): FieldAPI

Changes field visibility. The form payload will contain the field’s value, but the field won’t be visible in the UI if this is set to false.

Example:

1
2
field.setVisible(false);

isVisible

1
2
isVisible(): boolean

Returns true if the field is currently visible. Returns false otherwise.

setValue

1
2
setValue(value: unknown): FieldAPI

Set a given field's value. See the specific field value contracts in the supported fields below to make sure the changes requested by this method will be applied.

getValue

1
2
getValue(): unknown

Set a given field's value. See the specific field value contracts in the supported fields below to make sure the changes requested by this method will be applied.

setReadOnly

1
2
setReadOnly(value: boolean): FieldAPI

Set if a given field’s value is read-only. If true, the form payload will contain the field’s value, but the user won’t be able to modify the value in the UI.

Example:

1
2
field.setReadOnly(true);

isReadOnly

1
2
isReadOnly(): boolean

Returns true if the field's value currently can't be modified. Returns false otherwise.

setRequired

1
2
setRequired(value: boolean): FieldAPI

Set a given field as required. Fields required by system configuration can't be set to non-required. Example:

1
2
field.setRequired(true);

isRequired

1
2
isRequired(): boolean

Returns true if the field is currently required. Returns false otherwise.

setOptionsVisibility

1
2
setOptionsVisibility(options: string[], isVisible: boolean): FieldAPI

Applies a visibility rule based on a list of option ids and isVisible arguments for a given field's dropdown list of options.

Note that the method only allows you to either make some options visible or make some options hidden, not both.

Example:

1
2
// Only display the enumerated options, others will be hidden
field.setOptionsVisibility(['field-option-id-1', 'field-option-id-2'], true);

// Only hide the enumerated options, others will be visible
field.setOptionsVisibility(['field-option-id-1', 'field-option-id-2'], false);

// Special case, hide all options in the dropdown
field.setOptionsVisibility([], true);

Options hidden in the dropdown can still be selected as a field's default value or by using field.setValue.

getOptionsVisibility

1
2
getOptionsVisibility(): OptionsVisibility | undefined

Returns an object containing the isVisible: boolean and options: string[] attributes. The options attribute contains IDs of options with modified visibility.

Note that invalid option IDs previously used to call setOptionsVisibility won't be returned here.

This method, when called within the onInit callback, always returns undefined, meaning the visibility of options wasn't yet modified by setOptionsVisibility.

Field details

issue type

type: issuetype

setValue signature

Warning

The execution of the setValue method will initiate a UIM context change. Issue type is a part of the UIM invocation context. Changing the issue type with setValue changes that context.

UI modifications won’t be applied to an issue type field that’s out of the UIM app invocation context.

Note that issue types have different UIM app invocation contexts, so UIM functionality may not be applied the same way, in particular when it comes to setting visibility of options.

1
2
setValue(id: string): FieldAPI

getValue signature

1
2
getValue(): IssueTypeField

issue type field shape

1
2
{
    id: string,
    name: string,
}

Reference screenshots

priority

type: priority

setValue signature

Deprecation notice

The following setValue signature setValue(value: PriorityField): FieldAPI is deprecated and will be removed after June 28, 2023.

1
2
setValue(id: string): FieldAPI

getValue signature

1
2
getValue(): PriorityField

Priority field shape

1
2
{ 
  id: string,   // '2'
  name: string, // 'High'
  iconUrl?: string,
}

Reference screenshot

summary

type: summary

setValue signature

1
2
setValue(id: SummaryField): FieldAPI

getValue signature

1
2
getValue(): SummaryField

Summary field shape

1
2
string

Reference screenshot

assignee

type: assignee

setValue signature

Special values

Deprecation notice

The following setValue signature setValue(value: AssigneeField): FieldAPI is deprecated and will be removed after June 28, 2023.

1
2
setValue(accountId: string | null): FieldAPI

getValue signature

1
2
getValue(): AssigneeField

Assignee field shape

Deprecation notice

displayName and avatarUrls properties in an assignee field shape are deprecated and will be removed after June 28, 2023. The new shape will contain accountId only.

1
2
null | {
    accountId: string,
    /** @deprecated will be removed */
    displayName: string,
    /** @deprecated will be removed */
    avatarUrls?: {
        '48x48': string,
    }
}

Known limitation

The number of unique accountIds that can be set via the setValue method can't be greater than 90 per one batched update. This means that all calls to setValue for user-based fields performed in a single onInit or onChange callback are counted against this limit.

Reference screenshot

reporter

type: reporter

setValue signature

Special values

Use null to unset the value.

1
2
setValue(accountId: string | null): FieldAPI

getValue signature

1
2
getValue(): ReporterField

reporter field shape

1
2
null | {  accountId: string }

Known limitation

The number of unique accountIds that can be set via the setValue method can't be greater than 90 per one batched update. This means that all calls to setValue for user-based fields performed in a single onInit or onChange callback are counted against this limit.

Reference screenshots

labels

type: labels

setValue signature

1
2
setValue(ids: string[]): FieldAPI

getValue signature

1
2
getValue(): LabelsField

labels field shape

1
2
string[]

Reference screenshot

description

type: description

Warning

setValue signature

1
2
setValue(id: DescriptionField): FieldAPI

getValue signature

1
2
getValue(): DescriptionField

description field shape

1
2
string // Plain-text editor
|
type ADF = {
    version: 1,
    type: 'doc',
    content: Node[]
} // Rich-text editor (ADF format)
// https://developer.atlassian.com/cloud/jira/platform/apis/document/structure/

Reference screenshots

components

type: components

Field usage

setValue signature

Special values

Use [] to unset the value.

1
2
setValue(ids: string[]): FieldAPI

getValue signature

1
2
getValue(): ComponentsField

components field shape

1
2
[
    {
        id: string,
        name: string,
    },
    {
        id: string,
        name: string,
    },
    ...
  ]

Reference screenshots

fix versions

type: fixVersions

setValue signature

Special values

Use [] to unset the value.

1
2
setValue(ids: string[]): FieldAPI

getValue signature

1
2
getValue(): FixVersionsField

fix versions field shape

1
2
[
    {
        id: string,
        name: string,
    },
    {
        id: string,
        name: string,
    },
    ...
  ]

Reference screenshots

single select

type: com.atlassian.jira.plugin.system.customfieldtypes:select

setValue signature

Special values

Use null to unset the value.

Deprecation notice

The following setValue signature setValue(value: SelectField): FieldAPI is deprecated and will be removed after June 28, 2023.

1
2
setValue(id: string): FieldAPI

getValue signature

1
2
getValue(): SelectField

select field shape

Deprecation notice

The name property will be removed in favor of the value property after June 28, 2023.

1
2
null | {
    id: string,
    value: string,
    /** @deprecated use `value` instead of `name` */
    name: string
}

Reference screenshots

multiple select

type: com.atlassian.jira.plugin.system.customfieldtypes:multiselect

setValue signature

Special values

Use [] to unset the value.

Deprecation notice

The following setValue signature setValue(value: MultiSelectField): FieldAPI is deprecated and will be removed after June 28, 2023.

1
2
setValue(ids: string[]): FieldAPI

getValue signature

1
2
getValue(): MultiSelectField

multiple select field shape

Deprecation notice

The name property will be removed in favor of the value property after June 28, 2023.

1
2
[
    {
        id: string,
        value: string,
        /** @deprecated use `value` instead of `name` */
        name: string
    },
    {
        id: string,
        value: string,
        /** @deprecated use `value` instead of `name` */
        name: string
    },
    ...
]

Reference screenshots

checkboxes

type: com.atlassian.jira.plugin.system.customfieldtypes:multicheckboxes

setValue signature

Special values

Use [] to unset the value.

1
2
setValue(ids: string[]): FieldAPI

getValue signature

1
2
getValue(): MultiCheckboxesField

checkboxes field shape

1
2
[
    {
        id: string,
        value: string,
    },
    {
        id: string,
        value: string,
    },
    ...
]

Reference screenshots

paragraph

type: com.atlassian.jira.plugin.system.customfieldtypes:textarea

setValue signature

1
2
setValue(value: ParagraphField): FieldAPI

getValue signature

1
2
getValue(): ParagraphField

paragraph field shape

1
2
string // Plain-text editor
|
type ADF = {
    version: 1,
    type: 'doc',
    content: Node[]
} // Rich-text editor (ADF format)
// https://developer.atlassian.com/cloud/jira/platform/apis/document/structure/

Reference screenshots

text field

type: com.atlassian.jira.plugin.system.customfieldtypes:textfield

setValue signature

1
2
setValue(value: TextField): FieldAPI

getValue signature

1
2
getValue(): TextField

text field shape

1
2
string // Plain-text editor

Reference screenshots

user picker

type: com.atlassian.jira.plugin.system.customfieldtypes:userpicker

setValue signature

Special values

Use null to unset the value.

Deprecation notice

The following setValue signature setValue(value: UserPickerField): FieldAPI is deprecated and will be removed after June 28, 2023.

1
2
setValue(accountId: string | null): FieldAPI

getValue signature

1
2
getValue(): UserPickerField

user picker field shape

Deprecation notice

displayName and avatarUrls properties in user picker field shape are deprecated and will be removed after June 28, 2023. The new shape will contain accountId only.

1
2
null | {
    accountId: string,
    /** @deprecated will be removed */
    displayName: string,
    /** @deprecated will be removed */
    avatarUrls?: {
        '48x48': string,
    }
}

Known limitation

The number of unique accountIds that can be set via the setValue method can't be greater than 90 per one batched update. This means that all calls to setValue for user-based fields performed in a single onInit or onChange callback are counted against this limit.

Reference screenshots

multiple user picker

type: com.atlassian.jira.plugin.system.customfieldtypes:multiuserpicker

setValue signature

Special values

Use [] to unset the value.

Deprecation notice

The following setValue signature setValue(value: MultiUserPickerField): FieldAPI is deprecated and will be removed after June 28, 2023.

1
2
setValue(accountId: string[]): FieldAPI

getValue signature

1
2
getValue(): MultiUserPickerField

multiple user picker field shape

Deprecation notice

displayName and avatarUrls properties in multiple user picker field shape are deprecated and will be removed after June 28, 2023. The new shape will contain accountId only.

1
2
[
    {
        accountId: string,
        /** @deprecated will be removed */
        displayName: string,
        /** @deprecated will be removed */
        avatarUrls? : {
            '48x48': string,
        }
    },
    {
        accountId: string,
        /** @deprecated will be removed */
        displayName: string,
        /** @deprecated will be removed */
        avatarUrls? : {
            '48x48': string,
        }
    },
    ...
  ]

Known limitation

The number of unique accountIds that can be set via the setValue method can't be greater than 90 per one batched update. This means that all calls to setValue for user-based fields performed in a single onInit or onChange callback are counted against this limit.

Reference screenshots

people

type: com.atlassian.jira.plugin.system.customfieldtypes:people

Field usage

Warning

The people field can be configured using either the single or multiple value field. In the case of a single value configuration, only the first value from the array provided via the setValue will be displayed in the field.

setValue signature

Special values

Use [] to unset the value.

1
2
setValue(accountId: string[]): FieldAPI

getValue signature

1
2
getValue(): PeopleField

people field shape

1
2
[
    {
        accountId: string,
    },
    {
        accountId: string,
    },
    ...
  ]

Known limitation

The number of unique accountIds that can be set via the setValue method can't be greater than 90 per one batched update. This means that all calls to setValue for user-based fields performed in a single onInit or onChange callback are counted against this limit.

Reference screenshots

Rate this page: