Rich Display Rendering
The result renderer in Windmill supports rich display rendering, allowing you to customize the display format of your results. By leveraging specific formats, you can display images, files, tables, HTML, JSON, and more.
This feature is useful if you want to display an image, a GIF, a file, or specify the filename for a rich result.
If the result is an object/dict with a single key (except for approval
, which needs 3), you can leverage the following rich results:
Type | Description | Example |
---|---|---|
json | Render the value as a JSON | return { "json": { "a": 1 } } |
table-col | Render the value as a column in a table | return { "table-col": { "foo": [42, 8], "bar": [38, 12] }} |
table-row | Render the value as a row in a table | return { "table-row": [ "foo", "bar" ]} |
html | Render the value as HTML | return { "html": "<div>...</div>" } |
png | Render the value as a PNG image | return { "png": { "content": encode(image) } } or return { "png": encode(image) } |
file | Render an option to download the file | return { "file": { "content": encode(file), "filename": "data.txt" } } |
jpeg | Render the value as a JPEG image | return { "jpeg": { "content": encode(image) } } or return { "jpeg": encode(image) } |
gif | Render the value as a GIF image | return { "gif": { "content": encode(image) } } or return { "gif": encode(image) } |
error | Render the value as an error message | return { "error": { "name": "418", "message": "I'm a teapot" }} |
approval | Render an approval and buttons to Resume or Cancel the step | return { "resume": "https://example.com", "cancel": "https://example.com", "approvalPage": "https://example.com" } |
svg | Render the value as an SVG image | return { "svg": "<svg>...</svg>" } |
Regarding the tables: If the result is a list whose first element is also a list, it will display the result as a table. If the result is a dict/object where every value is an array, it will also be displayed as a table, with the key as the column name.
For example:
import { encode } from 'https://deno.land/[email protected]/encoding/base64.ts';
export async function main() {
const url = 'https://source.unsplash.com/featured/300x201';
const resp = await fetch(url);
const buff = await resp.arrayBuffer();
const data = encode(buff);
return {
png: {
content: data
}
};
}