SAPUI5 Smart Table inside a dialog - sapui5

I've a sapui5 application which has several controls in my page.
Such as Tables , Calendar etc.
And I've create a singe model for my page in the onInit event as follows
var viewModel = new JSONModel();
//Prepare Initial Model
viewModel.setData({
LineDetails: [],
Calendar: {},
PageMode: "add",
DateStart: new Date(),
DateEnd: new Date(),
IsHistoryAvailable: false
});
this.getView().setModel(viewModel);
What I need to do is, I've to include a Smart Table inside a dialog in this page.
The dialog will open once I click a button in the page.
How can I bind data to the smart table inside the dialog?
I only have experience of binding the model to a smart table which either declaring default model in the manifest or in the page.
But here I've already added a model to the page in the onInit event.
So how can I bind data?
Is there a way to bind smart table to a Property which included in the above declared model.
Propert name : SmartTableModel
eg :
viewModel.setData({
SmartTableModel:[]
LineDetails: [],
Calendar: {},
PageMode: "add",
DateStart: new Date(),
DateEnd: new Date(),
IsHistoryAvailable: false
});

Per default, the data you want to bind must come from an ODataModel which is the default model! In other words: you can't simply bind data from some JSONModel, and you can't bind data to a SmartTable which comes from a named model (even if it's and ODataModel).
SmartTable only works with data from an ODataModel, thus you can't work with JSonModels
Currently, SmartTable only works with dafault models (""), i.e. named model won't work
I'm afraid to tell you that what you want does not work as of today. You could use the MockerServer + annotations in your real app code (not onbly for testing) as a workaround, but I think I would avoid that. There are some other tricks as well, you could start reading here: SAP UI5 :named json model with smart table

Related

sap.ui.layout.form.SimpleForm not updating data after updating Model

I have a form in sapui5, with empty entries and binded it with a model.
then a have a button "add data", when i press it I am setting some data to the model, which should papulate the form.
But it is not updating the form entries.
//I have console the form model after setting data - which has the new data too.
here is my code - link
please suggest
I suppose that (for some reason I do not know) the binding context is set wrong. So the controls try to get their values from a wrong path on the model. You can counter that by binding your controls to an absolute path by adding a / at the beginnin of the binding path:
new sap.m.Input({value:"{/ID}",width:"40%",editable : false}),
new sap.m.Input({value:"{/name}",width:"40%",editable : true}),
new sap.m.CheckBox({selected:"{/active}"}),

How to call get_entity method

I'm just starting with SAP FIORI app developing.
I created simple oData model for SAP user details, I implemented two methods:
get_entityset - receives list of users with personal number and full name
get_entity - receives more details of single user (by username).
When I call the service from browser all works fine. How do I call my get_entity method when loading detail page of Master-Detail FIORI app. I used Master-Detail template from WebIDE, but only get_entitset is called and detail screen uses only set data.
How should I define the data binding (in Detail controller I guess)?
Let's assume your Entity is called User and your EntitySet is called Users. We also assume your Entity has one key field of type Edm.String called UserId and another field called FullName of type Edm.String.
var sPath = "/the/path/to/my/service";
var oModel = new sap.ui.model.odata.ODataModel(sPath);
sap.ui.getCore().setModel(oModel);
var oText = new sap.ui.commons.TextView({
text: "{FullName}"
});
oText.bindElement("/Users('MyUserId')");
oText.placeAt("content");
Since you are binding to "/Products('MyProductId')" your "get_entity" is called. Binding to "/Products" would call "get_entityset". However, a binding to "/Products" is used for tables or lists and usually not for a simple TextView (like the above example). There are many tutorials on the web and you will see that this is not as complicated as you might guess.

SAPUI5 - navigation - Binding not working

Demo - http://jsbin.com/bukanagobu/1/edit
The problem is when i click on one of the item, it navigates to the next view but it is not displaying the firstname and lastname.
I have saved the model as 'data'.
Can anyone help me in finding the error ?
You have made two mistakes in your code:
When getting the binding context upon clicking an entry in the list, you must specify the named model name 'data':
var oBindingContext = evt.getSource().getBindingContext("data");
// if using named models, specify which model you want to use
Also, when setting the binding context to the detail view, you must also set the model name to 'data':
page2.setBindingContext(oBindingContext, "data");
// also, name the context model to 'data'
See the updated JSBin here : http://jsbin.com/fehoqu/1/edit?html,output

SAPUI5 - Remove oData Model bound to view

I am new to SAPUI5 and I am very much in need of your help.
I have created an XML view and bound an OData model to it like below. Now all the controls in the view got bound and I am able to see the data.
this.getView().setModel(oModel);
Now I have a requirement in which I have to completely remove this binding from the view. I destroyed the oModel and removed all its bindings. And now when I refresh the view, the data still exists in the screen. I want all the data from the view to disappear.
oModel.destroy();
oModel.refresh();
this.getView().getModel().refresh(true);
I assume that you're using an sap.ui.model.odata.ODataModel to retrieve odata, then done binding using, for example, a JSON model, like so,
var oJson = new sap.ui.model.json.JSONModel({data : oData);
/* Here 'data' is any name that you provide to identify your data model,
'oData' is the data that is received as response from the sap.ui.model.odata.ODataModel */
And set this model to the view like you have mentioned,
this.getView().setModel();
Now, to remove this data from the view you can try the following,
oJson.setData({data : null}, true);
This would set the previously set oData to null and therefore all data binding from the controls in the view would be removed(changed to null).
I believe oJson.refresh() is optional, but you can try adding that as well if the change is not reflected.
Its an approach until may be you find something better :) Here is the documentation for the APIs that I've used.
If you are using
var dataModel = new sap.ui.model.json.JSONModel();
dataModel.setData(oDataResponse); //Data returned from oData.Read()
this.getView().setModel(dataModel, "dataModel");
Retrieve the model, Set the model to null, Update the binding
var dataModel = this.getView().getModel("dataModel");
if(dataModel){
dataModel.setData(null);
dataModel.updateBindings(true);
}

SAPUI5: how to make select field read-only

I made a combobox using sap.m library:
var oSelection = new sap.m.ComboBox({
name: <name>,
id: <id>,
items: {
<items here>
})
},
});
Now, how do I make this field kind of read only, so when I tap it on mobile, it wouldn't bring up the mobile's keyboard, but it would bring up the selection options?
I've tried to use editable: false, but it disables the selection together with keyboard.
Thank you.
From what I could find out there's no method that allows such behaviour.
One option, that I personally would not advice, is to access the HTML DOM and disable the input field that composes the sap.m.Combobox component.
Keep in mind that if the development SAPUI5 changes the inner workings of the Combobox component your code could be broken if you update the SAPUI5 libraries.
This being said, to use this option you could do something like:
oSelection.onAfterRendering = function() {
if (sap.m.ComboBox.prototype.onAfterRendering) {
sap.m.ComboBox.prototype.onAfterRendering.apply(this);
}
document.getElementById("<id>-inner").disabled=true;
}
replace the < id>-inner by the correct id given to your component.
This was tested using version 1.22.8 of SAPUI5 development toolkit.
Use sap.m.Select instead of sap.m.ComboBox.
Select does not provide the ability to edit the field content.
In many instances the Select control can directly replace a ComboBox without any other changes to the properties or the items aggregation!