Render dialog from Workflow Post Function?

Jira Development Jira Cloud
, , ,
1

Hi,

Is it possible to force a modal dialog to appear as a result of a Workflow Post Function, or is use of a Webhook a better or necessary choice?

I’ve got a dialogmodule rendering on click of a webItem.
Alternatively, I can get iframe content from a Workflow Post Function request, but the iframe and dialog (probably obviously) never render.

My goal is to show a modal dialog after a specific workflow transition. What’s the best approach and why isn’t the current one working? Is there a redirect strategy that will work? I’m using ace.

Any insight you can provide will be most helpful.

Thanks!
Dave

1 Like
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
4

@dvaron I’m trying to display a dialog modal in UI when an webhook (say, issue_updated) is triggered. I believe your initial question was something similar.

Please confirm me whether the solution you have provided, was able to display an dialog modal immediately after a webhook event is triggered. I tried the solution. I found that:

  1. when the endpoint /es is invoked from the webpanel (located in issue right context), it displays the modal properly.
  2. But, when the endpoint /es is invoked from issue_created webhook trigger flow, there is no corresponding dialog displayed.

Please let me know if you have any solutions around it.

Thanks in advance

5

Hi,
As you know, the webhook is a communication (request) to an arbitrary endpoint. Whatever system is listening on this endpoint can’t directly trigger an event nor handle an event in the jira UI, AFAIK. Instead, the webhook can make a change to the state of an issue or other jira object (e.g., project) through the REST API, and this change can trigger an event. This leads me to two suggestions:

  1. Try that – I’m a bit skeptical, because I’m not sure offhand if there is an event to which your proc can listen to trigger the dialog visibility (maybe an issue updated event?)
  2. I’m unable to infer the utility of your webhook. Is it possible to invoke the endpoint (and whatever it needs to do) from within the event handler in the webpanel and pop the dialog when the async request resolves (instead of immediately?) Knowing a bit more about the use case would help.

My use of a webhook in the above scenario occurs on issue_updated, to enable a state which in turn enables the dialog-triggering event. The webhook points to an ACE route which evaluates issue content. If the correct criteria are set (e.g., issuetype, status, various field values) then the webhook uses the REST API to set an issue property. Separately, there is a webItem–in this case, a button which appears on the jira.issue.tools menu–which is dependent on this property. If the webhook has set the property, the button will appear, if not, the button doesn’t show. IINM, a page refresh is often required to see the button, but this is not uncommon in the workflow anyway. HTH, Dave