Component
A component is a widget with certain functionality that can be reused throughout your app. When you change a component, it will be reflected throughout your app, making it easier to maintain and update an app over time.
For example, in a messaging app, a component could be a custom button with a specific design and functionality that is used in different parts of the app, such as sending a message or a file attachment.
A component enforces software development's DRY (Don't repeat yourself) principle, helping you save time by reducing the repetition of work.
Create and use component
To create and use the component in your app, follow the instructions below:
On the Canvas, click the + icon button. A pop will open; select the New Component tab.
To start from scratch, click Create Blank (under Blank Component) or choose from the available templates.
Provide the Component Name and click Create Component.
The new component is visible under the Components tab. Select it, build, or make modifications as per your requirements. Right-click on it to duplicate, copy, or delete.
You can add the newly created component from the widget tree and widget palette. In the widget palette, switch to the Components tab and drag the component to the desired location on your page.
To edit the component, locate the component on Canvas and double-click on it.
AI Gen Component
See how to create component using AI Gen.
Create a component from existing widget
You can extract the common widgets and create a component that can be reused multiple times. To do so, simply Right click on a widget and select Convert to Component.
Notice how the widget on your page is now converted into a component.
Passing data
You can pass data from a page to your custom component by following the steps below:
1. Define parameter
Open your component and select the first or top widget (i.e., ComponentName).
On the right side, find the Component Parameters section and click the + button.
Click on + Add Parameter and enter the parameter name.
Set the Type to the appropriate one; if this parameter is going to hold a list of items, tickmark List.
If the parameter is of type Action, you can add a sub-parameter that can be used to pass the data back to the action.
Click Confirm.
2. Pass data
To pass data to a component:
Select the custom component on the page (where you have added it).
Move to the properties panel; under the Component Properties section, you'll find the parameter name (as defined in the component; see the previous step).
Enter the parameter value.
If the parameter is of type Action, click Open. This will open an Action Flow Editor in a new popup window, and there, you can add any action.
3. Use parameter
You can access the parameter value via the Set Variable menu > Component Parameters > [parameter_name].
Creating component state variable
A Component State variable is defined within the component and can be used by that component and any child widgets. See how to use the component state variable.
Trigger actions outside of components
Sometimes, you might need to trigger actions on a page from a widget inside of a component. For example, uploading an image with a tap of a button (inside the component) and displaying the uploaded picture back to a widget on a page.
You can do so by adding the Execute Callback action. Please find the detailed instructions on the following page.
Trigger actions on component load
You can trigger any action as soon as a component is loaded. For example, making an API call to retrieve the data to be displayed on the component or simply setting component state variables as soon as it is loaded.
To trigger actions on component load, select the component name (first/top widget in the widget tree) > move to the Properties Panel > select Actions > Add any action (under On Initialization).
The action is triggered only once when the component is loaded and not when it rebuilds (NOT when Update Type > Rebuild Current Component).
When the component is inside the list that shows dynamic data (e.g., ListView > user card component with an API to fetch data on component load), each component will trigger the actions added under On Initialized.
Here's an example of a credit card component that makes the API call to retrieve the credit card details when the component is loaded.
Accessing widget state of a component's widgets
A Component often contains multiple widgets, and there may be instances where you need to access the state of these widgets from outside the Component, such as on the main page. For instance, consider a Component with two TextFields – one for the username and another for the password. This Component could be utilized in both sign-in and sign-up pages. In such cases, you need to be able to retrieve the values from each TextField; as if they were added on the page itself.
You can access the widget state of a component's widgets on your page, just as you would for other widgets. Simply navigate to the Set Variable menu > Widget State > [component_name] > [your_widget].
Set Unique Key
When you have a component in a dynamically generated list, this option becomes available. Imagine you have a dynamic list where items can change frequently – like a to-do list where tasks are added and removed. Think of it as giving each task a unique ID number. This is important for a few reasons:
Tracking Changes: The 'Unique Key' helps the app recognize which tasks are new, completed, or removed, ensuring accurate updates.
Efficiency: With unique IDs, the app updates only the tasks that have changed instead of the entire list, improving performance.
Retaining Details: When you modify a task and move away from it, the 'Unique Key' ensures the changes are remembered and displayed correctly when you return.
Tip: If it’s a list of Documents the unique key might be the Document ID.
Learn more
Also, see how to add hero animation on components.
Video guide
If you prefer watching a video tutorial, here's the one for you:
FAQs
How is a component different from creating a template and theme widget?
A component is a fully-featured widget that combines multiple widgets and actions to complete a task, whereas templates consist of multiple widgets that create a unique UI layout with a specific purpose, and the Theme widget allows you to customize the visual appearance of a single widget.
So, while templates and themes are useful for creating a consistent visual design for your app, components are reusable and modular building blocks that can be used to create more complex UI elements.
How do I check where a component is being used?
To find where a specific component is used in your project, select the component > right-click> select Find Usage. This will bring up a window listing all the places where the component is utilized.
Last Updated Date: February 1, 2024
Last updated
