Quick start

Introduction to App Builder

Working with SAP AppGyver, 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 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
• View canvas
• Logic canvas
• Previewing your App
• Marketplace

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

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.

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

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.

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.

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:

• Duplicate component
• Delete component

Additionally at the bottom of the properties tab on the right. Icons are displayed for:

• Delete component
• Create a custom component
• 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.

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.

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.

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.

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.

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.

Previewing your App

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.

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.