The AppGyver Enterprise Documentation

Welcome to the AppGyver Enterprise Builder Documentation. Information about the different aspects of Enterprise Builder's functions may be found in the guides presented here. More guides and tutorials will be added in the following weeks.

Feel free to suggest edits on any parts of the documentation that feel unclear.

Get Started    

Introduction

The Logic Editor is a very powerful tool for creating frontend logic in your application: what happens when I click on this button, what should be done when an app loads for the first time and so on. It utilizes the same editor as Cloud Mesh, with the exception that the code is run in the app instead of on a backend server.

Getting Started: Create Your First Logic Flow

You can open the logic editor by selecting a component (in our case, a button) and clicking the Add Logic button in the Interface Builder.

A blank logic canvas opens with an automatically created input node for the Tap event. Input nodes are activated when something happens in your app: a page is loaded, an UI component is tapped and so on.

Upon activation, the input nodes execute the logic flow attached to them.

Empty canvas with just the `Tap` input node.

Empty canvas with just the Tap input node.

Glossary: Logic Node

A logic node means an individual box on the logic canvas. A logic node can either a specialized type, like the input or function nodes, or an instance of a logic component (such as an Alert or Open page node).

To have our Tap node do something, let's add another logic node to the canvas. You can do this by dragging it onto the logic canvas from the library on the left.

For example, to show an alert when our component is tapped, you can drag the Alert component onto the canvas (which creates a new logic node), attach the Tap node to it by dragging a wire between the two, and configuring the Alert node by double-clicking it to open the settings panel.

Settings panel for an Alert node

Settings panel for an Alert node

Every node has a Name property, which is simply the display name of the node on the canvas.

The other properties depend on the node type, and are explained in the rightmost panel. In our Alert node example, we have the following properties:

  • title: Title text that is shown at the top of the alert dialog.
  • message: Message text that is shown in the alert dialog.
  • button: Button title text to dismiss the dialog.

In our example screenshot above, we've changed the property type to be a string from the dynamic msg. property (more on that later).

Now, with our node configured and wire connected, we can close the logic editor, save changes, publish our app and test our button that shows an Alert dialog.

Introduction