Skip to Content

Introduction:

SAPUI5 controls has been built with the necessary events required for it. However there are certain cases, in which additional browser events needs to be added to the controls. For Example, “keypress” is a sample browser event for input element. In these cases, we can include browser events using attachBrowserEvent of UI elements (wherever applicable). Adding browser events in JS views is comparatively easier than doing the same in XML views.

Purpose: To Demonstrate handling browser events in XML views

Note:

1. Please check SAPUI5 Demokit Documentation for each individual controls whether they have option to add this additional event to it.

2. To know more about additional possible events, please check :http://www.w3schools.com/js/js_events_examples.asp

Sample Scenario:

Prevent user to enter only alpha numeric value in the input field and show message as well.

Implementation:

Step 1: Create a Sample UI5 application project by selecting XML view as the view type.

Step 2: Add a Label and Input field with an id to it as below

              <content>

                  <VBox>

                    <Label text=“User ID” />

                    <Input

             id=“myInp”

             type=“Text”

             placeholder=“Enter  ID” >

                    </Input>

                </VBox>

         </content>


Step 3: In Controller class, add the method onAfterRendering as below

            onAfterRendering: function() {

                                                  },

Step 4: Inside onAfterRendering, get the id of  input field and attach the browser event for it. Also add the logic that needs to be called when this browser event is fired. Now the method would look like:

onAfterRendering: function()

{

     this.getView().byId(“myInp”).attachBrowserEvent(“keypress”,

function(event){

     event.stopImmediatePropagation();

var regex = new RegExp(“^[a-zA-Z0-9]+$”);

var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);

if (!regex.test(key))

{

                                      sap.m.MessageToast.show(“Special Characters not allowed”,{

     my:sap.ui.core.Popup.Dock.CenterCenter,

     at:sap.ui.core.Popup.Dock.CenterCenter });

                                      event.preventDefault();

                                      event.stopPropagation();

return false;

}

}

);

},

Step 5: Save,Build and Test locally. Output of this will block the user to enter any special characters and also throw a message in screen.


Output.PNG

We can also define and handle the other browser events same as the above one. Give a try 😉

Suggestions and Feedbacks are welcome! 🙂

Regards,

Meganadhan S

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

      1. Ramakrishna Meda

        in xmlview i have <Form ></Form> i need to generate multiple forms dynamically so i cant specify id if i do then duplicate id error is coming. so how can we write a browerEvent inside form element as Form element does not have press or change methods

        (0) 
            1. Robin van het Hof

              You can’t. An ID is what makes a control unique. You could add a style class to your control and use jQuery to access these controls, but you’re never sure if your control is unique (but maybe you don’t want to)

              But as I mentioned before, if you generate your forms — and I suppose you do this via code — why not simply attach the event handlers during the generation? That way you don’t need to supply an ID and you have your browser events attached

              (0) 

Leave a Reply