Issue creation dialog doesn't work with custom UI (library @atlaskit)

Hello

I implemented two types of customfield with an object as data type. Schemas are below.

schema:
        properties:
          key:
            type: string
          view:
            type: string
schema:
        properties:
          key:
            type: array
            items:
              type: string
          view:
            type: array
            items:
              type: string

I’ve been used a Select field from @atlaskit. So I have two problem with my fields in issue creation modal dialog.

  1. Menu of field is rendered wrong. See image below.

  2. Selected options aren’t submitted.

Could somebody explain to me how this is supposed to work? There is very little information in the documentation about this.

Hi @Alex_Basatski
Thanks for bringing this up.
The first issue you brought looks like a bug we’re investigating. There is a public issue that you can track: [FRGE-1121] - Ecosystem Jira. I’ll notify a team investigating it about your case.
Can you elaborate a little about the second issue? How are you selecting options that you want to submit?

Hi @PawelRacki
Thank you for your answer. I’ll track this issue.
Though the menu is rendered wrong I can choose options for submitting. But after issue creating, my fields remain empty. I suspect this is my fault. I don’t fully understand the process of creating a new issue and submitting field values during that process. I don’t have enough information.
Could you give me more details about how it should work? Do I have to wrap my field, for example, <form/>? Maybe I should implement some method.

Ok, I think I have more context now. So, when using custom UI its app builder who is responsible for submitting the data. That means you need to use forge bridge to do it. You can trigger data submission whenever you want. It can happen when picking an item from a select, it can happen on clicking a button or it can even happen when the user changes a focus to a different place in Jira. It all depends on the way the app builder codes the solution.

Here is a short description of how editing looks like when using custom UI. It has a reference to custom UI bridge that has a short example of how to use submit method.

Also I suggest you try creating a new forge custom ui custom field (or custom field type) app. When you’re done with forge create you’ll get a template app that has a working example of how the submit can be implemented. I hope it will guide you how to proceed. Let me know if you need any additional help

Paweł

1 Like

Thank you @PawelRacki. But I carefully studied the documentation, so I am aware of these methods. These methods have been used for submitting values in an edit mode my fields.
My question is purely about the create issue modal. How should it be implemented there? Does the field have to submit a value after selecting any options? The issue doesn’t exist. How does Jira know what issue this submitted value refers to?

In create issue modal forge custom fields are rendered using edit entry point which means you’re using the same code as you’re using in issue view in edit mode. You can use view.getContext() in your code to write some logics that renders different versions of UI in different renderContext (‘issue-view’ or ‘issue-create’).

Jumping back to your questions:

Does the field have to submit a value after selecting any options?

No, it doesn’t have to submit any value, but if you decide to create an issue, it won’t have any value associated for that custom field in that issue. You need to decide on your own when and how to submit the value in create issue dialog (e.g. in onSelect in that component) If you decide to do it like that, it means basically something like this: “if the issue will be created, it will have the previously submitted value for that custom field”. Also, if you decide to submit a value for your field that needs to resolve a promise and then you instantly click “create” in create issue dialog then the dialog will wait for ~10 seconds for that promise to resolve (in case the field is not marked as required). If after this time the promise is still unresolved it will timeout and create an issue without this value.

1 Like

OK, @PawelRacki . Is it correct that I must use the method view.submit(fieldValue) for submitting values before the issue is created?
If it’s true, I don’t think it’s obviously so. Could you add this to the documentation?

Is it correct that I must use the method view.submit(fieldValue) for submitting values before the issue is created?

Yes, that’s correct. Thanks for your feedback @Alex_Basatski. I’ll forward this to my team and we’ll definitely consider updating the documentation and include your feedback in it

1 Like

@PawelRacki thank you for your help.

1 Like

I found some temporary solution for the first issue connecting the rendering field.
Cause:
The field is rendered in an iframe. As follows from this information, some script should change the height of the iframe when the height of the element changes. But in our case (select field), the script doesn’t do it.
Temporary Solution:
I wrapped my field into a <div><AsyncSelect/></div>. Then I change a height of the <div></div> in functions onMenuOpen and onMenuClose of my field. The script responds to changing the height of the the <div></div>.

@PawelRacki you could suggest this workaround to the developers until the issue is resolved.