Skip to Content

Unable to pass values from object to local json file

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    Oct 27, 2017 at 10:16 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2017 at 09:08 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2017 at 06:50 AM

    Hi,

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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2017 at 06:32 PM

    not possible to add record to the file.

    Add comment
    10|10000 characters needed characters exceeded