Flow Function of the Month: Dismiss Keyboard 🏆

[Dan_Wroblewski]

You know that feeling when you have a coding problem and then you find that there exists an object or method or property that gives you the exact thing you need?

I was building an ice breaker app for our next CodeJam (by the way, you can request an SAP Build or any CodeJam anywhere in the world on our CodeJam page). I created a form to let people answer some fun questions about themselves, and then display everyone's answer.

Now when I clicked the "Tell Everybody" button, the data was submitted. But if the user did not explicitly dismiss the keyboard, it remained, and this to me was really annoying, especially since there seemed no button in the keyboard to dismiss itself and it scrolled the page so I couldn't see most of it.

To my good fortune, there is a somewhat lesser known "Dismiss Keyboard" flow function, that does exactly what I needed. You'll have to import from the Marketplace.

And I could put it right after I handle the (successful) submit button click.

Now, after the user submits the form, the keyboard goes away and I can see the entire page again. 

😺

  

[mihaly-toth-nc]

Great idea, thanks for sharing. 

A note that you could actually attach the logic to the 'onBlur' event node of the input field (or even onSumbit) to auto-dismiss when user taps anywhere away in the UI so that they could also even see their own answers easily before sending them over. 

[Dan_Wroblewski]

That's a great idea, thanks.

In this case, I want that when they click the button, the keyboard goes away. Without the Dismiss Keyboard, after the click, the last input field gets the focus again and the keyboard reappears.

When I put the Dismiss Keyboard on this input field, I assume onBlur is triggered, but then after the click the focus returns to the input field and the keyboard reappears since the Dismiss Keyboard flow function already ran.

When I put the Dismiss Keyboard after the click, I am assuming the input field gets the focus instantaneously after the click, and then the Dismiss Keyboard flow function runs, dismissing the keyboard. Not sure if the refocusing on the input field is a bug or the expected behavior.

But your idea of enabling it on onblur so users can easily dismiss the keyboard is really helpful.

[mihaly-toth-nc]

Well, that seems to be odd. If the onBlur doesn't work as expected you can potentially try with the 'onSubmitEditing', however that might be tricky on a native runtime. One thing is beyond doubt if there is no logic that would bring the input field back in focus, the keyboard should not appear again.

[Dan_Wroblewski]

@mihaly-toth-nc I found it difficult to figure out when many of the events are actually triggered. It would be nice to create a graphic showing the entire flow of all the events. 

[mihaly-toth-nc]

Indeed it would be nice, but as per my understanding of the current state of SAP Build Apps and the roadmap, it won't be coming anytime soon. 

My experience when working with a lot of input fields or even soft tabs, conditional renderers and lists is that I tend to offload all 'event management' to the logic canvas of the page rather than keeping logic on each component. So here is an overview of what I usually do: 
1. Let's take a login form: add email input field.
2. onBlur and onSubmitEditing events are wired up to a 'Trigger event' logic. 
3. On the page logic canvas I would add a 'Receive event' logic node with the name 'emailInputFinished'
4. Then on the email input I would trigger the 'emailInputFinished' event in my 'Trigger event' logic. 
5. This allows me to handle and maintain all the crucial logic on the page canvas and to have a good overview of what can go wrong. 

In this setup there is just one last thing that doesn't work out of the box and that is 'sending data over with the trigger event' node (such as the information of the component and the values), which has been a limitation for as long as long I'm using the tool. 😅 But that's solvable, if you use page or app level variables in your input fields. That solves most of these issues.