Describing Flow Functions 

After completing this lesson, you will be able to:

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

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. Follow the simulation to learn how to enrich the navigation with simple flow functions.

If you have access to an SAP System, you can perform the steps, shown in this simulation. You will find a description of the steps in the PDF, which is shown on the first page. Just click on the link to download the PDF.

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. Follow the simulation to learn how to implement the logic for the dark mode toggle button.

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.

Log in to track your progress & complete quizzes