Appfarm Create
The Appfarm Create user interface consists of a collection of menus, toolbars, panes, lists, and editors. This overview is to help you become familiar with the names we use for these elements as they are used throughout the documentation.
1. Top-left
The solution name is shown in the top-left corner. Click the name to open a menu where you can switch between the solutions you have access to and open Settings — preferences for the color theme and motion, the function editor, and Appfarm AI.
Next to the solution name, a button toggles the main menu. A breadcrumb shows your current location — for example, Apps > Event Manager indicates the Apps section with the Event Manager app open. Click the breadcrumb to switch between apps in your solution. A similar breadcrumb is available for Flows and Services.
2. Tabs submenu
Contextual tabs for navigation within the active section. In the screenshot above, when the Apps section is selected from the main menu, the submenu contains the tabs UI, Data, and Actions. The cog icon opens app settings.
3. Top-right toolbar
Actions for the active app or service:
Preview App (play icon): open the app in the Develop environment.
Share (share icon): open a dialog with the app URL and a QR code for testing on a mobile device.
App Health (heart icon): run App Health to review errors, warnings, and performance tips.
Undo / Redo: step through recent operations. Click the chevron to open the full session's operation list.
Appfarm AI (star icon): toggle the Appfarm AI sidebar (section 9). Keyboard shortcut: Ctrl+I.
User menu (avatar): manage your account and sign out.
4. Main menu
The primary menu used to navigate around a solution. Top-level items include:
Apps — expands to list the apps in your solution. The active app is highlighted.
Services
Operations — expands to Deploy, Service schedules, Calendar, and Logs.
A Help button is available at the bottom of the menu (section 10).
Click the toggle button in the top-right corner of the sidebar, or press Cmd/Ctrl+B, to collapse the main menu. When collapsed, hover the left edge of the screen to show the menu as a non-persistent sidebar.
5-7. Workspace
Sections 5, 6, and 7 are dependent on the main menu. The screenshot above shows the Apps workspace with the UI submenu open.
5) List pane: lists the items you work with in the active section. Use the + icon to add an item and the search icon to filter the list.
Apps > UI: views, dialogs, and drawers, with the UI component tree for each. See UI for details.
Apps > Actions: actions defined for the app.
Apps > Data: overview of the app's data sources and app variables
6) Library pane: a vertical strip of items you can insert into the editor (section 7). Click an item to insert it as a child of the selected element, or drag and drop it into the editor. Expand the pane to see the name of each item alongside its icon, or use the search field to filter the list.
Apps > UI: the UI components pane contains the full library of UI components. The pane can be unpinned, so that it's only visible when you click the + icon to add a component.
Apps > Actions: the Action Nodes pane lists action nodes grouped by category (Data, Logic, Navigation, Other, and so on).
7) Editor: the central editing surface. Recently opened items are listed as tabs across the top of the editor.
Apps > UI: the layout designer is the visual canvas for the selected view, dialog, or drawer. The toolbar above the canvas includes a zoom level, device-size previews (desktop, laptop, tablet, mobile), and a settings icon.
Apps > Actions: the action editor displays the selected action's tree of action nodes.
Data model: the data model designer.
8. Properties pane
A dedicated area containing the properties of the selected component, action node, or other customizable element. For UI components, the pane has four tabs:
Properties — configurable properties for the selected component.
Style — visual styling.
Conditional Style — styles that apply based on an event or condition.
Motion — pre-defined transitions that animate the component in and out of view.
9. Appfarm AI sidebar
A thread for Appfarm AI, where you can prompt the agent in Build or Ask mode. Use the input at the bottom to describe the UI component or change you need. The + icon starts a new thread; the clock icon opens the thread history. Toggle the sidebar with Ctrl+I.
10. Help menu
Opened from the Help button at the bottom of the main menu. Provides access to:
Keyboard shortcuts (F1)
Appfarm Commander (Ctrl+K)
Documentation, Community, Appfarm status, and Release notes (external links)
The current Appfarm Create version
Last updated
Was this helpful?