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 sending 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.
Send message component
To create and use the component in your app, follow the instructions below:
- 1.Select the Page Selector menu from the Navigation Menu. If you opted for Stack Pages and Widget Tree Views, open the Widget Tree menu.
- 2.Click on the New Component icon. This will open the popup where you can search the ready-made templates.
- 3.To start from scratch, click + Create Blank (under Blank Component) or choose from the available templates.
- 4.Provide the Component Name and click Create Component.
- 5.The new component is visible under the Components tab. Select it, build, or make modifications as per your requirement. Right-click on it to duplicate, copy or delete.
- 6.You can add the newly created component from the widget tree, UI Builder, or floating widget palette. In the widget panel, 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.
Create and use component
You can also generate a component using our 'AI Gen Component' feature. Simply describe what you want, and we'll generate a component, which you can then preview with various color themes and view the corresponding code.
Examples:
- 1.Construct a bottom sheet for movie details.
- 2.Design a card to showcase information about a specific book.
- 3.Create a dropdown menu with three options for user settings.
- 4.Build a bottom sheet for restaurant details.
- 5.Design a card to display the user's profile information.
- 6.Design a navigation menu with three buttons for a fitness app.
AI Gen Component
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.
Convert to component
You can pass data from a page to your custom component by following the steps below:
- 1.
- 2.
- 3.
- 1.Open your component. If you are on the widget tree, select the first widget (i.e., ComponentName).
- 2.On the right side, find the Component Parameters section and click the + button.
- 3.Click on + Add Parameter and enter the parameter name.
- 4.Set the Type to the appropriate one; if this parameter is going to hold a list of items, tickmark List.
- 5.Click Confirm.
Define parameter
Define parameter with Type Action
To pass data to a component:
- 1.Select the custom component on the page (where you have added it).
- 2.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) will be displayed.
- 3.Enter the parameter value.
Pass data to a component
- 4.If the parameter is of type Action, click Open. This will open an Action flow Editor in a new popup window, and here you can add any action, such as Upload Action.
Passing data for Type action
You can access the parameter value via the Set from Variable menu > Component Parameters > [parameter_name].
Using parameter
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.
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.
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 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.
Trigger actions on component load
A Component might have several widgets inside of it, and you might want to access their state outside of the component, i.e., page. For example, a component with two TextFields (one for username and another for password) can be used on the sign-in and sign-up page. Now on both pages, you must retrieve the value of 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].
Accessing widget state of a component's widgets
If you prefer watching a video tutorial, here's the one for you:
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.
Last modified 26d ago