How can we set class with mSetting?
For example:
new sap.m.Button({}).addStyleClass("my-class"); //work
Another way?
new sap.m.Button({
styleClass: "my-class" // did'n work
});
Any possibility to set class that way?
As of now (till version SAPUI5 1.28.4), styleClass is not a supported property of sap.m.Button nor its base type's( sap.ui.core.Control) property.
Hence you have to use addStyleClass(sStyleClass) OR in XML view directly.
As #Ivan said, you can use busy property because this exists in the base type sap.ui.core.Control
Hopefully we will this basic functionality in higher releases.
Update: for multiple CSS classes
var oLabel = new sap.m.Label({text:"Sample"}).addStyleClass("sample1 sample2");
OR
var oLabel = new sap.m.Label({text:"Sample"}).addStyleClass("sample1").addStyleClass("sample2");
Related
I want to access a view's controller from a custom module with some utility functions. Basically you can do this that way:
var oController = sap.ui.getCore().byId("__xmlview1").getController();
The problem is that the above coding will not work in a real environment because __xmlview1is dynamically created by the framework. So I tried to find a possibility to set the ID of the view during instantiation. The problem is - I could not find one:
Trying to give the view an ID in the view.xml file does not work:
<mvc:View
controllerName="dividendgrowthtools.view.dividendcompare"
id="testID"
xmlns="sap.m"
...
Trying to set the ID in the router configuration of the component does not work either:
...
name: "Dividend Compare",
viewId: "test",
pattern: "Dividend-Compare",
target: "dividendcompare"
...
The problem is that I do not have direct control over the instantiation of the XML view - the component respectively the router does it.
So, is there a solution for that problem? Or at least a save way to get the view ID by providing the name of the view?
You should have a look at the SAPUI5 EventBus.
I am pretty sure, you want to let the controller to do something with the dividentcompare view. With the SAPUI5 Eventbus, you can publish actions from one controller to another witout braking MVC patterns.
In your dividendcompare.controller.js:
onInit : function() {
var oEventBus = sap.ui.getCore().getEventBus();
oEventBus.subscribe("MyChannel", "doStuff", this.handleDoStuff, this);
[...]
},
handleDoStuff : function (oEvent) {
var oView = this.getView();
[...]
}
Now, in your anothercontroller.controller.js:
onTriggerDividendStuff : function (oEvent){
var oEventBus = sap.ui.getCore().getEventBus();
oEventBus.publish("MyChannel", "doStuff", { [optional Params] });
}
You are now able to get the view from the dividentcontroller in every case from every other controller of your app. You dont access the view directly, this would brake MVC patterns, but can pass options to its controller and do the handling there.
I am trying to update the content of a Sap.m.List control. It keeps holding the same Model, but the binding path for that model changes.
Is there any function which I could use to update my Sap.m.List to display the data inside a new binding path?
I tried using oList.getModel().setPath() and after that a refresh of the model, but this did not change the content of the list.
Thanks in advance for any advice on this!
you need to set the binding context, you can get a new context via the path
var oModel = oList.getBindingContext().getModel();
var oContext = oModel.getContext(sPath);
oList.setBindingContext(oContext);
Change the Element bound to as follows:
var sPath = "<your new path>";
oList.bindElement(sPath);
if you need a handle to your list
var oList = this.getView().byId("<your-list-id>");
Hope this helps.
I'm trying to add a CSS property dynamically to a control.
I have a group of RadioButton. On selection of any one of the buttons, I want to make one layout visible.
Below are some of the snippets I tried, none of them seem to work!
Snippet-1
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
fcid.visibility = "hidden";
}
Snippet-2
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
jquery('#fcid').css("visibility","hidden");
}`
Snippet-3
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
jquery('#fcid').hide();
}
You cannot use fcid.visibility = "hidden"; and expect it to behave like a DOM object; it's not, it's a Javascript class with getters, setters, events, aggregations, etc.
Therefore, you should use the control's properties instead: fcid.setVisible(true);
See the API docs for the correct signature of the control/layout properties
You can:
var fcid = ...byId("FC7");
fcid.setVisible(false);
Or
fcid.$().hide(); // or every other jquery method
Or
fcid.addStyleClass("hiddenObject");
Last one with Css-Class:
.hiddenObject { display:none; }
I have a button into a bar in my XML view:
<Button xmlns="sap.m" id="idMenuBarSoc" text="{flagSocietyBar}" visible="true" icon="sap-icon://filter" press="handlePressSocFilter"/>
in the controller I write (in the init method):
this.getView().setModel('Oracle-Society', 'flagSocietyBar');
but if i test my application the button not show any text... ('')
What should I write in text="{?????????}" ?
That's not going to work... You haven't defined the model type (I think you want to use JSONModel?) and you haven't set the data to the model.
By the look of your code, I think you wanted to define a property 'flagSocietyBar' with value 'Oracle-Society', am I correct?
However, the setModel(oModel, sName) method is used incorrectly here. According to the API, oModel cannot be of type string but should be of type sap.ui.model.Model.
Modify your code to the following:
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({flagSocietyBar : "Oracle-Society"});
this.getView().setModel(oModel);
and your button should then bind to text="{/flagSocietyBar}"
If you need named models, specify it as such:
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({flagSocietyBar : "Oracle-Society"});
sap.ui.getCore().setModel(oModel, "myModel");
and your button should then bind to text="{myModel>/flagSocietyBar}"
I'm using ember latest and jquery.ui's Draggable and Droppable. I am also using some mixins that a talented ember person created to make a Draggable and Droppable view in ember. Here's the fiddle:
http://jsfiddle.net/inconduit/6n49N/7/
I need to attach the view's content to the drag event so that I can access it in the drop event. With straight up jquery, I know you'd do $(..).draggable({ .. }).data("myData","some data here"); but I don't know how to reference the view's content in this ember implementation.
Here's a snippet from App.Draggable in the fiddle:
App.Draggable = JQ.Draggable.extend({
appendTo: 'body',
helper: function() {
$(this).data("myData","this is where actual data would go");
JQ.Draggable extends Ember.View. Inside the helper() function, 'this' refers to the actual DOM element, I don't know how to refer to the View's variables. I want to pass the view's content so that it can be retrieved here:
App.Droppable = JQ.Droppable.extend({
drop: function(event,ui) {
alert('Dropped! ' + $(ui.draggable).data("myData"));
The template for the draggable looks like this:
{{#view App.Draggable contentBinding="App.anObject"}}Drag me{{/view}}
and I would like to pass that content. Please have a look at the fiddle, the pertinent functions are defined at the bottom of the javascript.
answering my own question here.
i attached the data in the didInsertElement callback as follows:
App.DraggableDataView = App.Draggable.extend({
didInsertElement: function() {
this._super();
var element = this.get('element');
$(element).data('myData',this.get('content'));
},
});