Skip to Content

Handling browser Events in XML Views


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


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 :

Sample Scenario:

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


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



                    <Label text=“User ID” />




             placeholder=“Enter  ID” >




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()





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

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

if (!regex.test(key))


                            “Special Characters not allowed”,{


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



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.


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

Suggestions and Feedbacks are welcome! 🙂


Meganadhan S

You must be Logged on to comment or reply to a post.
      • 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

          • 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

  • Hello,


    There is another possibility to achieve the feat you are trying here, rather than attaching the event in onAfterRendering everytime there is a screen rendering.

    You can use custom control.

    Extend the control of your choice and attach the event you wish to.

    This will allow you to bind the events directly from the view itself.


    For example:

    create a file customFlexBox in the folder control

    sap.m.FlexBox.extend(“control.customFlexBox”, {
    metadata : {
    renderer: function(oRm, oControl){
    sap.m.FlexBoxRenderer.render(oRm, oControl);
    onclick: function(oEvt) {

    Now use it in the xml view


    Now create a method showCustomMessage in the controller to use you control effectively.

    Please note: Don’t forget to override the render function of the parent control. It is necessary to render the control.

    I hope this is helpful ?


    xmlns="sap.m" controllerName="myController" >
    <control:customFlexBox  press="showCustomMessage" />