Connecting With Datasource

Example: Rendering dynamic radio options


In order to make the data in your frontend dynamic, it is essential to connect your components to a datasource. Let's look at how we can link a component to a datasource with an example.

Example: Rendering dynamic radio options


In this example, we will render the options for the Radio input component dynamically. In order to do that, we need to connect to a datasource.

Creating an endpoint / workflow


In order to get the radio options from a datasource, we need to establish a workflow or an endpoint from which this data can be fetched. For our example, we are just going to return an array of options from the workflow.

  • Create a workflow and select an Output node.
  • Add the following code to the output node code editor -
module.exports = async function (params, context) {
  const options = [
      lab: "Item 1",
      val: "ITEM_1",
      lab: "Item 2",
      val: "ITEM_2",
      lab: "Item 3",
      val: "ITEM_3",

  return { options }

Rendering data from datasource

Screenshot Screenshot

  • Drag and drop the Radio input component onto the canvas.
  • Under the Options section, choose the Dynamic tab.
  • In the Datasource input, choose the newly created workflow. For our example, we will enter {{}}.
  • Add the Label Key and Value Key as lab and val according to our options array. This is to map the label and value keys to the options array being returned from the workflow. Similarly, we can add keys for Prefix icon, Suffix icon and so on.

Your radio options should now get rendered properly.

Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →