Is it possible to show a modal dialog from an issue glance?

Jira Development Jira Cloud
, ,
1

Inside my glance I have a dialog2 defined. When i show the dialog via JS AJS.dialog2("#import-dialog").show(); the dialog is rendered inside the iframe of the glance and not in the root frame of the browser. Is there a way to do this for an add-on?

2

Hi @SebastianK81,

I think you want to declare a dialog module in your descriptor and then use the JavaScript API to open the dialog. Specifically, you should invoke AP.dialog.create(options). See Dialog.

Regards,
Dugald

3

Hi @dmorrow,

thank you for helping out! How can I pass arguments to my dialog when opening it with javascript?
In my atlassian-connect.json I have:

        "dialogs": [
            {
                "url": "/import-dialog?factSheetId={ac.factSheetId}",
                "options": {
                    "size": "large",
                    "header": {
                        "value": "Link Fact Sheet"
                    }
                },
                "key": "import-dialog"
            }
        ],

But the options are expecting a key, not an url:

AP.dialog.create({
  key: 'import-dialog',
  width: '500px',
  height: '200px',
  chrome: true,
  buttons: [
    {
      text: 'my button',
      identifier: 'my_unique_identifier'
    }
  ]
}).on("close", callbackFunc);
4

@dmorrow okay, I got it:

In the JS I had to define:

           AP.require('dialog', function(dialog){
               dialog.create({
                   key: 'import-dialog',
                   customData: {
                     factSheetId: '1312989128129', //WITHOUT leading ac.
                   }
               }).on("close", function() {

               });
           });

This works perfectly fine in combination with further context variables:

        "dialogs": [
            {
                "url": "/import-dialog?factSheetId={ac.factSheetId}&issueId={issue.id}",
                "options": {
                    "size": "large",
                    "header": {
                        "value": "Link Fact Sheet"
                    }
                },
                "key": "import-dialog"
            }
        ],

Where {issue.id} will be automatically set by the API if you are in the context of a single issue.

5

Hi @SebastianK81,

Glad you’re up and running. You can make your code a little cleaner now by removing the require syntax since the dialog API is attached to the AP global object. So now just call AP.dialog.create(...).

Regards,
Dugald

1 Like