I am trying to load models into a view. i am able to load the model when i do not give any name for the model like:-
sap.ui.getCore().byId("mao").setModel(oModel);
But the model is not set to view if i give like the below. I am not getting any error also
sap.ui.getCore().byId("mao").setModel(oModel,"myModel");
I am using load data to load my data
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData(servicePath);
sap.ui.getCore().byId("mao").setModel(oModel);
Try this:
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData(servicePath);
var oController = this;
oModel.attachRequestCompleted(function() {
var data = oModel.getData();
oController.getView().setModel(data, "namedModel");
});
Then you can call like so:
this.getView().getModel("namedModel");
Your binding paths in the view should also be adjusted for named model binding. Details please see
at documentaion regarding the binding path.
The best way to set a model to a view is by defining them in Component.js file or if you are using 1.33 and above version then define the model in manifest.json file.
Set Model in Component.js file:
Define the model init method as shown below:
sap.ui.define(['jquery.sap.global', 'sap/ui/core/UIComponent'],
function(jQuery, UIComponent) {
"use strict";
var Component = UIComponent.extend("samples.components.sample.Component", {
metadata : {
}
init: function() {
var sServiceUrl = 'example/servie';
var oModel = new sap.ui.model.odata.ODataModel (sServiceUrl, true);
this.setModel (oModel, "modelName");
}
});
return Component;
});
Set the model in manifest.json file
https://openui5.hana.ondemand.com/#docs/guide/be0cf40f61184b358b5faedaec98b2da.html
Now this model will be available in any controller and you can access the model as mentioned below:
var oModel = this.getView().getModel("modelName");
this._sValidPath =jQuery.sap.getModulePath("OpenUI.c", "/name.pdf");
this._oModel = new JSONModel({
Source: this._sValidPath,
Title: "My Custom Title",
Height: "600px"
});
sap.ui.getCore().setModel(this._oModel,"mainModel2");
sap.ui.getCore().byId("mao").setModel(oModel);
But the model is not set to view if i give like the below.
You did not bind this to the View you bound it to the core.
Remove the .byId("mao") and it should work.
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData(servicePath);
sap.ui.getCore().setModel(oModel, "myModelName");
Read Model:
var oMyModel = sap.ui.getCore().getModel("myModelName");
sap.ui.getCore().byId("mao").setModel("myModel") means you want to get a object by the ID "mao" and assign a model to the object.
This is how the view binding works:
this.getView().setModel(oModel, "myModelName");
var oMyModel = this.getView().getModel("myModelName");
On the OpenUI5 site theres a nice developer walkthrough check this out:
https://openui5beta.hana.ondemand.com/#docs/guide/70ef981d350a495b940640801701c409.html
Related
I used SmartTable with the property initiallyVisibleFields. I bound ODataModel to it. The problem is when I want to show all fields of ODataModel, e.g. after I click on SmartTable's row and try to display it in the dialog. I just see fields from initiallyVisibleFields property. It looks like ODataModel is filtered with initiallyVisibleFields property.
I was thinking about JSONModel where I put copy of ODataModel before it is bind to SmartTable, but I am planning to use SmartFilterBar, so index of shown data in the table will be changed after filtering. So I can not simply pull data from JSONModel. I can still filter data from JSONModel based on the fields I get from
ODataModel filtered with initiallyVisibleFields but there I can still get different data, because there can be differences in the fields which are hidden.
Please, can you advice me how to solve this issue?
Thanks for any tips.
...
return Controller.extend("ABC.View1", {
oDialog: null,
onInit: function() {
var oModel, oView;
oModel = new ODataModel("/sap/opu/odata/sap/ABC/", {
useBatch: false
});
oView = this.getView();
oView.setModel(oModel);
this._createSmartTable();
},
_createSmartTable: function() {
var oSmartTable = new SmartTable('idSmartTable',{
entitySet: "ABCListSet",
tableType: "ResponsiveTable",
sStyleClass: "sapUiResponsiveContentPadding",
initiallyVisibleFields: "A,B,C,D",
showRowCount: false,
enableAutoBinding: true,
demandPopin: false,
useVariantManagement: false,
useExportToExcel: false,
useTablePersonalisation: true,
});
// Register event row click
var that = this;
var oTable = oSmartTable.getTable();
oSmartTable.attachDataReceived(function() {
var aItems = oTable.getItems();
if (aItems.length === 0) return;
$.each(aItems, function(oIndex, oItem) {
oItem.detachPress(that._createDialog);
oItem.setType("Active");
oItem.attachPress(that._createDialog);
});
});
var oVBox = new VBox();
oVBox.addItem(oSmartTable);
var oPage = this.getView().byId("idPage");
oPage.addContent(oVBox);
},
_createDialog: function(oEvent) {
//HERE I the oEvent has data filtered by initiallyVisibleFields property of Smarttable.
},
});
...
Do I understand you correctly that you want to show the complete entry in a dialog? The SmartTable uses $select statements to only load the fields of an entity that are also shown in the table. If you want to load all, I think you should add them in the requestAtLeast property.
I'm running into issue binding OData in a table control and I'm hoping one of you experts can spare a millisecond to tell me where I'm screwing up.
I can get the OData info from the backend server - step one is I just want to display it in a table with columns and step two is to present users with a segmented button to enable/disable processing of a countries data. Lets just get the data displayed now.
Here is the OData that is returned from the backed
backend odata
Here is my createContent code - I want to do it in JavaScript:
var oTable = new Table({
height: '100%',
firstVisibleRow: 0,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
selectionMode: sap.ui.table.SelectionMode.None,
selectionBehavior: sap.ui.table.SelectionBehavior.RowOnly
}).addStyleClass('suggCompTableStyle');
var oColName = new sap.ui.table.Column().setLabel('{i18n>txt_countryName}').bindElement("/data>LANDX");
oTable.addColumn(oColName);
var oModel = sap.ui.getCore().getModel();
oModel.callFunction("/getCountryActiveList",
"GET",
{SPRAS: 'E'},
null,
function(oData, oResponse)
{ oTable.setModel( new sap.ui.model.json.JSONModel({data : oData.results}));
oTable.bindRows("/data");
alert("ok"); },
function(oError) {alert("err"); });
/* eslint-enable no-alert */
oTable.placeAt("content");
var oPage = new sap.m.Page({
title: "{i18n>title}",
content: [
oTable
]
});
var app = new sap.m.App("myApp", {
initialPage: "oPage"
});
app.addPage(oPage);
return app;
}/* end createContent function */
My table is created with the correct number of rows but not displaying the column data. I guess I'm confused on how to bind the column data?
Thanks for the assistance.
Steve
The issue is in your binding oTable.bindRows("/data");.
The bindRows method is expecting a row template control of the type sap.ui.table.Row.
You can look into https://sapui5.hana.ondemand.com/#/api/sap.ui.base.ManagedObject/methods/bindAggregation for more information. The bindRows method expects an input parameter equal to the oBindingInfo of the bindAggregation method from the link I above.
I am new to JavaScript and OpenUI5.
I was going through the walkthrough demo on the openUi5 website OpenUI5 walkthrough demo
I came through the below code:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/demo/wt/controller/HelloDialog"
], function(UIComponent, JSONModel, HelloDialog) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
metadata: {
manifest: "json"
},
init: function() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient: {
name: "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
// set dialog
this._helloDialog = new HelloDialog(this.getRootControl());
},
openHelloDialog: function() {
this._helloDialog.open();
}
});
});
I have doubt in the line this._helloDialog = new HelloDialog(this.getRootControl());
If _helloDialog is not defined and we are using strict mode, then why does the system not throw message that _helloDialog is undefined?
_helloDialog is a property of this (the controller), and properties do not need to be initialized when creating an object.
"use strict"
var example = {};
example.newProperty = "i am a new property"; //This is absolutely correct
undefinedVariable = 1; // This is going to throw an error
Strict mode prevents you from implicitly creating global variables (as undefinedVariable = 1; would do). But it is not going to prevent adding a property to an object.
If you are interested on preventing the creation of properties, I suggest reading Freeze vs Seal
I´m using SAPUI5, I have a MasterPage and a DetailPage, in the MasterPage I have a List and when I select de Item in the List the information is displayed in the DetailPage.
In the DetailPage I have a PositiveAction, When I press the PositiveAction I need to get the Data of the DetailPage but I don't know how to do this.
My code of the Item Press
onPoSelect : function(oEvent) {
var oListItem = oEvent.getParameter('listItem');
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("DetailPanel", {
invoicePath: oListItem.getBindingContext("solped").getPath().substr(1)
});
},
My code in the DetailPanel
onInit: function (){
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("DetailPanel").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/" + oEvent.getParameter("arguments").invoicePath,
model: "solped"
});
},
The line "oEvent.getParameter("arguments").invoicePath,"
returns this.
Invoices(CustomerName='Alfreds Futterkiste',Discount=0f,OrderID=10702,ProductID=3,ProductName='Aniseed Syrup',Quantity=6,Salesperson='Margaret Peacock',ShipperName='Speedy Express',UnitPrice=10.0000M)
I have the information but it is a String, How can I convert this String in an Object? Or, how else can I access the information in the view?
The image of the View
enter image description here
I assume you can already see the data of the detail in your Detail view.
You binded the data to the view by bindElement function and to retrieve them back in the code you are looking for "getBindingContext" function.
Create following function in your Detail controller:
// this must be connected to Button -> <Button press="onPositivePress">
onPositivePress: function(oEvent) {
var oBindingContext = this.getView().getBindingContext("solped");
// this is the path you can use to call odata service
var sPath = oBindingContext.getPath();
// this is data you are looking for
var oReqData = oBindingContext.getObject();
}
You can get all the properties as an object by passing the binding path as an argument to the getProperty function of the underlying Data model.
var oModel = this.getView().getModel("solped");
var oProps = oModel.getProperty(oListItem.getBindingContext("solped").getPath());
You can then access these properties as
oProps.CustomerName;
oProps.OrderID;
...
for converting string to object see below example.
var a = "how r u";
var b = [a];
you will get object of a in b.
code:
var text='<div data-sap-ui-type="sap.ui.commons.TextField" id="TF5" data-value="69190"></div>';
var myView = sap.ui.view({id:"myView",viewContent:text, type:sap.ui.core.mvc.ViewType.HTML});
myView.placeAt("content3");
Here how can i give placeholder?
Are you working with JS views?
TextFields have a porperty called placheolder, use the api reference to look up properties for controls: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.commons.TextField.html#constructor
This will work:
var text = new sap.ui.commons.TextField({
placeholder: "my text"
});
Since you are using HTML-Views, this solution should work:
var text = '<div data-sap-ui-type="sap.ui.commons.TextField" id="TF5" data-value="69190" data-placeholder="My Placeholder"></div>';
var myView = sap.ui.view({
id: "myView",
viewContent: text,
type: sap.ui.core.mvc.ViewType.HTML
});
myView.placeAt("content3");
There is no default option for that but check this link:
http://scn.sap.com/community/developer-center/front-end/blog/2013/01/05/adding-placeholder-functionality-for-textfield-in-sapui5