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 visually, integrate with external data resources, bind data to your components to create highly dynamic views, and more.
This guide gives you an overview of the app builder user interface, with links to further documentation at the end of each section.
When you open or create a new project from the dashboard, Composer opens into the app builder.
To exit the app builder, save your changes and click the Exit button, which will take you back to the dashboard.
Supported browsers
Composer works best on the latest version of Chrome or Safari. Other browsers might work, but we do not guarantee bug-free functionality.
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 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:
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
Configure AppGyver's hosted Cloud Mesh integration environment for your app
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.
To revert back further than the last save, you need to enable release management and roll back to a previous release.
Currently, there's an undo/redo history for the logic canvas only, but not the
When you have no pending changes, you can exit the app via a button at the right end of the global toolbar.
When you successfully save your app, or if the save fails due to e.g. network errors, or when Composer in general wants to inform you of something, an info message will be shown on top of the main menu. The same applies for error messages.
These messages fade away after a few seconds, but you can also dismiss them yourself via the x button.
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.
You can read more in the Component properties guide.
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 or three buttons:
Enter isolation mode (only for composite components)
Clone component
Delete component
You can read more about isolation mode in the Creating and editing view components 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 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.
You can read more in the Variable editor guide.
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 or three buttons:
Enter isolation mode (only for composite flows)
Clone component
Delete component
The sidebar on the left side of the screen allows you to drag-and-drop view components and flow functions onto the canvases, as well as use the Marketplace to find and add new ones.
Typically, the left sidebar gives you access to the following functionalities:
When certain views are open, the left sidebar provides other functionalities:
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 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.
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.
When the Variable editor is open, the left sidebar allows you to switch between the different variable types.
The left sidebar is used to navigate between subsections of the global tools, accessible via the global toolbar at the top.
In the Launch section, it lets you switch between the sections for preview, distribution and release management.
In the Data section, it lets you switch between different data resource types. Additionally, when configuring an external data resource, the left sidebar allows you to switch between the base configuration and different HTTP methods.
In the Theme section, it lets you switch between configuring theme and fonts.
In the Users section, it lets you switch between configuring authentication and configuring users.
The right sidebar gives you access to the following functionalities:
View component properties
View component styles
Flow function properties
View component tree
When a view component or the page itself is selected on the view canvas, you can use the right sidebar to switch between the component properties and component styles tabs.
When a flow function node on the logic canvas is selected, you can use the right sidebar to configure flow function properties.
The view component properties tab lets you define the functional properties of the selected view component.
These include things like text content for a Paragraph component, if a Button is disabled or not, or what kind of data to show in a Dropdown.
Read more in the View components guide.
The view component styles tab allows you to define styling for the selected view component, including things like background color, font size, Container layout direction and much more. Read more in the View component styles reference document.
The flow function properties tab lets you define the functional properties of the selected flow function node.
This includes things such as page to open with Open page, text to show in an Alert dialog, or what code types to recognize with Scan QR/barcode.
Read more in the Configuring flow functions guide.
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.
It is not possible for multiple people to edit the same AppGyver Composer project at the same time. This applies to multiple browser windows, too: if you have the same app open in two windows and make changes in one, you need to refresh the other browser window. Otherwise, trying to save will give you an error about newer changes existing on the server.
