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}"
Related
I have a component in a list in a sapui5 XML view and I want to set multiple properties of that component with one function. E.g. I want to set text, status, tooltip and icon of an ObjectStatus together, because the values of those are all different facets of the same data. The issue is that i have to calculate the values to set to those properties from the model with the same relatively time-heavy function. If I write a separate formatter for each of those properties, it has to run the same function for each property. Instead of this I would like to write one function that runs this time-heavy function once and sets a value to all those properties at the same time.
To accomplish this, I have tried creating a sapui5 fragment that could be placed in the list and filled with different information by the createContent function for each instance of that fragment. However I cannot figure out how to do this.
In the view definitions I'm trying to instantiate the fragment like this:
<core:Fragment fragmentName="QuantificationParameter" type="JS" path="{project>}"/>
And then I'm trying to set different content to each instance of the fragment:
sap.ui.jsfragment("namespace.fragments.QuantificationParameter", {
createContent: function(oParentController) {
//Get the object bound to this list item
var derived; //Calculate some intermediate information from this object
return new sap.m.ObjectStatus({
icon: derived.icon,
text: derived.text,
state: derived.state,
tooltip: derived.tooltip
});
}
});
While debugging it seems that the createContent function of the fragment is run only once and I cannot figure out any way to access the data that I'm trying to bind to the fragment. Is there any way I can render different content to each instance of the fragment?
What you are searching for is called databinding.
But first of all: we do not use JS Fragments, due to the same reason we do not use JS views. Here s a little Blog written on that topic.
https://blogs.sap.com/2018/05/01/why-do-we-use-xml-views-rather-js-views-in-sapui5/
Now the databinding part:
I asume, that Fragment will have the same controlls for each instance and you just want the values to change. To do just that you need to create a JSONModel either in your BaseController or component.js. In this Model you store i.e. your Labels text.
Inside your Fragmet you bind that property to the label. Since JSONModels bindingmode is two way by default the Label will change dynamically if you update the model. You can update the model i.e. everytime the user clicks on one of your list items.
Framgmet example:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<f:SimpleForm
editable="true">
<f:content>
<Input
value="{baseModel>/inputA}"
type="Text"
placeholder="{i18n>placeHolder}"/>
<TextArea
value="{baseModel>/textA}"/>
<TextArea
editable="false"
value="{baseModel>/textB}"/>
</f:content>
</f:SimpleForm>
</core:FragmentDefinition>
creation of the model i.e in component.js:
var oBaseModel = new JSONModel({
inputA: "",
textA: "",
textB: ""
});
this.setModel(oBaseModel, "baseModel");
example for your press lit item funtion:
(should be in the controller of the view your list is located in)
onListPress: function (oEvent) {
var oLine = oEvent.getSource().getBindingContext("yourRemoteService").getObject();
this._oBaseModel.setProperty("/inputA", oLine.ListPropertyA);
this._oBaseModel.setProperty("/textA", oLine.ListPropertyb);
this._oBaseModel.setProperty("/textB", oLine.ListPropertyC);
}
You should really give that tutorial a go:
https://sapui5.hana.ondemand.com/#/topic/e5310932a71f42daa41f3a6143efca9c
I'm migrating my app to new version of OpenUI5 (1.48) and have some problems with model bindings. I am using sap.ui.getCore().setModel(oModel, "myModel") for model declaration and when I'm trying to bind some controls to values from this model like this ...
<Text text="{local>/count}" />
... the value isn't displayed.
But if I get this model, set it to view in controller ...
var oModel = sap.ui.getCore().getModel("local");
this.getView().setModel(oModel);
<Text text="{/count}" />
... everything would work fine.
Maybe somebody faced a similar problem or has an idea what is wrong with my code?
You must be using a Component in your app. In that case, core models are not automatically propagated to the children of the ComponentContainer which is why your Text control doesn't know the model "local".
The reason why "{/count}" works is because you set the model explicitly on the view without any model name. If the model doesn't have a name, it's a default model and > has to be omitted in the binding path.
To learn more about where to set models, take a look at my answer to a similar question: https://stackoverflow.com/a/42251431/5846045
I think problem may be how you creating the JSON model!,
try this one.
Controller
sap.ui.define(["sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",],
function(Controller,JSONModel) {
"use strict";
return Controller.extend("com.stackoverflow.testUI5", {
onInit:function(){
var oData = {
count:"1"
};
var oModel = new JSONModel(oData);
sap.ui.getCore().setModel(oModel , "local")
//this.getView().setModel(oModel ,"local");
}
});
});
XML View
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xml>
<mvc:View controllerName="com.stackoverflow.testUI5"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core" xmlns="sap.m" >
<Text text="{local>/count}"/>
</mvc:View>
this snippet will work.
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.
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");