Hi SAPUI5 Guru's,
Could please help me to update my json data in the below scenario. Please find below my coding snippet.
When I click on save button data should change my json file and on my screen. is it possible? Please suggest me with your valuable comments.
Thanks in Advance.
View:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="table1.myView" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Table Example">
<Table id="idTable" BackgroundDesign="Solid" mode="SingleSelectLeft" items="{/details1}">
<columns>
<Column>
<header>
<Label text="First Name"/>
</header>
</Column>
<Column>
<Label text="Last Name"/>
</Column>
<Column>
<Label text="City"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{firstname}"/>
<Text text="{lastname}"/>
<Text text= "{city}"/>
</cells>
</ColumnListItem>
</items>
</Table>
<Button text="GetData" press="onGetdata"/>
<Button text="Update" press="onUpdate"/>
<Button text="Delete" press="onDelete"/>
</Page>
</core:View>
Controller:
sap.ui.controller("table1.myView", {
onInit: function() {
var oModel1 = new sap.ui.model.json.JSONModel("model/details.json");
this.getView().setModel(oModel1);
},
onGetdata : function()
{
var otable = this.getView().byId("idTable").getSelectedItem();
var ovalue = otable.getBindingContext();
this.dialog=this.getDiolog();
this.dialog.open();
sap.ui.getCore().byId("idFragment--idFirstname").setValue(ovalue.getProperty("firstname"));
sap.ui.getCore().byId("idFragment--idLastname").setValue(ovalue.getProperty("lastname"));
sap.ui.getCore().byId("idFragment--idCity").setValue(ovalue.getProperty("city"));
sap.ui.getCore().byId("idFragment--idFirstname").setEditable(false);
sap.ui.getCore().byId("idFragment--idLastname").setEditable(false);
sap.ui.getCore().byId("idFragment--idCity").setEditable(false);
},
onUpdate : function(){
var otable = this.getView().byId("idTable").getSelectedItem();
var ovalue = otable.getBindingContext();
this.dialog=this.getDiolog();
this.dialog.open();
sap.ui.getCore().byId("idFragment--idFirstname").setValue(ovalue.getProperty("firstname"));
sap.ui.getCore().byId("idFragment--idLastname").setValue(ovalue.getProperty("lastname"));
sap.ui.getCore().byId("idFragment--idCity").setValue(ovalue.getProperty("city"));
sap.ui.getCore().byId("idFragment--idFirstname").setEditable(true);
sap.ui.getCore().byId("idFragment--idLastname").setEditable(true);
sap.ui.getCore().byId("idFragment--idCity").setEditable(true);
},
getDiolog: function(){
if(!this.dialog){
this.dialog=sap.ui.xmlfragment("idFragment","fragment.getDetails",this);
}
return this.dialog;
},
closeDialog : function(){
this.dialog.close();
},
saveDialog : function(){
/*this.dialog.close();
var otable = this.getView().byId("idTable");
setSelectedItem(otable);
alert(otable);
var ovalue =setBindingContext(otable);
alert(ovalue.setProperty("firstname","abcd"));*/
}
});
Fragment file:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout"
>
<Dialog title="Detailed information of Employee">
<l:VerticalLayout>
<Label text="Firstname"/>
<Input id="idFirstname"/>
<Label text="LastName"/>
<Input id="idLastname"/>
<Label text="City"/>
<Input id="idCity"/>
<Button text="close" width="80%" press="closeDialog"/>
<Button text="save" width="80%" press="saveDialog"/>
</l:VerticalLayout>
</Dialog>
</core:FragmentDefinition>
JSON file :
{
"details1" : [
{
"firstname": "Raju",
"lastname": "Thammineni",
"city": "Hyderabad1"
},
{
"firstname": "Sai",
"lastname": "Gowtham",
"city": "Hyderabad2"
},
{
"firstname": "Shiva",
"lastname": "mandla",
"city": "Hyderabad3"
},
{
"firstname": "Ramesh",
"lastname": "Madineni",
"city": "Hyderabad4"
},
{
"firstname": "Ravi",
"lastname": "Mullamuri",
"city": "Hyderabad5"
},
{
"firstname": "Vinod",
"lastname": "Gurram",
"city": "Hyderabad6"
}
]
}