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 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.

Using the app builder

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.

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:

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

  • Configure AppGyver's hosted Cloud Mesh integration environment for your app

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.

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

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

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.

View Canvas

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.

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 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.

Changing canvas size and 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.

Opening the Variable Editor

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.

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 or three buttons:

  • Enter isolation mode (only for composite flows)

  • Clone component

  • Delete component

The left sidebar

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:

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.

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.

Marketplace

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, build settings and release management.

In the Community section, it lets you access different resources.

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

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.

View component 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.

View component styles

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.

Flow function properties

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.

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.

Multi-user collaboration

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.