Richer formatted table output possible yet?

[Marc_Palmer]

The new scripting block is fantastic, I’ve achieved something very quickly using only my rusty old JS knowledge.

I want to display the output of my data as a table including images that are nicely sized/aligned with text in the same row. I can’t do this with the markdown output, partly because the markdown output does not seem to support markdown tables (or the whole table markdown must be built up first instead of output row by row?)

Is there a way we can output HTML or a nicely formatted table where we can control size of images rendered from URLs?

So far the only way I can get images from attachments to render is using output.markdown and ![](${url})

[Bill_French]

Marc_Palmer:

So far the only way I can get images from attachments to render is using output.markdown and ![](${url})

Good to know.

Certainly it would be nice if more flavorful apps could be built in Script Blocks, however, we have to consider the lanes that these new tools are designed to run in.

I can’t speak for the design team at Airtable, but I think Script Blocks are intended to provide an essential framework to increase process automation options. whereas, Custom Blocks are intended surface the ability to create integrated apps.

One must ask - as you have - why not make it possible to build whatever you want in either feature? After all, script is script. But I think the Airtable design team would know exactly why there are distinct differences between Script and Custom Blocks.

[kuovonne]

Marc_Palmer:

the whole table markdown must be built up first instead of output row by row?

That’s what works for me. A markdown image ![]() shows up in the proper location in the table, albeit huge.

[Marc_Palmer]

I don’t know anything about custom blocks… but I managed to get tables working for my case, which is not too shabby. It’s just very fiddly getting the markdown right when you build it up before rendering it, e.g.:

let dayNames = { "0": "Sun", "1": "Mon", "2": "Tue", "3": "Wed", "4": "Thu", "5": "Fri", "6": "Sat", "7": "Sun" };

var resultMarkdown = `| Day | Total | Customers |
| --- |:-----:| --------- |`;

for (let key in daysHistogram) {
    let data = daysHistogram[key];
    var avatarList = "";
    for (let key in data.avatars) {
        let avatar = data.avatars[key];
        avatarList = avatarList + `![](${avatar})`;
    }
    resultMarkdown = resultMarkdown + `\n| **${dayNames[key]}** | ${data.count} | ${avatarList} |`;
}

output.markdown(resultMarkdown);

This gives me the kind of output I want, albeit a bit rough in styling terms. In this case we’re outputting a histogram of how popular each day of the week is in our co-working space, with images of the people that came in on that day, where available.

[Bill_French]

Marc_Palmer:

but I managed to get tables working for my case, which is not too shabby.

It would be nice to see what this approach produces. Share a screenshot or two.

[Marc_Palmer]

I tried already but the forum wouldn’t let me attach files

[Bill_French]

Drag - I think it’s a nuance of the rules - need to be a member for a little bit before they let you do that.

Feel free to direct message me the screens and I’ll post for you.

[kuovonne]

When rendering a markdown table in scripting block with output.markdown(), my table has no borders and no row shading. Is it possible to include borders and shading in markdown tables? HTML and CSS tags seem to be rendered as plain text.

[Bill_French]

kuovonne:

my table has no borders and no row shading. Is it possible to include borders and shading in markdown tables? HTML and CSS tags seem to be rendered as plain text.

No. The script block environment is sanitized to prevent security issues. No access to DOM or any CSS, etc. This may change, but I can’t speak for Airtable.