Introduction
Introduction to the main view in AppGyver Composer Pro, the app builder
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.

Using the app builder

When you open or create a new project from the dashboard, Composer opens into the app builder.
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.

Global toolbar

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

Editing your project name

To edit your project name, click on the title at the top left, then save your changes.

Changing the active page

Under your project name, you can change the active page. Note that you need to save your changes before opening another page.

Accessing global tools

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.

Launch

    Access your app during development via the preview companion apps for different platforms
    Create binary packages and web deployments of your app
    Manage releases

Community

    Access community resources such as forums, bug reports and feature requests and this documentation

Theme

    Edit your app's theme to quickly change its look-and-feel
    Manage custom fonts for your app

Data

    Create and manage configurations for local and external data resources

Saving and reverting changes

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.
History button is displayed when you have unsaved chnages

Exiting the app

When you have no pending changes, you can exit the app via a button at the right end of the global toolbar.

Info/error messages

an information message that be application was saved
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

View Canvas

In the middle of the screen is the View Canvas, where you will construct your app's user interface.
dragging a component to the view canvas
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.

Component toolbar

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

Component properties are displayed on the right panel when a component is selected. Static properties can be edited directly on the properties panel.
Binding component properties
Component properties can be dynamically bound using the Binding Editor. You can learn more about in the binding data guide.

Changing canvas size and target device

changing target device
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.

View component library

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.

Opening the Variable Editor

The switch at the top of the view canvas lets you change between the view canvas and the variable editor.
toggling the variables tab
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

Layout Tree

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

Logic canvas

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.

Flow toolbar

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

Flow function library

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

Previewing your App on your device

Web browser

You can use the link in the "Launch" -> "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.

iOS

Install the AppGyver Preview app from Apple App Store on your device and log by scanning the QR code found on the "Launch" tab.

Android

Install the AppGyver Preview app from Google Play on your device and log by scanning the QR code found on the "Launch" tab.
Login with the AppGyver Preview app using the QR code found in the 'Launch' section

Marketplace

Component Market can be accessed on the top left
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.
Last modified 1mo ago