Introduction
Working with AppGyver Composer Pro, most of your time will be spent in the app builder.
It allows you to:
define your app's structure and navigation logic
build pixel-perfect user interfaces
create complex logic with visual programming
integrate with external data resources
bind data to your components to create dynamic views, and more.
When you open or create a new project from the dashboard, Composer opens into the app builder.
The app builder consists of the view Canvas, the logic canvas, and accompanying toolbars and menu panels.
In this guide, we'll give an overview of the following:
Supported browsers
Composer works best on the latest version of Chrome or Safari.
Supported screen resolutions
Composer requires a minimum screen width of at least 1250px so that the full UI can be rendered effectively. Note that choosing a wider resolution for the UI Canvas can increase the required minimum screen width.
The global toolbar, located at the top of the UI, has six functionalities:
Editing your project name
Changing the active page
Accessing global tools
Saving and reverting your changes
Exiting the current app
Displaying info and error messages
To edit your project name, click on the title at the top left, then save your changes.
Under your project name, you can change the active page. Note that you need to save your changes before opening another page.
The middle of the main menu gives you access to the following global tools. The items here deal with your app as a whole, in contrast to the page-specific tools below it.
Access your app during development via the preview companion apps for different platforms
Create binary packages and web deployments of your app
Manage releases
Access community resources such as forums, bug reports and feature requests and this documentation
Edit your app's theme to quickly change its look-and-feel
Manage custom fonts for your app
Create and manage configurations for local and external data resources
When you have made changes on the current page, the top right part of the main menu will show the Save and Revert buttons, which save the current changes or revert back to the latest save.
The History button which is displayed when you have no unsaved changes, allows you to go back multiple multiple saves.
When you have no pending changes, you can exit the app via a button at the right end of the global toolbar.
Information and error messages are displayed at the top of the app builder UI.
These messages fade away after a few seconds, but you can also dismiss them yourself via the x button.
For more on the basics of Composer see the Quick Onboarding Videos
In the middle of the screen is the View Canvas, where you will construct your app's user interface.
It shows a what-you-see-is-what-you-get (WYSIWYG) representation of your app's user interface. You can drag in view components from the component library panel on the left, place them on the canvas, and then configure their various properties via the properties panel on the right.
When a component is selected, a blue rectangle appears, visualizing the space taken by the component.
At the top/bottom of the rectangle, there is a blue toolbar. In addition to showing the component name, the toolbar has two buttons:
Clone component
Delete component
Additionally at the bottom of the properties tab on the right. Icons are displayed for:
Delete component
Enter isolation mode
View component in marketplace
Component properties are displayed on the right panel when a component is selected. Static properties can be edited directly on the properties panel.
Component properties can be dynamically bound using the Binding Editor. You can learn more about in the binding data guide.
You can change the canvas size and target device via the top left dropdown. You can choose from a selection of mobile devices to see how your app will look on them, choose full screen mode for web development or enter a custom width.
The canvas height will always grow according to the components on it. If you want to see how e.g. where the fold is (meaning the part where the rest of the page disappears under the screen's bottom edge), you should use the Preview functionality.
View canvas emulates the system variables for the chosen target. This allows you to see how your UI will look in advanced cases where system variables and formula functions are used to affect how the UI is rendered on different platforms.
The view component library is shown on the left side of the View Canvas. It shows view components that can be drag-and-dropped onto the UI canvas. There are three tabs:
Core – core view components created by AppGyver.
By me – view components created by you for this app.
Installed – view components installed via the Marketplace to this app, including components you've created and published to the Marketplace.
You can read more in the View component library panel guide.
The switch at the top of the view canvas lets you change between the view canvas and the variable editor.
The variable editor lets you define data variables, page variables and page parameters for the current page, as well as app variables for the whole application context. You can also configure how data variables fetch their data here.
For more on variables see Core Lessons 1 - Variables & Formulas
The Layout Tree shows the current page's view component structure in a hierarchical tree format. You can use the Layout Tree to select view components, change their order and enter Isolation mode to edit a composite component. Read more in the Layout Tree guide.
For more on the View canvas and Components check Core Lesson 4 - Components
The logic canvas can be opened by selecting a view component (or the current page) and clicking the Add logic button at the bottom of the page. You can drag on the horizontal divider to change how much space is taken by the view canvas compared to the logic canvas.
The logic canvas allows you to create flows of logic in your app, reacting to user interactions or other events. For example, you might want press a button to open a QR code scanner, and then pass the read QR code as a parameter to a new page that opens.
When a flow node is selected, a blue toolbar appears.
In addition to showing the component name, the toolbar has two buttons:
Clone component
Delete component
The flow function library is shown on the left side of the logic canvas. It shows flow functions that can be drag-and-dropped onto the logic canvas. There are three tabs:
Core – core flow functions created by AppGyver.
By me – flow functions created by you for this app.
Installed – flow functions added via the Marketplace to this app, including flow functions you've created and published to the Marketplace.
You can read more in the Flow function library panel guide.
For more on the logic canvas and flow functions see Core Lesson 2 - Logic Flows
You can use the link in the Preview section to open the AppGyver Preview app at https://preview.appgyver.com.
Note that the web preview also works on a mobile browser.
Login happens automatically if you are logged in to Composer.
Install the AppGyver Preview app from Apple App Store on your device and log in with your AppGyver credentials.
Install the AppGyver Preview app from Google Play on your device and log in with your AppGyver credentials.
The Component Market / Logic Market button at the top of the view component library and flow function library sections opens the Marketplace.
The Marketplace allows you to discover new view components, flow functions, data connectors, page templates and more, made by AppGyver and the community.
If the Marketplace has new versions to the components/flows installed in your app, a red circle will indicate the number of pending updates.
