Describing Flow Functions

Objectives

After completing this lesson, you will be able to:

Describe the Logic Canvas.
Build logic flows and functions.

Logic Canvas

Starting with an event, multiple logic flows can be combined to perform any function and action as needed. These are built in the Logic Canvas and become visible by choosing the lower bar in the UI Canvas and can be expanded by dragging the bar.

Here are the three different types of Logic Canvas:

Global Logic Canvas: The Global Logic Canvas can be reached in the page collection.
Page Logic Canvas: At the Page Logic Canvas, you can see integrated page spinners that are set in the function in such a way that it disappears when a page is loaded.
Component Logic Canvas: Different logics can be found in the Component Logic Canvas by default, depending on the selected component. For example, more logics can be shown if a component also has several subcomponents and access.

The large selection of logic elements can be found, sorted by category, on the left side of each Logic Canvas.

As with the components, a core trunk covers the most common use cases and the possibility of additional flow functions from the Marketplace. These are later available in the Logic section and can be constantly expanded. Also these can then be found under the Installed tab. The default flow functions in the Core tab and additional functions from the Marketplace thus provide the tools to optimize the app logic and associated functions.

In the following sections, the flow functions are shown in ascending order of complexity with various examples of the categories in the Core tab of the Logic Canvas.

Simple and Multiple Logic Flows

Simple Logic Flow

Logic flows can be very simple and can consist of only one flow function. In particular, this is sufficient if you only want to navigate between pages in the app or navigate to a URL. A necessary criterion is always to have at least one event. For example, you can drag and drop the "Open Page" logic from the navigation category and connect it with a button as an event so that the button now navigates to the desired page and, with this, triggers the action.

Multiple Logic Flow

The Logic app usually uses multiple logic components and concatenates them. It is even possible to copy individual logic elements or entire strands. If a logic flow contains several events, the app becomes more dynamic and, depending on the project, simple to complex logic can be carried out. This is usually necessary if variables and data are to be queried or edited, such as when a participant list is queried or updated. Most importantly, the output can also be passed on by concatenation, which can then be used further. In this way they can be used to customize any kind of behavior in an app.

Enrich the Navigation with Simple Flow Functions

Business Scenario

The app logic is implemented for the first time. Next, the navigation logic needs to be created with simple logic based on one or more chained flow functions.

Exercise Options

To start the exercise, choose Start Exercise in the figure below.

A pop-up opens. You have the following options:

Start: the simulation starts. Follow the simulation to learn how to enrich the navigation with simple flow functions.
Open PDF Document: a pdf opens. Based on the steps described in this document, you can perform the exercises in your own system landscape.

ExerciseStart Exercise

Multiple Outputs and Conditions

Flow functions always receive an input. However, the result can have multiple outputs for some logic elements. This is particularly the case if the user is confronted with an interaction and has to make entries or choose an option. However, other alternative outputs may also have resulted in the termination of an interaction or any error. As a result, depending on the output with several branches, different logic flows can be continued, and thus more complexity can be integrated to address the different events. Despite possible complexity, the advantage here is that the visual design of the logic flows remains clear and can be restructured quickly at any time, or connections can be deleted.

Implement Logic for the Dark Mode Switch

Business Scenario

With the If Condition Flow Function and the possibility of multiple outputs, the toggle button logic will be implemented to change the background color of the app to dark mode.

Exercise Options

To start the exercise, choose Start Exercise in the figure below.

A pop-up opens. You have the following options:

Start: the simulation starts. Follow the simulation to learn how to implement the logic for the dark mode toggle button.
Open PDF Document: a pdf opens. Based on the steps described in this document, you can perform the exercises in your own system landscape.

ExerciseStart Exercise

Use of Devices Functionalities

With the advantage of the SAP Build Apps cross platform, the applications work on the Web as well as on different devices. Especially for mobile devices such as a smartphone, it is advisable to use additional functionalities of the device. In the example, the camera can be used to take photos, videos, or scan a code. The result can then be processed further as an output.

Here you can see an example of how device logic can be used to build a scanner app: Creating a Scanner Application With SAP Build Apps

Next lesson