I’m having strange errors with a formula I’m trying to create. The API I’m working with returns HTML in a json response that looks like this:
{
"templateId": 1463638,
"metadata": {
"templateId": 1463638,
"createdAt": 1582490255641,
"updatedAt": 1648063682857,
"name": "SNIPPET/TOKEN TESTING - Catalog 02/20",
"creatorUserId": "test@email.com",
"messageTypeId": 19854
},
"name": "SNIPPET/TOKEN TESTING - Catalog 02/20",
"fromName": "Davida Gaffney",
"fromEmail": "test@email.com",
"subject": "I'm testing tokens using snippets",
"preheaderText": "",
"ccEmails": [
"{{ccEmails}}"
],
"bccEmails": [],
"html": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html lang=\"en\" style=\"background-color:#f3f3f3\" xml:lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n\t<link href=\"https://fonts.googleapis.com/css?family=Crimson+Text:400,600\" rel=\"stylesheet\" />\n\t<link href=\"https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,600\" rel=\"stylesheet\" /><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><meta name=\"viewport\" content=\"width=device-width\">\n\t<title>StorageMart</title>\n\t<!-- Outlook Conditional --><!--[if mso]>\n<style type=\"text/css\">\nbody, table, td {font-family: 'OpenSans', sans-serif !important;}}\na {\ncolor: inherit !important;\ntext-decoration: underline !important;\n}}\n</style>\n<![endif]--><!--[if (gte mso 9)|(IE)]>\n<style>\ntable.body .columns.padding-none {\npadding-left: 0 !important;\npadding-right: 0 !important;\npadding-top: 0 !important;\npadding-bottom: 0 !important;\n}}\ntable.body .columns.padding-left-none {\npadding-left: 0 !important;\n}}\ntable.body .columns.padding-right-none {\npadding-right: 0 !important;\n}}\ntable.body .columns.padding-top-none {\npadding-top: 0 !important;\n}}\ntable.body .columns.padding-bottom-none {\npadding-bottom: 0 !important;\n}}\n.margin-bottom-none,\np .margin-bottom-none {\nmargin-bottom: 0 !important;\n}}\np.text-right {\ntext-align: right !important;\n}}\n</style>\n<![endif]--><!--[if mso]>\n<style>\ntable.body .columns.padding-none {\npadding-left: 0 !important;\npadding-right: 0 !important;\npadding-top: 0 !important;\npadding-bottom: 0 !important;\n}}\ntable.body .columns.padding-left-none {\npadding-left: 0 !important;\n}}\ntable.body .columns.padding-right-none {\npadding-right: 0 !important;\n}}\ntable.body .columns.padding-top-none {\npadding-top: 0 !important;\n}}\ntable.body .columns.padding-bottom-none {\npadding-bottom: 0 !important;\n}}\n.margin-bottom-none,\np .margin-bottom-none {\nmargin-bottom: 0 !important;\n}}\np.text-right {\ntext-align: right !important;\n}}\n</style>\n<![endif]--><!-- Styling for apple links -->\n\t<style type=\"text/css\">@media only screen{\n html{\n min-height:100%;\n background:#f3f3f3}\n }\n }\n }\n @media only screen and (max-width:616px){\n .small-float-center{\n margin:0 auto!important;\n float:none!important;\n text-align:center!important}\n }\n .small-text-center{\n text-align:center!important}\n }\n }\n }\n @media only screen and (max-width:616px){\n .hide-for-large{\n display:block!important;\n width:auto!important;\n overflow:visible!important;\n max-height:none!important;\n font-size:inherit!important;\n line-height:inherit!important}\n }\n }\n }\n @media only screen and (max-width:616px){\n table.body table.container .hide-for-large,table.body table.container .row.hide-for-large{\n display:table!important;\n width:100%!important}\n }\n }\n }\n @media only screen and (max-width:616px){\n table.body img{\n width:auto;\n height:auto}\n }\n table.body center{\n min-width:0!important}\n }\n table.body .container{\n width:95%!important}\n }\n table.body .columns{\n height:auto!important;\n -moz-box-sizing:border-box;\n -webkit-box-sizing:border-box;\n box-sizing:border-box;\n padding-left:16px!important;\n padding-right:16px!important}\n }\n table.body .columns .columns{\n padding-left:0!important;\n padding-right:0!important}\n }\n th.small-1{\n display:inline-block!important;\n width:8.33333%!important}\n }\n th.small-5{\n display:inline-block!important;\n width:41.66667%!important}\n }\n th.small-6{\n display:inline-block!important;\n width:50%!important}\n }\n th.small-7{\n display:inline-block!important;\n width:58.33333%!important}\n }\n th.small-10{\n display:inline-block!important;\n width:83.33333%!important}\n }\n th.small-12{\n display:inline-block!important;\n width:100%!important}\n }\n table.menu{\n width:100%!important}\n }\n table.menu td,table.menu th{\n width:auto!important;\n display:inline-block!important}\n }\n }\n }\n @media screen and (max-width:596px){\n .partial.testimonial .testimonial-content .columns.small-1{\n display:none!important}\n }\n .partial.testimonial .testimonial-content .columns.small-10{\n width:100%!important}\n }\n }\n }\n @media screen and (max-width:616px){\n .partial.social-media-icons .menu-item{\n padding-right:10px}\n }\n .partial.social-media-icons .menu-item:last-child{\n padding-right:0}\n }\n }\n }\n\t</style>\n</head>\n<body style=\"-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;background-color:#f3f3f3;box-sizing:border-box;color:#333;font-family:Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important\">\n<div style=\"padding: 20px\">\n<h2>STORE DETAILS</h2>\n\n<div style=\"border-bottom: 1px solid black; padding-bottom: 20px;\">\n<h3><b>Moved Coupon</b></h3>\n<br />\n<span style=\"color:#2ecc71;\"> catalog: {{{ snippet \"Moved Coupon Logic\" }}}</span></div>\n\n<div style=\"border-bottom: 1px solid black; padding-bottom: 20px;\">\n<h3></h3>\n</div>\n</div>\n</body>\n</html>\n",
"plainText": "",
"dataFeedIds": [],
"cacheDataFeed": true,
"mergeDataFeedContext": false,
"messageTypeId": 19854,
"creatorUserId": "davida.gaffney@storage-mart.com"
}
I’ve been trying to work on a way to get the “html” string to be displayed in Coda. I can’t return it with the ValueHintType as Html since it uses unsupported tags, so I’ve been looking into turning it into a buffer, storing it with temporaryBlobStorage and returning it with the ValueHintType as attachment. I’ve written this to accomplish that:
pack.addFormula({
name: "GetTemplateHTML",
description: "Get raw html of a template from Iterable.",
parameters: [
coda.makeParameter({
type: coda.ParameterType.Number,
name: "templateId",
description: "Template's ID in Iterable.",
}),
],
resultType: coda.ValueType.String,
codaType: coda.ValueHintType.Attachment,
execute: async function ([templateId], context) {
let response = await context.fetcher.fetch({
method: "GET",
url: coda.withQueryParams("https://api.iterable.com/api/templates/email/get", {
templateId: templateId,
}),
}),
data = Buffer.from(response.body.html, "utf-8");
return await context.temporaryBlobStorage.storeBlob(data, "text/html;charset=UTF-8");
},
});
The pack builds correctly and uploads just fine with this code, but whenever I try to execute the formula in my doc I get this error:
User ID 1053924
Connection ID 28286d11-85c1-4117-923b-4255deddc32d
Pack Version 98
Pack ID 11030
Request ID 91f5443b-8cc8-4f62-9a58-73e77e04346a
Created at Apr 6, 2022 @ 09:19:52
Request type invokeFormulaRequest
Duration 2063ms
Error 13 INTERNAL: Request message serialization failure: Failure: Cannot coerce to Uint8Array: object
Stack trace: at processTicksAndRejections (internal/process/task_queues.js:77:11)
I’ve tried to change the encoding away from utf-8 however that did not work. I’m really not sure what’s going on here since I’ve read that a Buffer instance is also an instace of a Uint8Array. What would you reccomend I change with my code, or is this implementation of temporaryBlobStorage not supported?