Fetch and manipulate data

So far, you have only seen expressions as a way to produce visualizations, but that’s not really what’s happening. Expressions only produce data, which is then used to create something, which in the case of Canvas, means rendering an element. An element can be a visualization, driven by data, but it can also be something much simpler, like a static image. Either way, an expression is used to produce an output that is used to render the desired result. For example, here’s an expression that shows an image:

image dataurl=https://placekitten.com/160/160 mode="cover"

But as mentioned, this doesn’t actually render that image, but instead it produces some output that can be used to render that image. That’s an important distinction, and you can see the actual output by adding in the render function and telling it to produce debug output. For example:

image dataurl=https://placekitten.com/160/160 mode="cover"
| render as=debug

The follow appears as JSON output:

{
  "type": "image",
  "mode": "cover",
  "dataurl": "https://placekitten.com/160/160"
}

Canvas uses this output’s data type to map to a specific renderer and passes the entire output into it. It’s up to the image render function to produce an image on the workpad’s page. In this case, the expression produces some JSON output, but expressions can also produce other, simpler data, like a string or a number. Typically, useful results use JSON.

Canvas uses the output to render an element, but other applications can use expressions to do pretty much anything. As stated previously, expressions simply execute functions, and the functions are all written in Javascript. That means if you can do something in Javascript, you can do it with an expression.

This can include:

If your Javascript works in the environment where the code will run, such as in Node.js or in a browser, you can do it with an expression.