Views
Last updated
Was this helpful?
Last updated
Was this helpful?
Views are the primary interface in an app. A view can be thought of as a page or screen that serves a specific purpose, such as displaying data, or creating new items. Each view has a unique URL path that can be accessed in the app by using the or by directly accessing the URL. When you create a new app, a is automatically created.
There are also and , which are types of views that can be used in the context of a primary view.
Name
An descriptive name for the view. This is used as a reference throughout Appfarm Create.
URL Path Key
A slug to use in the view's public URL. For example, in the following app URL the URL Path Key is my-events: https://thirty50.appfarm.app/events/my-events.
It is recommended to provide a value that describes the purpose of the view. The value must consist only of valid URL characters. Illegal characters will be automatically removed. If not provided, an automatically generated technical ID will be used instead.
An app bar is a toolbar located at the top of the view used to display information and actions relating to the current view.
Enable App Bar
Display an app bar.
Title
The primary label for the app bar.
Sub Title
A secondary label placed under the Title.
Left Actions
Right Actions
Color
Background Image
An image to use as the background of the app bar.
Visual Overlay
Available when Color is Transparent or a Background Image is selected. Add an overlay to emphasize content and to tone down a background image.
Overlay Type
Available when Visual Overlay is selected.
The overlay type to apply, either Dark or Light.
Overlay Transparency
Available when Visual Overlay is selected. The amount of transparency to apply. 0% will not have any impact will 100% will completely cover the background image or color.
Content Color
The color applied to text, buttons, and icons. The default color is Inherit, which in this case will apply sensible colors from the active theme based on the chosen Color.
Elevation
The amount of drop shadow to apply. A value of 0 will remove all drop shadow. The default value is 1.
Dense
Reduce the height of the app bar. Only recommended for use on Large devices such as desktops.
Keyboard Event Handlers
Actions are buttons that can be added to either the left or right side of the app bar. On the left side, only one button can be displayed at a time. On the right side, buttons can be displayed side-by-side or in a dropdown menu.
Name
A descriptive name for the button. Displayed only in Appfarm Create.
Variant
The type of button to display, either an Icon Button or a Button.
Label
Depending on the selected Variant, used either as the tooltip for an Icon button or as the label for a Button. If Overflow Menu is selected, this will be used as the label for the menu item.
Icon
An icon from the built-in icon library.
Icon Value
Button Variant
Available when Variant is Button. The appearance of the button.
Button Color
Available when Variant is Button. The color of the button.
Overflow Menu
Display the button in a dropdown menu at the far right of the app bar.
Visible
Bind a value or condition to determine if the button should be displayed or not.
Disabled
Bind a value or condition to determine if the button should be disabled or not.
Enable Badge
Display a badge in the top-right corner of the button.
Value
The value to display inside the badge. Usually a number.
Variant
The appearance of the badge. The options are:
- Standard where the Value is rendered inside the badge.
- Dot where a small filled-in circle is shown without a value.
Color
The color of the badge.
Max Value
The highest Value that will be displayed. If Value execeds this number, a "+" will be shown after the value.
On Click
Triggered when the button is clicked.
Draft feature
Draft features are in early development and may crash your solution. Functionality may stop working or crash your solution when Appfarm Create is updated.
Key Binding
The string representing the key presses that will trigger the Action. Use + to combine multiple key bindings. For example, to set a key binding when ctrl and a are pressed simultaneously, the value would be ctrl+a.
Supported modifier keys: shift, ⇧, option, ⌥, alt, ctrl, command, ⌘
Supported special keys: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete, F1–F19
Note: Avoid overriding native browser and operating system shortcuts.
Enable On Form Fields
Select this option to enable this event handler on form input components. To avoid conflicts, keyboard event handlers are disabled by default when form input components, such as Text edit and Switch are focused.
Action
The action to run when the key binding is pressed.
Description
A short description of the action displayed in a dialog in the app listing available shortcuts. The description will be displayed next to the key combination. The dialog can be opened by pressing F1 on the keyboard.
Disabled
Bind a value or condition to determine if the button should be disabled or not.
Run an action when a view is loaded or unloaded. For example, if a view displays live information populated by a web request to an external API, you could run a new web request every time the view is loaded to ensure the latest data is always shown.
On View Load
Triggered before the view is visible to the user. Note: A long-running action will increase the loading time of the view. Use with care.
On View Loaded
Triggered immediately after the view is visible.
On View Unload
Triggered after the view has been navigated away from and is no longer visible.
Add an (button) to the left-hand side. This is typically used to display a menu icon button. Only one button is displayed at a time, so the first visible button will be shown if multiple are defined.
Add an (button) to the right-hand side. Buttons can be displayed side-by-side or in a dropdown menu.
The background color of the app bar. The default color is the from the active theme.
Select an which has enum values with icons specified. If an enum value does not have an icon defined, the icon selected in Icon (if any) will used instead. The enum value must be for the icon to display.
You can add keyboard shortcuts to a view by adding keyboard event handlers. For a detailed walkthrough of using keyboard event handlers, see .
