Tried to setup widget app component but Asana isn't calling my app server

Hey,

I tried everything.

I do think I have correct setup - as seen on screenhot - but Asana isn’t reaching my app server (for the data needed for widget) when i paste gitlab link any task…

Is the functionality missing? I went through the docs and it should work…

1 Like

Hi @Tomáš_Šesták1,

The functionality does exist.

I think your issue may be with the use of ngrok - not sure that will work - see:

cc: @John_Vu ?

Thank you for quick response - we tried the lookup app component and it worked perfectly on ngrok :open_mouth:

Hi @Tomáš_Šesták1 glad that you got lookup working

For context, we have two sample app component apps:

  1. app-components-example-app → Use this if you want to create an app component app with forms and widget (App components on tasks)
  2. app-components-rule-action-example-app → Use this to create an app component app with rules (App components on rules)

Since you are referring to lookup and widget, this is going to be related to app-components-example-app. In this sample code, we do not use ngrok since ngork is not required for testing locally. If you would like to use ngrok I suggest a few edits to the index.js file for app-components-example-app to get this to work:

  1. Change https.createServer
    REPLACE:
https
  .createServer(
    {
      key: fs.readFileSync("key.pem"),
      cert: fs.readFileSync("cert.pem"),
    },
    app
  )
  .listen(port, function () {
    console.log(
      `Example app listening on port ${port}! Go to https://localhost:${port}/`
    );
  });

WITH:

app.listen(port, () => {
  console.log(`Example app listening on port ${port}! Go to https://localhost:${port}/`)
})

2: Run ngrok http 8000. NOTE: 8000 comes from the port defined in index.js
3: Copy the ngrok link EX: https://3c1c-99-273-123-69.ngrok-free.app and replace instances of https://localhost:8000 in index.js with it. EX:
FROM:

on_change_callback: "https://localhost:8000/form/onchange",

TO:

on_change_callback: "https://3c1c-99-273-123-69.ngrok-free.app/form/onchange",

NOTE: this may chang in the future if we refactor index.js to read from a base URL variable
4: Start the server with npm run dev
5: Configure the following in your widget settings:
Widget metadata URL: https://3c1c-99-273-123-69.ngrok-free.app/widget
Match URL pattern : ^https:\/\/3c1c-99-273-123-69.ngrok-free.app/\/(.*)?$

Let me know if you have any questions

2 Likes

Hello,

Thank you for trying to help. I don’t think I had any issues setting up Ngrok (as I mentioned, it worked with the lookup). To be sure, I cloned the repository you provided, made the necessary edits, and still haven’t received any calls from the Asana API.

I suspect the issue might lie with the match URL pattern. I’m unsure how to configure it to trigger the action in the task that would send a call to the /widget endpoint. The match URL pattern is unclear to me—what URL should I use in the task to correctly trigger the call to /widget?