Skip to Content
Author's profile photo Former Member

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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi is there any way to attach browserEvent without using Id in the XML view itself ?

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      Just out of curiosity, how would you then determine which control you want to attach your event to?

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      In that case, while you're doing the generation why not simply attach the event handlers at the same time?

      Author's profile photo Former Member
      Former Member

      Hi Robin how can we access the Form element if we have not specified id do we have to create separate fragment and add it to the XMLView

      Author's profile photo Robin Van Het Hof
      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

      Author's profile photo Former Member
      Former Member

      Thanks Robin for the info 🙂

      Author's profile photo Vaibhav Mishra
      Vaibhav Mishra



      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" />