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?