Render dialog from Workflow Post Function?

Jira Development Jira Cloud
, , ,
3

Here’s how I resolved this question. Hopefully this will help someone, and better yet, if anyone sees anyway to improve the logic, that would be grand.

I used atlassian-connect-express and its built-in support for express-hbs templates, and I implemented the following.

I configured modules in atlassian-connect.json for a webPanel which displays some pertinent data and also serves as a foundational component for event delegation, a webhook which fires when an issue is updated, and a webItem which renders a dialog (see below.)

Using the issue.key passed as a URL parameter to the webPanel, I get the issue json via /api/2/issue/{issue.key}. From this data, I extract issue.fields.status.name

I then pass the issuekey and status to the render function for an hbs template in a route callback in index.js

/routes/index.js

app.all('/es', addon.checkValidToken(),  function (req, res) { 
     ...
     res.render('es/es',{issuekey:issuekey,status:status});
     ...
}

The status value is injected into the webPanel scope using token expansion in the hbs layout. Then the value of status, the current status of the issue, is available in es.js

/views/layout_es.hbs

<body>
  ...
  <script>
    // Push the current issue status value to the script scope
    var status = "{{status}}";
  </script>
  <script src="{{furl '/js/es.js'}}"></script>
</body>

In the webPanel’s add-on script, es.js, I assess the status and create the dialog when appropriate.

/public/js/es.js

if(/(foo|bar)/.test(status))
{
  AP.dialog.create({
     "key": 'dialog-pa',
     "chrome":true,
     "height": "180px",
     "header":{
       "value":"Shmoo"
     }
   });
}

atlassian-connect.json

       "webhooks": [   
          {
            "event": "jira:issue_updated",  
            "url": "/es?issue.key={issue.key}",  
            "excludeBody": false   
          }  
        ],
        "webItems": [
            {
              "name": {
                "value": "Verify"
              },
              "key": "dialog-pa",
              "url": "/pa",
              "location": "none",
              "context": "addon",
              "target":{
                "type":"dialog"
              }
            }
        ],
        "webPanels": [
            {
                "key": "es-right-panel",
                "location": "atl.jira.view.issue.right.context",
                "name": {
                    "value": "ES"
                },
                "url": "/es?issue.key={issue.key}",
                "weight":99
            }
        ]

This was my first attempt to build any jira extension, save for some simple REST api stuff from external systems, and It took a few days and a lot of trial and error to piece all this together. The following resources, in addition to the official docs were invaluable:
Best Way to Show a Module in a Dialog
Webhook not available when is created from add-on descriptor
Download attachment in JIRA Cloud using REST API for issue update events
Atlassian Connect Hello JS Dialog
Atlassian Connect JIRA example
Atlassian Connect Express

This also helped for delegating events from the dialog:
Events in Dialogs

Thanks to all those past questioners and answerererers!

2 Likes