How in the world connect dialogs works?

Jira Development Jira Cloud
,
1

So i have this in my atlassian-connect.json

.....
"modules": {
        "dialogs": [
            {
                "url": "/deletionConfirmationDialog",

                "options": {
                  "header": {
                    "value": "Example Dialog"
                  }
                },
                "key": "deletion-confirmation"
              }
        ],
.....

Then this somewhere in my routes:

    app.get('/deletionConfirmationDialog', addon.authenticate(), (req, res) => {
        res.render('deletionConfirmationDialog')
    })

and then some content inside deletionConfirmationDialog.hbs (simplified though)

<html>
<head>
    <script src="{{hostScriptUrl}}" data-options="margin:false" type="text/javascript"></script>
</head>
<body>
    <p>Are you sure you want to delete this?</p>
</div>
</body>
</html>

And lastly call from js file:

AP.dialog.create({
                    key: 'deletion-confirmation',
                    width: '500px',
                    height: '200px'
                }).on("close", (data) => {
                    console.log('Closing')
                });

Now everything above works but, dialog module docs tells nothing that options is required, just url and key, right? So when i remove options property everything should be fine, but i’m facing an error:

Error: The content resolver threw the following error: Unable to retrieve addon module URL. Please check your specified module key.

I basically removed options from worked example and it breaks, though it shouldn’t or should?

Also is there a way to tell which button was pressed: submit or cancel or i should remove chrome option (as i was trying and faced the error above) and make two of my buttons right inside template?

P.S. it’s quite tedious to make something like delete confirmation dialog or other kinds of similar small dialogs, since nothing except dialog module covers whole page, that’s so unfortunate.

2

Hi @alexter_pr,

For reference, you can use our nifty tool: Jira Connect 101 which scaffolds a static connect app that you can use to play around.

Please see: https://developer.atlassian.com/cloud/jira/platform/jsapi/dialog/ docs for more info. You can catch the on close and submit events and add your own logic in it.

You can refer to my sample app as well to see the events.

Cheers,
Anne Calantog

3

Hi, first of all thanks for your help.

But that’s no quite helpfull for me. Your first link shows sources for hipchat app, seems like there is a bit different descriptor schema too, saw that in hipchat cloud development docs too, so, it’s not that usefull, because i already know how to add dialog to descriptor file for jira platform (in attached code in my first comment). Also there is no call for that dialog in client code.

Then of course thanks for that doc link, but i already read that :smiley: And i got working dialog (i attached all i did for that in first comment).

Then looking at your sample app, pretty much there is everything i did as you to add dialog (and it works ofcourse) except for that deprecated calls on AP.require instead of direct use of AP.dialog.
Maybe i’m not that descriptive about the problem i faced?

First of all i have working dialog with 2 buttons (submit and cancel) which is added by dialog itself. Simple default dialog.

In my descriptor file as you can see in first comment i have optins for my dialog, it works. BUT, when i remove options property and just leave url and key, then it breaks! The docs for dialog says that i only must include KEY and URL in my descriptor for dialog to work, so for me that’s a forgotten thing in docs and it should be edited or it’s a bug.

And then second problem, events for the dialog. There is no list of available events of dialog to listen to, except that i can see from examples, like ‘close’. So

dialog.on('submit', function() {
    console.log('submiting');
});

doesn’t work, but with close instead of submit it works, but then there is not distinction on what button was pressed to close dialog submit or cancel/close. The data parameter passed to the function is undefined and according to the docs it’s just what you pass through AP.dialog.close({foo: 123});, but i don’t use this method to close dialog. It closes by using default buttons.
So, there is no way to determine what button was pressed to close dialog inside

dialog.on('close')

Also i had one more try with another example from the docs
disableCloseOnSubmit ()
here’s what the example looks like:

AP.dialog.disableCloseOnSubmit();
AP.events.on('dialog.button.click', function(data){
  if(data.button.name === 'submit') {
    console.log('submit button pressed');
  }
}

And first of all you can see there is a typo in docs (missed parenthesis at the end).
And what is even worse, this example doesn’t work at all, it doesn’t prevent dialog to be closed on submit, and it doesn’t catch dialog.button.click event.

So the problem is still there :frowning:

4

Hi @alexter_pr,

Oops. Corrected my response to go to the right link.

5

That doesn’t help anyway

6

Hi!

I’ve just look our addon code and found that we use dialog.submit event. I.e.

AP.events.on('dialog.submit', function() {
    // ...
});

I’m not sure that it should helps you, because we use dialog as webItem module not dialog. And unfortunately I don’t remember where I found these name :frowning:

7

Hello @iogorodov

Could you tell me how can I get the values on the popup such as, I have an popup with some control on it and how to validate the popup submission?

Thanks
Quách

8

Hi @NguyenQuach,

You can send data from the dialog to your other app modules by emitting events: https://developer.atlassian.com/cloud/jira/platform/jsapi/events/

If you emit an event with your dialog’s form data in it, your other app modules can listen for that event.

9

Hello @mventnor,

Thank you for your response, excuse me for being new in the add-on development skill, I have created an popup using modules.webItems.target.type = “dialog”, the popup contains 2 buttons(submit and cancel) itself.

I added this code and onto page and it can listen the submit button

    <script>
        AP.events.on('dialog.submit', function (e) {
            alert('submit button was clicked!');
            console.log(e.target.value);
            e.preventDefault();
        });
    </script>

There are 2 issues:

  1. The dialog always close without popup validation, I would add this requirement onto the dialog
  2. I would to get the fields values such: $(’#textbox1’).val();. to pass these values to our APIs, Is it possible?

Please suggest
Quách

10

@NguyenQuach

  1. Add a call to AP.dialog.disableCloseOnSubmit(); to stop closing the dialog on submit
  2. Events would be the way to pass values from the dialog to elsewhere. In your dialog.submit callback, you would emit an event using AP.events.emit, and the args object would contain a field with $(’#textbox1’).val(); Then, in the main part of your app, you’d add a listener for that event with AP.events.on.
11

I had the same issue.

In the “sub” article there is a required flag on the header.
https://developer.atlassian.com/cloud/jira/software/modules/dialog-options/

Do agree the dialog module could be clearer.

Mark

12

As for telling if the submit button was pressed, in the js file for the dialog I disable the default behaviour and close the dialog with custom data:

AP.dialog.disableCloseOnSubmit();
AP.events.on('dialog.button.click', (data) => {
  if(data.button.name === 'submit') {
    AP.dialog.close({ submit: true });
  }
});

It is a shame the default behaviour of the chrome submit \ cancel buttons don’t provide any data.

13

Dear Atlassian. Please make it clearer that the options are required on dialog modules in atlassian connect. I have wasted about 7 hours trying out different things only to discover that the options are required on a dialog module. Options are not normally a mandatory characteristic of an object, which is why it never occurred to me to even consider adding them. 7 hours I’ll never get back.

14

Hi Team,

Is there way to get elements values form modal dialog window

image
image836×376 24.2 KB

I need to get the values form the modal on submit and pass it api

please advise

15

Hello. I had the same issue as you. Please have a look at this comment to resolve your issue: AP.dialog 'submit' and 'cancel' events - #5 by ReiPano
Have a nice day :grinning_face_with_smiling_eyes: