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

English Forum Developers & API
, , ,
1

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…

Screenshot 2024-12-18 at 16.05.43
Screenshot 2024-12-18 at 16.05.433090×1184 242 KB

1 Like
2

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 ?

3

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

4

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
5

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?

6

@Tomáš_Šesták1 Lets try to narrow down if it’a some kind of network issue or it’s related to URL matching. Let’s try using the regex to match everything .* and see if that gets you the api calls. If it does than you can start playing around with the regex to get the URL to match. Otherwise, this might be a network issue