Like other parts of the JitBlox UI, the Template editor and a Class editor work together: if an element in the template has to display data, this data will be provided by the component class (aka data-binding). The component class editor lets you set some basic component attributes (such as the name and description) and edit component properties and parameters.
Creating component properties
Start creating a new component property by clicking the plus-iconin the Properties section. By default, you must define the property's name and type. However, you typically want to fill it with some data as well. When you open a property, the property details pane will provide you with multiple ways for filling the property:
- Only give the property an initial value. You can do this for simple as well as for complex data types.
- Let a parent component provide the data. With this option, the property becomes an input that can be set from another component that contains an instance of this component.
- Fill the property from an API-call. For this, you will need to create an API-Stub with an operation that matches the type of the component property. If the API call requires parameters, you can fill these with default values, or you can fill them dynamically from a route parameter.
- Fill the property directly from a route parameter. You can do this only if the property has a primitive type such as string, number or boolean.
Creating component parameters
If your components needs some variable input that is not passed from a parent component but from the URL, you can take advantage of routing. For example, you may want to include a unique ID in the route URL, which you can pass as an argument to an API call. Please refer to the routing section section for more information.