Handling browser Events in XML Views
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.
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
Hi is there any way to attach browserEvent without using Id in the XML view itself ?
Just out of curiosity, how would you then determine which control you want to attach your event to?
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
In that case, while you're doing the generation why not simply attach the event handlers at the same time?
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
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
Thanks Robin for the info 🙂
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
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
Regards,
Vaibhav