A custom component is an adaptable part that helps you design a full interface for your app. You can make your own interface by combining items such as buttons, cards, text areas, etc. to organize your app and use it to navigate all your app screens. You can set these items to do certain things, like go to the next menu items, open a URL, or connect with other components of the app.
This component is the best for any type of app.
Included Features
- Design Flexibility
Make your interface look the way you want it to.
- Interactive elements
Add buttons, cards, and many more elements to your app menu screens to make the user experience more engaging and to make navigating among them simple.
- Action Configuration
You can tell some components to do certain things, like move around the screen, open a URL, or connect with other components.
How To Install The Component
This component can be installed in:
- App's Navigation Page ✓
- App's Side Menu ✓
Click or drag and drop the Custom Component into your navigation or side menu to install it.
How To Configure The Component
Click the gear icon to configure the component’s settings.
Rename the component, choose an Android and an iOS icon for it and upload a background image for your workflow screens.
Click ‘Setup’ to set up your component design.
Elements
The design area includes elements for creating the interface shape on the screen:
HeadlineCardsText FieldsButtonOutput CellsRadio ButtonCheckboxToggle ButtonsDropdown MenusArranging Elements
When it comes to personalizing your elements in particular layouts, there are a few guidelines:
- You can add up to three elements in a row by clicking the + icon.
Examples of things that cannot have more than one in a row are wide cards and some types of choice elements (such as radio buttons, checkboxes, and toggle buttons). The row can only have one of these components since the plus icon is hidden.
- You can move the row up and down by holding the row itself or move the elements left and right in the row by holding the elements themselves.
- You have the option to delete the row or delete the element itself.
- If you have multiple menus, choose one from the left and click ‘Set as Landing Menu’ to make it your component's main screen.
And you can delete a certain screen from the trash icon.
User Tracking with URL Parameters
To determine which user specifically accessed a given page of yours, you can add a URL that can transmit a user identifier into a URL, but your URL must have one of the following variables:
- $user_id ⇒ It will pass the user ID.
For instance:
Your website's URL is [https://nandbox.com/app-builder-blog]. In this instance, you can include the variable $user_id in your URL: [https://nandbox.com/app-builder-blog/$user_id].
The URL will then return the user ID as [https://nandbox.com/app-builder-blog/32371289738912].
- $user_login ⇒ It will pass the user's login either via email, mobile, or a random ID in case your app requires registration.
The same is true for $user_login: add the variable to your URL [https://nandbox.com/?id=$user_login], then URL will return with the user login: [https://nandbox.com/?id=joe645@gmail.com]