/scripts/ahub.form.attachments.js
0

Referencing custom control methods directly in a SAPUI5 XML view

Mar 01, 2017 at 08:26 AM

149

avatar image

Hello,

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
2

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:

sap.ui.define([
	"sap/m/SearchField",
	"sap/m/SearchFieldRenderer"
], function(SearchField, SearchFieldRenderer) {
	jQuery.sap.declare("custom.control.SearchField");
	"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!

0

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.

0

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.

sap.ui.getCore().byId(this.sId.split("--")[0]).getController();

0

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();
relatedView.byId('myelement').getBinding("items").filter(filters);

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.

0

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

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