How to Trigger a Button on Enter in Outsystems

Hi! I’m Outsystems Developer from Brazil and it is my first article. So, I hope this can help you in your development about Focus.

The Problem

I have had a problem in my first sprint that my Product Owner reported and it said : “When you are in the sign in form and press enter nothing happen”. It was a simple form with 2 inputs and 2 buttons where the user fills in the information about login and password, but when they have already finished to type the password and press enter nothing happen, because the key “enter” doesn’t trigger anything.

The Solution

After I have made the review of the problem, I searched from solutions using css or html that help me to solve it easily, but I didn’t find anything. So, I thought “ It’s time to javascript shows up and gives your power”.

From the console in the browser I add a simple listener to the DOM to catch the event while the user presses enter to show me a message. After I did this implementation, it was the moment to test and knowing the result, and do you guess what happen ? it works well.

With this discovery I made my mind and I added another listener in the input to listening the enter key event to trigger the button to solve my issue.

Javascript

This is my Javascript final version from the console.

// Get the input field by id
var field = document.getElementById(“mySignInInput”);
// trigger a function when the user press a key on the keyboard
field.addEventListener(“keyup”, function(event) {
// Number 13 is the “Enter” key on the keyboard
if (event.keyCode === 13) {
// Cancel action from any behavior
event.preventDefault();
// Trigger the button action click
document.getElementById(“mySignInButton”).click();
}
});

Outsystems

Step 1

Create a Server Action that will be invoke from the browser, with two parameters for passing the ids from the Html elements.

Step 2

Add a RunJavascript Action to the Flow.

Step 3

Paste the Javascript code in the RunJavaScript Action with the two id parameters.

Step 4

Name the inputs and buttons that you need to trigger with enter

Step 5

Add you Custom Server Action to the preparation of Screen or WebBlock and fill in the parameters

The Result

As you can see with a little code I solve my problem and make some points with my Product Owner.

In the new version of Outsystems this behavior has already been implemented. However if you are in the old one environment from Outsystems, it is a good idea. But you need to be careful when you are using Javascript, because it may leave you a performance problems from the client side. For example every time that I call the Custom Server Action, the Javascript code increases.