Working with Inputs
Helper Dropdown

Each component can be configured through it's properties panel. Click on the component in the canvas to bring up it's properties.


Working with Inputs

Nearly all the inputs on the properties panel support javascript expressions, you can use them to populate the input with dynamic values.

Inputs on the property panel accept both static text and dynamic linked values.

You can combine static and dynamic text to transform data from datasources on the fly!

Apart from plain Javascript expressions, you can also refer to various datasources from your project using dot notation.

You can fetch data from the following datasources.

  • Endpoints You can select any endpoint that you've created to power the input. You can also select any of sub properties of the output from the endpoint. Ex: {{endpoints.getStatistics.counts.numUsers}}
  • Components Similar to endpoints, you can also select another component's properties as an input. Ex: {{components.table.selectedRow}}
  • Variables In case one of your actions sets a variable, you can access it from other components. Ex: {{variables.numberItems}}
  • User You can access the current logged-in user's properties. You can refer to their name, or other properties stored in the user table. Ex: {{user.firstName}}

Helper Dropdown

When you click on an input, a dropdown appears showing various datasources to pull data from into this input. It also shows a preview of what the input finally evaluates to (after processing all dynamic values).


The dropdown also shows an error when the entered value does not match the type of the input (Ex. trying to pass simple text as the content for a table that accepts a list of items)


Within the properties panel, the Miscellaneous section offers a range of additional configuration options to fine-tune the behavior of a component.


isHidden Input

The isHidden input allows you to dynamically control the visibility of the component. By setting this input to true, the component will be hidden, and setting it to false will make the component visible.

Additional Fields for Certain Components


Loading Input

Some components, such as buttons, may have an additional loading input. This boolean input allows dynamic control over the loading state of the component. When set to true, the component is in a loading state, and when set to false, it returns to its normal state.

Disabled Input

Similarly, certain components may have a disabled input. This boolean input allows you to dynamically enable or disable the component. When set to true, the component is disabled, and when set to false, it is enabled.

These additional fields provide flexibility in controlling the behavior of specific components, allowing you to manage visibility, loading states, and disabled states dynamically.

By understanding and utilizing these configuration options, you can create dynamic and interactive user interfaces tailored to your project's specific requirements.

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. →