Is Ui Modification in Issue View Possible

Forge
, ,
1

Hello

The UiModification is not working for the issue view in Jira.

When I access the issue, the UiModification logic is not being triggered.
example: https://domainexample.atlassian.net/browse/issueKey

To note I added the following configuration:

        {
          projectId,
          issueTypeId,
          viewType: 'IssueView'
        }

Am I missing something?

Thanks,
Ibrahim

2

Hi @IbrahimItani ,

Yes, https://domainexample.atlassian.net/browse/issueKey IssueView is one of the supported entry points.

Do you get any errors or just the logic isn’t being triggered? When running the app in the forge tunnel, do you see the Serving file index.html for resource uiModificationsMain log?

I’ve just managed to update the list of labels in that view with the following onInit code, which contains a lot of `console.log for step-by-step debugging

onInit(
  ({ api, uiModifications }) => {
    console.log('onInit called');
    console.log('api:', api);
    console.log('uiModifications:', uiModifications);

    uiModifications.forEach((uiModification) => {
      console.log(`Data for UI modification ID ${uiModification.id}`, uiModification.data);
    });


    api.getFields().forEach((field) => {
      console.log(`Field ${field.getId()} has value ${field.getValue()}`);
    });

    try {
      console.log(`getId: ${api.getFieldById('labels').getId()} `);
      console.log(`getName: ${api.getFieldById('labels').getName()} `);
      console.log(`getType: ${api.getFieldById('labels').getType()} `);
      console.log(`getValue: ${JSON.stringify(api.getFieldById('labels').getValue())} `);
      // the field is an array of strings
      api.getFieldById('labels').setValue(['label1', 'label2']);
      console.log('Set value for labels field');
    } catch (error) {
      console.error('Error setting value for labels field:', error);
    }
  },
  () => {
    console.log('onInit fields callback called');
    return ['labels'];
  }
);

Here is a screenshot so that you can see the labels being applied:

image
image2592×1254 332 KB

A few things to keep in mind:

  • UI Modifications are only supported on Software projects
  • double-check which field is being modified
  • double-check the project and IssueType ID used when creating the UiModification

Let us know how it goes,
Caterina

3

Hello

Thanks for the response above.

I realized that the API initializing the UI modification logic is triggered only upon app installation. Whenever I made updates in this class, the logic that calls the API wasn’t being executed.

So, I uninstalled and reinstalled the app, and it worked

  trigger:
    - key: xyz
      function: main
      events:
        - avi:forge:installed:app

Regards,
Ibrahim

1 Like
4

That’s right @IbrahimItani, that’s how the CLI template is set up.

The sample app in this repository (Bitbucket) uses a different approaches and creates an admin panel to enable/disable UI Modifications for each project.
You can see an example of that here: https://youtu.be/2cjWkEUJTnw?t=860

Cheers,
Caterina

1 Like