Built-in Library
The built-in library is a set of predefined, reusable components available in the screens editor for all apps and all environments. Refer to the articles in the table below to learn how to use and configure each component.
Note
The list of components included in the built-in library is not definitive. It may change or even include more components over time.
Allows you to load animations created in AfterEffects and exported through the BodyMovin extension. | |
Bar Chart | Allows you to set a type of graph that displays data using vertical bars. |
Indicates an action (for example, showing a screen or submitting a form) and allows the app user to perform such action by clicking or tapping the component. | |
Allows you to set a carousel of cards. | |
Allows you to set a container component to display data in table format. | |
Allows you to add other components within it, and facilitates the organization of the components it contains and the the space occupied by the component in the screen. | |
Shows an image in the screen. | |
Allows you to set a location search tool in a defined area of the screen. | |
Allows you to configure and customize a camera feature for your screen. | |
Allows the app user to enter text under specific conditions. | |
Provides specific information to the app user and does not require any data input. | |
Allows you to add a video content player to the screen. |
The components listed below are also part of the built-in library but documentation is still in progress.
Barcode Scanner
Data Table
Calendar Period
DS Checkbox
DS Radio
DS Switch
Progress Indicator
Container components
The Screens editor in Studio includes two container components: the panel and the flex container. Currently, the flex container component offers more benefits when building your app, mainly related to its auto-sizing feature and a greater capacity to adapt to different screen resolutions.
In addition, the flex container makes it easier to customize children components that are part of a complex treeview, given that, by default, their positioning is relative. In contrast, in the case of the panel component, this can only be achieved by configuring components with absolute positions: by configuring a component with an absolute position, each element becomes autonomous, thus making it difficult to reorganize those elements within the container.