UI components

Appfarm Create includes a library of UI components to enable you to quickly build a user interface and connect it to your data and actions. Simply drag and drop a UI component into a view and configure the properties and styles as required.

UI components are implemented using Google's Material Design system for user interface design, specifically Material 3. For more information about Material 3, including guidelines, principles, and inspiration visit https://m3.material.io/.

Examples

Examples of many of the UI components are available in our Showroom. You can view the demos, as well as access the setup in Appfarm Create. Don't have access? Register.

You can add UI Components to your UI with drag & drop, by clicking the UI Component (will add it after the selected UI Component inside the selected View/Dialog/Drawer), or by using Appfarm Commander (CTRL + k / CMD + k -> Seach by name -> Add the UI Component).

Layout

Layout components form the hierarchy of a view and are used to display content and navigation.

• Container

• View container

• Coded component

• Iframe

• Tabs

• Bottom navigation

• Visibility group

• Popover

• Menu List

Data input

Data input components enable the user to enter and select data of various types. They can be used to build forms, client filters, and other UI features that rely on user interaction.

• Text edit

• Date & time picker

• Checkbox

• Switch

• Radio buttons

• Select

• Multi select

• Slider

• Drawable canvas

• Rich text editor

Data iterators

Data iterator components are used to display data from multiple objects in a data source.

• Table

• List

• Avatar group

• Chip group

Buttons

Button components are used to add interactivity and provide the user an opportunity to trigger an action.

• Button

• Icon button

• Floating action button

• Speed dial

Visuals

Visual components are used to display both static and interactive data.

• Text

• Icon

• Image

• Avatar

• Map

• PDF reader

• Circular progress

• Linear progress

• Animated component

Basic charts

Basic chart components are used to visualise data. For additional customization options, see advanced charts.

• Basic line

• Basic bar

• Basic pie

• Basic gauge

Advanced charts

Advanced chart components are used to visualise data and have more customization options compared to basic charts. To get a better understanding of how charts are configured, see Understand charts.

Important

All solutions have access to try advanced charts, but use of an advanced chart in Production is determined by your subscription tier.

• Line/area

• Bar

• Scatter plot

• Bubble

• Pie

• Heatmap

• Solid gauge

• Gantt

• Combined