100 Days of LCNC: Days 13-17 – Logic and flow functions

[Dan_Wroblewski]

This blog post details the latest in my 100-day low-code, no-code journey, and hopefully provides some tips and tricks for you.

In the last post, I described the ins and outs of working with components (i.e., UI widgets). In the current post, I'll describe my experiences with the other major part of AppGyver, the Logic pane. I'll describe how I learned about events, flow functions, how to connect all of it together in the Logic pane, how to build your own flow function by combining existing flow functions, and how to create your own flow function using JavaScript.

 

Day 13 - Logic pane

As Yogi Berra once said: Half of building an app is creating the UI, half is building the event handlers, and half is everything else.

Last week I discussed the UI (components), now I'll discuss the event handling, which is done on the Logic pane. Whenever you click a UI element or the canvas (page element), you can click at the bottom of the page to open the Logic pane (if it's not already open).

Once open there is a pane for creating a logic flow, starting with an event (e.g., user action or data change) that sets off a chain of flow functions that perform some action to the application (e.g., change data, display dialog, call API, and many others).

So for example, when a user selects a team from the dropdown field (bound to page variable selectedTeam), the event for a changed value in selectedTeam is triggered, which then calls a data source, which then puts the retrieved data in the data variable for the list of players.

For me, there were 2 things that were a bit confusing:

• Some of the flow functions have multiple outputs, and it was not at first clear why, or how to use them. I finally found the Outputs tab (when clicking the flow function), which provides documentation on the flow function, including the outputs.
  

  

  
  

  It is important to remember: The flow function performs some action, and it decides which output node to proceed to – only one output node is followed. Maybe this is obvious but I wanted to make that explicit.

  
  

  When a flow function has 2 outputs, generally the first is for a good result and the second is for an error, or the first is that the condition returned true and the second is for when returning false. Some flow functions have more, like the barcode scanner, which has 3: (1) barcode was scanned; (2) camera was closed before scanning; (3) error occurred, like the device has no camera.

  
  

  

  
  

• For a single page, there are multiple places where my logic can be – sometimes, my app displays a dialog and I forgot where I had defined it.

---

As far as I understand, here's how it works:

• Each UI component I select gives me a separate logic pane.


• Each data variable has its own logic pane.


• The page, including all variables/parameters except for the data ones, share a single logic pane.

Depending on which logic pane you're on, you have access to different events.

• On the page and data variable logic panes, I get all the page, page variable, data variable, and app events.


• On a UI component logic pane, I get all the page variable, data variable, and component events.

And since, for example, the page variable events are available from multiple logic panes, I could define event handling for those events in multiple places. I don't know if I can see all my logic in one place.

 

Day 14 - Flow functions

On the Logic pane, by default there is a Receive Event flow function, already set to the default event for that component or page. For example, for a button, I get a tap event.

You can change the event you want to capture by going to the Event Source property in the Properties pane. Then you can drag and drop flow functions – actions you want to perform – and connect them to build a logic flow.

The flow functions panel works like the one at the top of the screen for the components.

• CORE: Basic flow functions (e.g., navigating, setting variables)


• BY ME: Flow functions I create myself (more on that below).


• INSTALLED: By clicking Flow Function Market, you can access additional flow functions, and these appear in the Installed tab.

A reference of flow functions is here: https://docs.appgyver.com/reference/flow_functions

If for some reason you have removed the Receive Event flow function, you can scroll to the bottom of the Core tab and drag a new one on the canvas.

Once you have the event you want, you drag and drop the flow functions you want, connect the output nodes to the input nodes of the next flow function, and configure the flow functions. Here's how it worked for the one I described above for managing selecting a team.

Some cool flow functions:

• Access the device's contact list


• Access GPS and other device measurements


• Pickers, like for dates or time


• Opening a URL


• Make HTTP requests

 

Day 15- Create your own flow function

Though I'm not sure how often you will need, you should know you can create your own flow function ... pretty much. You can either:

• Take existing flow functions, connect and configure them, and then wrap them as a new flow function.


• Write JavaScript (see tomorrow's entry).

Let's say I want to quickly be able to validate a number by:

• Checking if it's above 0.


• If it's not, I want to display an error message, but let the user customize the message.


• If the number is valid, I want to make sure it is an integer (not a floating point) and provide this integer as an output.

Let's assume I will want to do this in many apps and will need my own flow function. Here's what I did:

1. I added to the Logic canvas (any canvas, anywhere), an IF and Alert flow function and connected them using the false output (since I display a message only when the number is invalid).
   

   

   
   


2. I selected both flow functions, and clicked Create a New Flow Function at the top right.
   

   

   
   The 2 flow functions turn into a single green flow function.
   

   

   
   


3. I double-clicked the new flow function to go into isolation mode, where we have tools to define its functionality.
   

   

   
   


4. I double-clicked input, and set:
   
   
   
   • Name (of the flow function) to "Check Number"
   
   
   • Title of input to "Number to Check"
   
   
   • Value type to "Number"
   
   
   • Value is required to checked
   
   
   
   


5. Still in the Flow Function properties window, I added a second input called msg, with the title "Message", the value type "text", and value is required unchecked. I then clicked OK.


6. I clicked the IF flow function, then changed the binding for the Condition property to a formula:
   

   inputs.condition > 0​

   
   


7.  I clicked Output 1 and added an output property called theNumber and set it to a formula:
   

   INTEGER(inputs.condition)​

   
   


8. I clicked on the Alert flow function, and set the Dialog title to a formula:
   

   IF(IS_EMPTY(inputs.msg),"Number has to be a postive number",inputs.msg)​

   
   

Now that it was all set up, I clicked Overwrite local template.

I could then see my flow function in the list of flow functions under By Me.

If I click on my new flow function (or drag it into any Logic pane) and open the Properties tab, I could see my 2 new properties, one required and one not.

To use it, I just have to set the binding of these inputs. Cool!

 

Day 16 - Create your own flow function (JavaScript)

In my app I had a problem: I wanted to display a player's stats by year, but my API only had an API that returned for a single year, so I had to make a call for each year the player was in the major leagues.

In order to do this, I needed to get the start and end year for the player, and then create a list of years. Using this list, I created a logic that did the following:

1. Get the first year in the list.


2. Call the API for getting the player's stats for that year.


3. Take the response and append to a list variable.


4. Remove the year from the list of years.


5. If there are years left in the list, repeat.

For now, I want to just explain how I created my own custom JavaScript flow function to create the list of years.

I added a JavaScript flow function.

Inside a flow function, you need to define 3 things:

• Inputs: Here I defined a start and end year input that are derived from the player's basic data. What's really cool is that I could use instead a formula, because (1) I only needed the year not the whole date; (2) A player may not have an end date because he is still with his team, so I had to specify the current year if no date existed.


• JavaScript: Here I took some code (let's now call it low-code 😀) to take the start and end years and create an array of all the years.


• Outputs: Once I got the array, I want to provide it to another flow function, so I created an output called result that was a list and in the JavaScript ended the flow function by sending my array to the output.
  

  return { result: years };

  
  

P.S.: Turns out, the API I was using DOES return statistics divided by year, if you don't specify a year. But don't blame me ... blame the documentation. It said the parameter was required, so I didn't figure out that I could omit it and the API would still work and return all the data. 🙄

 

Day 17- JavaScript flow function and outputs

A few more words about the JavaScript function and outputs.

I can define multiple outputs for my flow function, and this will display multiple nodes on my flow function. Then I can connect each to a different flow function.

Each output can represent something different. A common pattern is that the first output is success and the second is failure. And in my code I can only send out values for one output, which determines the logic flow.

Though I can only send values for one output. I can define multiple properties for a single output.

So, to end the code and send data to a specific output, I added the number of the output (starting at 0 for Output 1) in the return statement.

return [0, { result: years }];

If I defined multiple properties for an output, I can provide a JSON object with the values for each. There seems to be a bug where I must wrap my properties in a second object (below result) in order to provide multiple values.

return [1, { result : { first : "first message", second : "second message" }   } ];

And finally, I can access these outputs from a formula using the outputs object ("Get Years" is the name I gave to my JavaScript flow function).

"ERROR: " + outputs["Get Years"].result.second + " - " + outputs["Get Years"].result.first

 

---

You can go all-in on all the low-code, no-code tools and take the 18-hour, 8-unit low-code, no-code learning journey (SAP AppGyver, SAP Process Automation, SAP Work Zone) – and it includes a certification exam, if you are interested (fee) – which is part of the new SAP Learning.