Skip to Content
0

Unable to pass values from object to local json file

Oct 26, 2017 at 04:43 AM

63

avatar image

Hi,

I have created a table and displayed data in it from a local json file. On adding a new entry I need to update the json file as well as the table. I am unable to update the table on adding.

I have provided the code below.

Controller code:

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";


	return Controller.extend("craete_operations.controller.View", {
		onInit: function() {
			var oModel = new sap.ui.model.json.JSONModel("model/Details.json");
			this.getView().setModel(oModel);
		},
		
		onAdd: function(oEvent) {
			if (!this._oDialog) {
				this._oDialog = sap.ui.xmlfragment("craete_operations.view.View", this);
				this.getView().addDependent(this._oDialog);
			}


			// toggle compact style
			jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
			this._oDialog.open();
		},
		
		onAddDetails: function() {
			var ID = sap.ui.getCore().byId("ID").getValue();
			var Name = sap.ui.getCore().byId("Name").getValue();
			var Mob = sap.ui.getCore().byId("Mobile").getValue();
			var Dep = sap.ui.getCore().byId("Department").getValue();


			var object = {
				EmpID: ID,
				EmpName: Name,
				Mobile: Mob,
				Dept: Dep
			};


			var oModel = new sap.ui.model.json.JSONModel("model/Details.json");
			oModel.setData({
				EmpDetails: object
			});
			sap.ui.getCore().setModel(oModel);
			
			sap.ui.getCore().byId("ID").setValue();
			sap.ui.getCore().byId("Name").setValue();
			sap.ui.getCore().byId("Mobile").setValue();
			sap.ui.getCore().byId("Department").setValue();
			this._oDialog.close();
		},
		
		onClose: function(oEvent) {
			this._oDialog.close();
		}
	});
});

View code:

<mvc:View controllerName="craete_operations.controller.View" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<Table id="Table" items="{path:'/EmpDetails'}">
						<headerToolbar>
							<Toolbar>
								<Title text="Employee Details" level="H2"/>
							</Toolbar>
						</headerToolbar>
						<columns>
							<Column width="12em">
								<Text text="Emp ID"/>
							</Column>
							<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Left">
								<Text text="Emp Name"/>
							</Column>
							<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Left">
								<Text text="Mobile No"/>
							</Column>
							<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Left">
								<Text text="Department"/>
							</Column>
						</columns>
						<items>
							<ColumnListItem>
								<cells>
									<Text text="{EmpID}"/>
									<Text text="{EmpName}"/>
									<Text text="{Mobile}"/>
									<Text text="{Dept}"/>
								</cells>
							</ColumnListItem>
						</items>
					</Table>
					<Button text="Add" press="onAdd" class="sapUiSmallMarginBottom"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

Fragment for dialog:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" controllerName="craete_operations.controller.View">
	<Dialog title="Add Details" class="sapUiContentPadding">
		<content>
					<InputListItem label="Employee Id" id="item0">
						<content>
							<Input ariaLabelledBy="item0-label" width="100%" id="ID"/>
						</content>
					</InputListItem>
					<InputListItem label="Employee Name" id="item1">
						<content>
							<Input ariaLabelledBy="item1-label" width="100%" id="Name"/>
						</content>
					</InputListItem>
					<InputListItem label="MobileNo" id="item2">
						<content>
							<Input ariaLabelledBy="item2-label" width="100%" id="Mobile"/>
						</content>
					</InputListItem>
					<InputListItem label="Department" id="item3">
						<content>
							<Input ariaLabelledBy="item3-label" width="100%" id="Department"/>
						</content>
					</InputListItem>
					<Button text="Add" press="onAddDetails"/>
		</content>
		<beginButton>
			<Button text="Cancel" press="onClose"/>
		</beginButton>
	</Dialog>
</core:FragmentDefinition>

Details.json(local file)

{
	"EmpDetails": [{
		"EmpID": "4",
		"EmpName": "John",
		"Mobile": "937642343",
		"Dept": "Java"
	}, {
		"EmpID": "5",
		"EmpName": "Xavier",
		"Mobile": "7213213234",
		"Dept": "SAP"
	}]
}

Please help me to update the table.

Thanks in advance,

Janani

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Best Answer
Mantri Shekar Oct 27, 2017 at 10:16 AM
0

Hi Janani,

as per your post I understood that when you are performing CURD Operations you need Add/Delete/Update Records in your Table as well as JSON File.

Here coming to Update JSON File from CURD Operations Might not be Possible as Junwu.

Now for coming to Update Data in Table after Performing CURD Operation can be done,but the life time of the added record is just in that session only.

Here this can be done by below procedure.

For Add

First get the already binded Model and respective data and store it in an array.Then after add the Object to that array and bind it to the table.Similarly for Update and Delete.

Regards,

Shekar.

Share
10 |10000 characters needed characters left characters exceeded
Sharath M G Oct 26, 2017 at 09:08 AM
0

oModel.setData({EmpDetails:object}, true);

This should update the local json file with new object in the add method.

if you have bound the table to json correctly, then it should display the update row in the table. Else, trigger a refresh on the table.

Regards,

Sharath

Share
10 |10000 characters needed characters left characters exceeded
Irfan Gokak Oct 26, 2017 at 06:50 AM
0

Hi,

you want to add new row into the table not in json file right?

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Irfan,

I want to add data in the table as well as json file. Is that possible?

0

Hi,

You can add data to table but adding same data to file you need to check for file operation in javascript. I'm not sure about it. Check this link hope this will help.

Read and Write Files In Javascript

0
Jun Wu Oct 26, 2017 at 06:32 PM
0

not possible to add record to the file.

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Jun,

Even I am unable to get the newly added values in the table. What's wrong in my code?

Thanks,

Janani

0
sap.ui.getCore().setModel(oModel); you have to set the model to the view.
0