Widget unable to view in Task screen

Dear Team,

Created one sample widget by using the below link, Added in the App Component and later by customizing the form added to the form as well, But unable to view into Task form.
It will be great if you can help me.
Thanks,
Snaush
Ref Link: Asana

Hi,

I don’t understand this part. You coded a form and a widget, what don’t you see and where did you expect it?

Hi Bastein,

My requirement to view only widget to the task form to display the details from another ticketing system. I have node.js which is internally will call our Rest API to fetch the record,

Thank you!

Ok your use of the wording “task form” was confusing, because AppComponents allow you to create a form as well. You need to go through the docs to create a widget, a task will display a widget if it has the appropriate attachment created on the task. When this attachment is found, your code will be called to render the widget. Does it make sense?

1 Like

I created the widget as per the document. I don’t want to open any form pop any to the user.
I just want when any task created in asana, widget automatically render by calling the another app server.
I don’t want user to submit any form.

Getting exception when replacing the widget_response with actual value


Code snippet

app.get(“/widget”, (req, res) => {
console.log(“Widget happened!”);
var task= “Widgets creation for asana”;
var url= xxxx + ‘xx/tickets?xx=summary="’ + task +‘"&fields=id,summary,company’;
axios.get(url, {
headers: {
Authorization: token
}
})
.then(response => {
tikcteNumber=response.data[0].id;
summary= response.data[0].summary;
company=response.data[0].company.name;
console.log(response.data[0]);
debugger;
var widget_response = {
template: “summary_with_details_v0”,
metadata: {
fields: [
{
name: “Ticket”,
type: “pill”,
text: tikcteNumber,
color: “none”,
},
{
name: “Summary”,
type: “text_with_icon”,
text: summary,
},
{
name: “Company”,
type: “pill”,
text: company,
color: “hot-pink”,
},

    ],
    footer: {
      "footer_type": "custom_text",
      "icon_url": "https://example-icon.png",
      "text": "I'm a footer"
    },
    num_comments: 2,
    subicon_url: "https://placekitten.com/16/16",
    subtitle: "I'm a subtitle",
    title: "I'm a Widget",
  },
};
console.log(widget_response);
console.log(widget_response1);
res.json(widget_response);

})
.catch(error => {
debugger;
console.log(error);
});

});

Can you please let me know what i am missing here!

Thank you!

I might be wrong but I think you’ll need some code to upload an attachment on each task.

When you use the example response it does work? And then with your code it doesn’t?

No, when the widget gets added correctly, it should automatically create the attachment. I guess it’s possible to hack things by creating the attachment oneself but that’s not the way it’s “supposed” to be done.

But the widget is added how then? As the result of a form being submitted? Because if you can’t use a form you have to fake it by uploading your own attachment don’t you?

Yes, good point, I think that’s right. Since @Sabari_Naush doesn’t want to a add a widget via a form, I guess they will have to create the attachment.

1 Like

@Bastien_Siebman @Phil_Seeman any help how to create attachment, also how can i pass the current task name , taskid to widget API .

Thank you!

Yes it is working fine with sample html, not with dynamics actual value from another api response.

When an example works but not my code, I try to modify the example step by step until it matches what I need :sweat:

Team, Any help appreciated to create attachment via API. Thank you!

Hey @Bastien_Siebman @Phil_Seeman ,

Any help or hack possible to create attachment for display the widgets.

Thank you!

I believe I used the upload attachment endpoint, and passed a resource_name and resource_url, the URL matching the pattern given in the app configuration.