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
Hi @Tomáš_Šesták1 glad that you got lookup
working
For context, we have two sample app component apps:
- app-components-example-app → Use this if you want to create an app component app with forms and widget (App components on tasks)
- 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:
- 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?
@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