Creating a trello card from the apps script sidebar results in status code 500

Question

I wanted to implement the trello api into a sidebar so my team can create tickets in a more manageable way than texting.

I built the sidebar & functionality using vscode; which is also where I tested everything.

There were no problems until I moved everything to my apps script project; any submission results in Response: 500 .

This is the code I wrote to create the card:

function createCard() {
    name = document.querySelector('#n').value;
    request = document.querySelector('#r').value;
    details = document.querySelector('#d').value;
    priority = document.querySelector('#high');
    idLabels = (priority.checked) ? '62a685a6ea88a630d3da970f' : '62a685b2b835cd665d8ba4ac';
    fetch(`https://api.trello.com/1/cards?
        key=${key}&
        token=${token}&
        idList=${idList}&
        name=${name} - ${request}&
        desc=${details}&
        idLabels=${idLabels}`, {
            method: 'POST'
            }).then(response => {
                console.log(`Response: ${response.status} ${response.statusText}`);
                return response.text();
            }).then(text => console.log(text))
                .catch(error => console.error(error));
}

I couldn't find anything that would prevent me from using an api in the sidebar.

This is the closest thing I could find to my current problem is right here:

Google Apps Script to Create Confluence Page -- Results in Status Code 500

but this isn't using sidebar (if that even matters)

Answer 1

Modification points:

• When I saw your script, I remembered this issue tracker . In this issue tracker, when // is used in the template literal of the Javascript on HTML service of Google Apps Script as you are using, it seems that // is used as the comment start.

• When I saw your following URL, I thought that ${name} - ${request} might be required to do the URL encoding.

   `https://api.trello.com/1/cards? key=${key}& token=${token}& idList=${idList}& name=${name} - ${request}& desc=${details}& idLabels=${idLabels}`

When these points are reflected in your script, how about the following modification?

From:

fetch(`https://api.trello.com/1/cards?
    key=${key}&
    token=${token}&
    idList=${idList}&
    name=${name} - ${request}&
    desc=${details}&
    idLabels=${idLabels}`, {
        method: 'POST'
        }).then(response => {

To:

const encodedName = encodeURIComponent(`${name} - ${request}`);
const url = `https:\/\/api.trello.com\/1\/cards?key=${key}&token=${token}&idList=${idList}&name=${encodedName}&desc=${details}&idLabels=${idLabels}`;
fetch(url, { method: 'POST' }).then(response => {

Note:

• When I tested your script, I confirmed the same issue. And, when I tested my proposed modification, I confirmed that the script worked.

• When you tested the above-modified script and an error occurs, please check the variables again.

Reference:

• When // in template literal is used in an HTML file in the script editor, it is used as a comment start.