What's your favorite tip for using SAP Build Apps?

[Dan_Wroblewski]

Here's my tip – I just learned this a few days ago, even though I've been using SAP Build Apps (and before that SAP AppGyver, and before that AppGyver) for 2 years.

When creating logic, you do not have to drag your cursor from the output knob of one flow function to the input knob of a second flow function. You can simply drag your cursor anywhere over the second flow function and the 2 flow functions will connect.

Let go and it will snap into place. Viola!! No more struggling to drop it right on the incoming knob.

Another similar tip is, if you have a complex flow logic, connect the first and last flow function (or connect the event to a dummy flow function).

Now you can drag a new flow function onto the canvas, then pick it up and put it on the already created connection – the line will become dotted.

Let go and the flow function will automatically be connected in the flow (if the flow function has more than one outgoing knobs, the flow will connect to the first one).

😸

What is your tip for using SAP Build Apps? 

[Tinashe_Mukombe]

Great recommendation! This saves lots of production time over the hundreds of logic nodes that normally come with projects. I've also picked up a few practices I can't live without when working within the logic canvas environment, here a few tips from me: 

Offline content 

When working with Data variables, Once the page data is populated from the backend, You can set the current data to storage using the "Set item to storage" logic node. When the device is offline, "Get record collection" fails which then triggers the "Get item from storage" logic node. This retrieves the last available data when the device was once online allowing for app pages to stay populated with data even when the device is offline. When the device is online again, the latest data collection is stored. It would be up to you to determine to what extent some data can stay persistent while offline and when to expire or throw errors when the device goes offline. Old Appgyver composer pro used to have a delay loop that acted like a "refresh" function. Some use cases may need this and can easily be implemented to ensure that the device is always checking for an internet connection.  However take note of Bandwidth usage as it can quickly become expensive.

Preventing spam clicking that leads to duplicate pages opening, lag and app crashes 

Have you ever had a page that has lots of data so takes a little while to load when you tap to open page? And when a user taps an icon to open the page, nothing happens so they tap it again but a few milliseconds later, the page is opened twice or more? Or you have you had a situation where every tap of an icon/button executes a series of actions that must not be spammed otherwise the app experiences lag or crashes. Well I certainly have had such cases. To prevent such a situation, whenever I create a new page, one of the first steps is creating a Boolean page variable named 'spamClick' with default value set to false. Whenever a user wants to open/hide/interact in any way from or to a page/icon/button that is data heavy, upon a component tap, logic will check if the button has already been tapped through the 'spamClick' boolean variable, if it is false, then the page continues to get opened while also setting 'pageVars.spamClick' to 'True'. This means if the page is not yet opened and the user clicks the icon/button again, logic checks if 'spamClick' is true or false. If it is True, nothing happens as the task has already been initiated and may need a few milliseconds to execute. With duplicate page prevention, I like to reset the spamClick variable to false once again when the page is focused, however in other cases its important to reset the logic variable back to false when the function is done executing as it essentially disables the action completely. 

  This is a marginal implementation however it may be that little nudge your project may need to improve its quality ever so slightly. I'm also open to see if anyone else has encountered similar situations and came up with more efficient ways to go about this

Cheers!

[Dan_Wroblewski]

The storage tip is really helpful, as many people are asking how to handle offline mode for mobile apps, and also flow functions I was not aware of.

The second one, spam, is also interesting and similar in a way to the debounce and throttle flow functions mentioned by @mihaly-toth-nc .

[mihaly-toth-nc]

Hey there, specifically to your suggestion @Tinashe_Mukombe 

"Preventing spam clicking that leads to duplicate pages opening, lag and app crashes"

Have you considered using the 'Throttle' function that you can get from the marketplace? The purpose of that flow function is that it triggers the output after the first tap, and ignores the following taps for a set amount of time that you can control. I have found this as the easiest solution to your problem. 

While we are at this topic, I woud also strongly advice checking out the 'debounce' flow function as well. I find it extremely useful in scenarios where I have slightly different logic for my apps native and web version (e.g. the native version does a piece of logic on page focused event, while the web does something else on page mount event and they both need to trigger a backend get request, but I don't want duplicate get requests).

And I'll try to bring a list of my best tricks as well later. 

[Dan_Wroblewski]

Those are 2 very helpful but lesser known flow functions ... thanks for offering 😸

[Tinashe_Mukombe]

Thanks @mihaly-toth-nc ! I actually hadn't come across these nodes yet but after trying them, they're pretty handy and practical 🙂

[josueqsbo]

searchable and selectable Dropdown list Replace.

I am posting this just because i didnt find this resource in the market place. And find to solve this need using the disponible objects the app has.

I Used Imput field (to get the text to filter the list) and text (to present list of information when you tipe something on the input field)

when you select from the list you get the information of the selected value in page variables and set variables to hide the previous componets.

Finally you activate the containers that present the selected Values and an button to revert the changes and re-activate the initial search list.

if you know a way to add a search function in a dropdown component please tell me how. But if you dont knoow you can use my tip.

Spanish speaker here sorry if i wrote something wrong.

[Dan_Wroblewski]

Thanks for the tip. Can you show the full screen of your app and how you are using what you built?

[josueqsbo]

I think i need to clear the input field with the "X" button.

but this is what i need.

dont know if there are a Searchable Dropdown Object in the marketplace.

[Dan_Wroblewski]

There is a combo box in the marketplace that is similar to what you need. The only issue is whether there are so many records that you need to do OData calls to retrieve the data after someone enters some search text.

P.S.: For this, the throttle may be helpful as you may want to wait a second to see if the user stops changing the text, so you don't constantly make OData calls.

[mihaly-toth-nc]

So here is another useful idea, that might be obvious for others, but I stumbled across just recently. When you want to move or deleted or copy multiple logic nodes at the same time, you either have to use the mouse to select an area, or click through the logic nodes with 'ctrl + mouse left click' (or cmd), but if you want to select all of the flows that are connected one specific flow just do this: 'shift + mouse left click' it will select all the nodes that are connected as here:

[Dan_Wroblewski]

Love it!!!!

[mihaly-toth-nc]

Let me add another useful trick for the cases when user has several different styles and wants to quickly find one: 

Using the 'ctrl+f' or 'cmd+f' you can use the browsers search to find text on the screen, which would in fact find the right styles for you. 

This is extremely useful also if you need to find a component name in a long list of components (e.g. with a focus input logic node) to programmatically focus an input field: 

This method can also search on the logic canvas through the titles of each logic node. So in case you would rename your logic flows to meaningful names, you could easily find logic that you want to modify: 

[Dan_Wroblewski]

Whenever I see someone opening a new Preview window everytime they make a change to their app it really bothers me.

So my tip is that when you save a change to your app, the preview window will automatically update, so no need to open a new window (unless the old one has timed out). 

There does seem to be a slightly different logic flow when you save an app as when you open the window. In these cases you can just refresh the already opened preview page.

[Dan_Wroblewski]

Maybe my favorite tip. When entering the code to load your app in the SAP Build Apps preview app, the code is case IN-sensitive. Or should I saw NOT case sensitive?

What's more, you do not have to click Confirm pin, but instead can press Enter.

What does that mean? You can type in the code with one hand 😸

[eshrinivasan]

While working with Build Apps initially, it was not obvious why certain flow functions have the secondary output node. The primary output is the success path. To the secondary output, we can attach an Alert or Toast to display error messages in case the previous operation fails. This is useful for debugging purposes.

In the example below, if the "Get Record" function fails for any reason, you can output the error message in an Alert dialog like so, identify why the operation failed and display an appropriate message to the end user.

1. Attach an Alert dialog to the secondary node output.

2. Select the Alert flow function node. In the dialog title, click on ABC and choose "Output value of another node" as the binding option

3.  Under select logic node,  choose "Get Record" and choose message for select node output.

[Dan_Wroblewski]

That's great 👏

More generally, you can always drag a flow function on the canvas and in the upper right click "Read More".

Then it will tell you what each of the outputs is for.