SAP UI5 - using jquery to hide objects in DOM

[former_member611732]

I am using SAPUI5 and I'm having trouble getting an element and modifying its style. I am using a simple query command to access an element via its class name with: $(".sapUiCalItems"); I have printed this to the console and confirmed that it targets the element I want. However, when I try to call hide, or change the display css to "none", nothing seems to happen. So, the final command I'm trying to use is: $(".sapUiCalItems").hide(); $(".sapUiCalItems").css("display": "none"}); Are there certain restrictions with Jquery within SAPUI that make this not possible? Generally, what is the easiest way to hide something in the DOM when you have the id or class?

[nabheetscn]

you can do in two different ways, one is if you want to code in controller then you can read the object via this.getView() method and then use set,hide visible methods, another way out is directly bind the properties of the elements to the model something like this.

[Joseph_BERTHE]

You can try something like this :

var oCtrl = $(".demo").control();
oCtrl.setVisible(false);

Regards,

Joseph

[former_member611732]

Thanks everyone!

Looks like the command was actually working. But the problem was that the command was being run before the element had finished displaying. Checking that the command was working via the console was helpful. Thanks again!

[former_member196805]

If hide the calendar is the only purpose, try setVisible() method like

oCalendar.setVisible(false)

[former_member611732]

Thanks Nabheet. I tried the first solution earlier and it did not work. The second solution does not seem possible as we don't control the internal details of the component we are trying to manipulate (I.e. PlanningCalendarView component). As a result, I can't directly bind to the inner elements of the out of box component and then bubble up setting it to false or true to my parent component, at least not without changing the inner component.

With regards to getting the view and hiding, I get a hide function now found on the view.

// get view and hide of the whole calendar just to check hiding -> throws hide function not found error
this.getView().hide();

// get element via jquery
console.log($(".sapUiCalItems")); // definitely works. getting the actual exact element to hide. success.
$(".sapUiCalItems").hide(); // hide function does not work. doesn't do anything, no error in console.
$(".sapUiCalItems").css("display": "none"); // change the css value of display to none to hide the element. does not work. no error in console.

I also tried getting the element via the view:

var element = this.getView().byId("por-MonthInt"); // success. get's parent element.
var arrayToDelete = element.findElements("por-MonthInt--MonthsRow-months");

var arrayToDelete = element.findElements("por-MonthInt--MonthsRow-months"); // success. but actually returns 3 elements, which it should not. should only return 1 matched element.

Basically, I am just trying to understand why a simple hide() function on an element accessed via jquery does not work. Accessing the element via the byId method is also not working.

[nabheetscn]

I tried with Calendar sample and it is working