Can't Get Response Body from Modal Form

Asana Community API & Developers
1

Please read this before posting

  • If you received an error from the API that you’re looking for help with, please include the error in your post and be descriptive of the requests you made that received the errors. To be clear, we need the error in the JSON response from the API, not the error your code raised.
  • Do not share any API credentials. Please check that the code you’re pasting into the post does not contain any real OAuth tokens or personal access tokens. If you have exposed credentials, you should revoke them immediately.

Hello I’m trying to add a modal form, and I’m not able to get anything in the response body when I submit the form.

let json_form = {
“metadata”: {
“fields”: [
{
“error”: “Please review and change your input”,
“id”: “single_line_text_field_1”,
“is_required”: true,
“is_watched”: true,
“name”: “Resource name”,
“placeholder”: “Enter the full title of the resource here”,
“type”: “single_line_text”,
“value”: “Annual Kick-Off Meeting”,
“width”: “full”
}
],
“submit_button_text”: “Submit This”,
“title”: “Y Mortgage”,
“on_submit_callback”: “https://secure-everglades-50759.herokuapp.com/submitmodal”,
“on_change_callback”: “https://secure-everglades-50759.herokuapp.com/changemodal”
},
“template”: “form_metadata_v0”
}

app.get(‘/asanamodal’, (req,res) => {

res.json(json_form)
})

app.post(‘/submitmodal’, (req,res) => {
console.log(“Form Submitted!”)
console.log(req.body)

let attachment_response = {
resource_name: “I’m an Attachment”,
resource_url: “https://ymtg.ca/wp-content/uploads/2023/06/istockphoto-1322842973-612x612-1.jpg”
}
res.json(attachment_response)
})

The form also shows like it’s still loading something when I submit.

image
image586×173 3.96 KB

I think I’m just missing something. I also don’t understand why my only response option is to add an attachment to the task?

2

Any help on this one? Or am I just dumb haha

3

I’m wondering if I’m using the ‘template’ field of the form metadata correctly. It seems if I change it to anything other than ‘form_metadata_v0’ I can’t get any response when submitting the modal form. Am I supposed to be able to add or use different templates?

4

Hi @Sean_Casselman,

A couple of things to start out:

Let me say overall that App Components are tricky! Don’t feel bad or dumb; it takes some work to master them.

You’re using template correctly; it does need to be that value.

It’s not clear exactly where in the process things are failing…

You’re saying your form is displaying properly and you’re able to type something into the text field and click “Submit This”, is that correct?

If so, then when you do that, can you verify that Asana is calling your https://secure-everglades-50759.herokuapp.com/submitmodal endpoint, and you’re sending back the response shown in your code? Or do you not see anything hit that endpoint?

Also, if you keep your browser developer console open on the page showing the Asana app, do you see any errors as you go through this process?

5

Hi @Phil_Seeman

Yes, the modal form displays correctly, I can hit the submit button. I receive the request to my /submitmodal endpoint, and my response goes through as an attachment is added to the deal.

  1. I can’t seem to get any of the field data in my response body, when it’s hitting my /submitmodal endpoint. req.body is empty.

  2. After hitting submit, on the Asana desktop app in the task, it looks like a widget is added to the task, but all the fields are greyed out and look like they’re loading. Not sure how I can fix this.

I don’t see any errors from my developer console.

6

Hmm, unfortunately I’m not familiar with the specifics of your response code (I code in C#) so I don’t have any good guidance as to what’s not right about it. What language is it in?

7

I’m using node.js and express for the routing