Is there a way to get the SAP object by a DOM object?

[Former Member]

Hi,

There is a DOM object, If I can get the ID, I can invoke sap.ui.getCore().byId(id) to get the SAP object; But if it doesn't have an ID, is that possible to the the SAP object?

With DOJO, we can get the DOJO object by window.dijit.registry.byNode(domNode), is there a similar API in SAP?

I appreciate your help.

Regards,

Lei

[AndreasKunz · Accepted solution]

Hi Lei,

EVERY UI5 control has an ID. If you did not provide one, it will be generated. But nevertheless, when you do not know the ID but have a DOM element "d", you can do:

jQuery(d).control()

This also works when d is a sub-element of the control (not its root node).

Regards

Andreas

[Former Member · Accepted solution]

Hi Andreas Kunz ,

Is it jQuery(d).control() ? !!  I believe it should be jQuery("d").control() 

Regards

Sakthivel

[AndreasKunz · Accepted solution]

Hi,

no, the "d" is not a string. I wrote it with quotes, that's right, but I meant d is a DOM object and it looked strange written like this, so I added the quotes. 🙂

So it is $(d).control().

With quotes it would look for a tag "d".

See this example:

http://jsbin.com/openui5-control-from-domref/1/edit

Regards

Andreas

[Former Member · Accepted solution]

Hi Andreas,

Thank you for you quick and detail answer 🙂

I tried it, it really works.

I am just curious about one thing, the method control(), I didn't find it in SAPUI5 SDK jQuery API

Regards,

Lei

[Former Member · Accepted solution]

Got it!  But as the question was about not providing a manual ID to control, i thought you were referring to something like this, where button is the DOM element

$("button").control()  as in http://jsbin.com/openui5-control-from-domref/2/edit

[Former Member · Accepted solution]

I think jQuery(d) will make sense, d is a DOM element. jQuery("d") will change the meaning of DOM element d, right? And I tried jQuery(d).control(), it really return the SAP object.

Thank you both for the help, I appreciate it

[Former Member · Accepted solution]

It's avail as the 4th Method there in the doc you referenced -->  jQuery.fn.control(idx?) 

[Former Member · Accepted solution]

Thank you, got it.

[Former Member · Accepted solution]

Hi Andreas,

I have to un-mark your answer :-(, yesteday I didn't think clearly and test fully, just did a brief test.

Suppose we have a dom object as domelem, we want to get the real SAP object of an application.

$(domelem).control() will return a new instance, but not the existing SAP object of the application, it is different from what is returned by sap.ui.getCore().byId();

You can try the following code:

//var id = 'anID';

//var domelem = window.document.getElementById(id);

var id = domelem.getAttribute('id');

var elem = $(domelem).control();//return a new instance

var elemReal = sap.ui.getCore().byId(id);//return the existing instance in the application

//Try to test if they are equal

if(elem==elemReal){

  console.log( 'equal');

}else{

  console.log( 'not equal');

}

//Try to set the text color by calling method addStyleClass()

var style = document.createElement('style');

style.type = 'text/css';

style.innerHTML = '.redText { color: red; }';

document.getElementsByTagName('head')[0].appendChild(style);

elemReal.addStyleClass('redText');//this will change the text color of element

elem.addStyleClass('redText');//this will throw error

Regards,
Lei

[Qualiture · Accepted solution]

You are asking two different things here. I think it's important to know there is a distinct difference between

document.getElementById(id)

and

sap.ui.getCore().byId(id)

The former gives you the HTML DOM object, the latter gives you the SAPUI5 element

And since the former just gives you the DOM element, you can't as such use any of the SAPUI5 element's methods like .attachStyleCLass("yourclass"); you can only use the 'standard' HTML/Javascript/CSS/Jquery manipulations

To my knowledge -- but maybe can shed a more substantial light on it -- you can't get the SAPUI5 object from just the DOM object

[Former Member · Accepted solution]

Both elem and elemReal are SAPUI5 control if you look at my listing carefully .

var elem = $(domelem).control();//return a new instance

var elemReal = sap.ui.getCore().byId(id);//return the existing instance in the application

Because DOJO can get the DOJO-object from a DOM-element by the following call

window.dijit.registry.byNode(domNode), I think that it is possible for SAP to do the same thing. Maybe SAP hasn't provided a way or we don't know that way, but everything is possible

[Former Member · Accepted solution]

Hi lei,

jQuery(domElement).control() returns array of objects. In your case, elem is just the Array, elem[0] will be the UI5 control

to test if they are equal, try

if(elem[0]==elemReal){
  console.log( 'equal');
}else{
  console.log( 'not equal');
}

JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="h...

[Former Member · Accepted solution]

Yes, you are right. I didn't remark that, thank you.

[Qualiture · Accepted solution]

That's pretty neat, I didn't knew that! Thanks!

[AndreasKunz · Accepted solution]

Ah, sorry, I missed that Array thing! There's the index parameter in the .control(idx) function to immediately choose which element you want if you know what you get.

So, Sakthivel got it right: you say:

$(domRef).control(0);

When you say $(domRef) there is of course always exactly one control returned, but you could also say things like:

$(".sapUiBtn").control();

$("span").control();

$("#myHeader > *").control();

which return a collection of UI5 controls. So the return value in general has to be an array.

Regards

Andreas

[aman_khanna · Accepted solution]

Thanks for this discussion. Helped me out!

[Former Member]

You can use javascript/jQuery to retrieve elements from DOM, SAPUI5 uses jQuery library internally.