Referencing custom control methods directly in a SAPUI5 XML view

Mar 01, 2017 at 08:26 AM


avatar image


I am extending a control (sap.m.SearchField) which has a built in event "search". If you want to launch a specific method of a controller, you simply put the method name as the "search" attributes value.

The control is gonna appear in various places of the app. I don't want to refer to a method from every views controller, every time the search event launches, depending on the view I'm actually on. Instead, I would like to call a (private/internal) custom method of the control itself. How to achieve this? Is it possible to reference the control itself (and therefore its methods) in a XML view? How to "self reference" a control within the XML view?

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Zuhnja Riekert Mar 01, 2017 at 09:55 AM

To always call your custom control's function on its search event, you can attach the function to the search event in that control's init function. Like so:

], function(SearchField, SearchFieldRenderer) {
	"use strict";

	return SearchField.extend("custom.control.SearchField", {
		init: function() {
			var oControl = this;
			SearchField.prototype.init.apply(oControl, arguments);
			oControl.attachSearch("search", oControl._someFunction);

		_someFunction: function(){

		renderer: {
			render: function(oRM, oControl) {
				SearchFieldRenderer.render(oRM, oControl);
Show 5 Share
10 |10000 characters needed characters left characters exceeded

Thank you, that's exactly what I've needed!


Taking this example further: How can I get the current view (in this case in the body of _someFunction), in which I've instantiated this control? Since "this" is referring to the control itself, this.getView() won't work, as it does within a controller.


One way is to extract the view name from the Id of the control. you can use below code inside the _someFunction method to get instance of the view or its controller which instantiated this control.



I've seen tons of solutions, but any of it seems to work properly. I've done already something like this:

in the controller of the view, which instantiates my custom, extended control:

onInit: function(){ 
   tmp = this.getView();

returnView: function(){
   return tmp;
then I went for this code in my _someFunction body:

var relatedView = sap.ui.controller("mynamespace.mycontroller").returnView();

this works, but it's not elegant anyway (and probably not proper in terms of best practices). Why doesn't sap.ui.getCore.byId('myelement') return/target the element/control i was looking for (returns undefined).

If this would work, I wouldn't need to access the view itself, but only the element.

How to search/target in the DOM for an element by the id 'myelement' instead of '__xmlview1--myelement-listUl'? (splitting/regexping this is dangerous due to multiplatforming, and therefore differences in naming conventions of views). I wouldn't like to use the EventBus as well.


I have also another idea (but still stuck with the solution):

_someFunction: function(oEvent){
    // do something with oEvent, to get the view/controller?
Skip to Content