Skip to Content
avatar image
Former Member

I am trying to send data from one view to another but data is not getting displayed

I am trying to send data from one view which has table in it and when clicked on the row it should send data to the next view through its id and the next view must display all the information about that id but data is not getting displayed

view 1

<core:View xmlns:core="sap.ui.core" controllerName="Practice.AppPractice_Project_13Sept.controller.EmpView2" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml"
	displayBlock="true">
	<Page showNavButton="false" title="Employess" navButtonPress="onNavBtnPress">
		<content>
			<Table id="idEmployeesTable"  items="{ path: '/EmployeeSet' }" mode="SingleSelectMaster" selectionChange="onItemPress">
				<headerToolbar>
					<Toolbar>
						<!--<Title text="Employees" level="H2"/>-->
						<Button text="Create" icon="sap-icon://create" type="Emphasized"></Button>
					</Toolbar>
				</headerToolbar>
				<columns>
					<Column width="12em">
						<Text text="ID"/>
					</Column>
					<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
						<Text text="First Name"/>
					</Column>
					<Column hAlign="Center">
						<Text text="Last Name"/>
					</Column>
					<Column>
						<Text text="Email Id"></Text>
					</Column>
					<Column>
						<Text text="Designation"></Text>
					</Column>
				</columns>
				<items>
					<ColumnListItem>
						<cells>
							<ObjectIdentifier title="{EmployeeId}"/>
							<Text text="{FirstName}"/>
							<Text text="{LastName}"></Text>
							<Text text="{EmailId}"></Text>
							<Text text="{Designation}"></Text>
						</cells>
					</ColumnListItem>
				</items>
			</Table>
		</content>
		
	</Page>
</core:View>
view1 controller

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	'jquery.sap.global',
	'sap/m/MessageToast',


	'sap/ui/model/json/JSONModel'


], function(Controller, jQuery, MessageToast, JSONModel) {
	"use strict";


	return Controller.extend("Practice.AppPractice_Project_13Sept.controller.EmpView2", {


		onInit: function() {
			// set explored app's demo model on this sample
			//var oModel = new JSONModel(jQuery.sap.getModulePath("Practice.AppPractice_Project_13Sept.data", "/Customers.json"));
			//this.getView().setModel(oModel);
		},
		onItemPress: function(oEvent) {
			
			var oItem = oEvent.getSource();
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			console.log(oItem);
			var selectedempId =  oItem.getSelectedContextPaths()[0].substr(14,4);
			
			console.log(selectedempId);
			OData.request({


					requestUri: "/ECC/sap/opu/odata/sap/ZSM_SAMPLE_ODATA_SRV/EmployeeSet('" + selectedempId + "')",
					method: "GET",
					user: "",
					password: "",
					headers: {
						"X-Requested-With": "XMLHttpRequest",


						"Content-Type": "application/atom+xml",
						"DataServiceVersion": "2.0",
						"X-CSRF-Token": "Fetch",
						"Access-Control-Allow-Origin": "*",
						"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
						"Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, Accept, X-Request-With",
						"Access-Control-Allow-Credentials": "true",
						'Authorization': 'Basic ' + btoa("username" + ':password')
					}
				},
				function(data,
					response) {


					console.log(data);
					// ac = data;
					// console.log(ac);
					// vp.setData(ac);
					var objModel = new sap.ui.model.odata.ODataModel();
					// var objModel;
					objModel.setData(data);
					// this.getView().setModel(objModel, "detModel");
					// sap.ui.getCore().setModel(objModel,"detModel");
					// this.getView().setModel(objModel,"detModel");
					console.log(objModel);
				 //var	ac = data;
				 	// console.log(ac);
						// vp.setData(ac);
				});
			// var index = selectedProductId.split("/")[2];
			
			oRouter.navTo("Employeedetails", {
				empId: selectedempId
			});
		
			// console.log("employee details inside EmpView2");
			// this.getOwnerComponent().getRouter().navTo("Employeedetails");
		}


	});
});
view2

<mvc:View xmlns:core="sap.ui.core" xmlns="sap.uxap" xmlns:layout="sap.ui.layout" xmlns:m="sap.m" xmlns:mvc="sap.ui.core.mvc"
	controllerName="Practice.AppPractice_Project_13Sept.controller.Update_Emp" xmlns:html="http://www.w3.org/1999/xhtml">
	<ObjectPageLayout height="95%" id="ObjectPageLayout" enableLazyLoading="false" showTitleInHeaderContent="false" showEditHeaderButton="true"
		editHeaderButtonPress="handleEditBtnPress" showFooter="true">
		<headerTitle>
			<ObjectPageHeader objectTitle="Employee Details">
				<m:Button icon="sap-icon://nav-back" text="Back" press="onBack"></m:Button>
			</ObjectPageHeader>
		</headerTitle>
		<sections>
			<ObjectPageSection id="basicDetailSection" title="Basic" >
				<subSections>
					<ObjectPageSubSection id="goalsSectionSS1" title=" ">
						<blocks>
							<m:Label text="Employee ID"/>
							<m:Input id="empId" value="{EmployeeId}" editable="false"/>
							<m:Label text="First Name"/>
							<m:Input id="fName" value="{detModel2>FirstName}" editable="true"/>
							<m:Label text="Middle Name"/>
							<m:Input id="mName" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Last Name"/>
							<m:Input id="lName" value="{/detModel2>LastName}" editable="true"/>
							<m:Label text="Email ID"/>
							<m:Input id="emailId" value="{/detModel>EmailId}" editable="true"/>
							<m:Label text="Date of Birth"/>
							<m:Input id="dobId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Date of Joining"/>
							<m:Input id="dojId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Gender"/>
							<m:Select width="40%" id="idSelGenId" enabled="false" items="{genderModel>/gender}">
								<m:items>
									<core:Item key="{genderModel>key}" text="{genderModel>text}"/>
								</m:items>
							</m:Select>
							<m:Label text="Designation"/>
							<m:Input id="desigId" value="{detModel>Designation}" editable="true"/>
						</blocks>
					</ObjectPageSubSection>
				</subSections>
			</ObjectPageSection>
			<ObjectPageSection id="addressSection" title="Address" importance="Medium">
				<subSections>
					<ObjectPageSubSection id="personalSectionSS1" title=" ">
						<blocks>
							<m:Label text="Address Type"/>
							<m:Input id="atypesId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Building Number"/>
							<m:Input id="bnoId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Building Name"/>
							<m:Input id="bnameId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Street Name"/>
							<m:Input id="snameId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Locality"/>
							<m:Input id="localId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Land Mark"/>
							<m:Input id="lmarkId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Pincode"/>
							<m:Input id="pcodeId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="City"/>
							<m:Input id="cityId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="State"/>
							<m:Input id="stateId" value="{oModelBookdata>series_t}" editable="true"/>
						</blocks>
					</ObjectPageSubSection>
				</subSections>
			</ObjectPageSection>
			<ObjectPageSection id="expDetSection" title="Experience">
				<subSections>
					<ObjectPageSubSection id="employmentSectionSS1" title=" ">
						<blocks>
							<m:Label text="Organization Name"/>
							<m:Input id="oNameId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Years of Experience"/>
							<m:Input id="yOEid" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Technology"/>
							<m:Input id="techId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Skills "/>
							<m:Input id="skillId" value="{oModelBookdata>series_t}" editable="true"/>
							<m:Label text="Description"/>
							<m:Input id="descId" value="{oModelBookdata>series_t}" editable="true"/>
						</blocks>
					</ObjectPageSubSection>
				</subSections>
			</ObjectPageSection>
		</sections>
		<footer>
			<m:OverflowToolbar>
				<m:ToolbarSpacer/>
				<m:Button type="Accept" text="Edit" press="onUpdate"/>
			</m:OverflowToolbar>
		</footer>
	</ObjectPageLayout>
</mvc:View>

controller of view 2

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History"
], function(Controller, History) {
	"use strict";
	var ac = {}; // global variable
	var vp = {};


	return Controller.extend("Practice.AppPractice_Project_13Sept.controller.Update_Emp", {


		/**
		 * Called when a controller is instantiated and its View controls (if available) are already created.
		 * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
		 * @memberOf QuenynWebAppQuenynWebApp.view.Detail
		 */
		onInit: function() {
			var oModel2 = new sap.ui.model.json.JSONModel("model/Gender.json");
			this.getView().setModel(oModel2, "genderModel");
			var model3 = sap.ui.getCore().getModel("detModel");   
			this.getView().setModel(model3, "detModel2");
			// this.getOwnerComponent().getRouter().getRoute("Employeedetails").attachPatternMatched(this._onRouteMatched, this);
			
		},
		_onRouteMatched: function(oEvent) {
			// var oArgs, oView;
			var oArgs = oEvent.getParameter("arguments").empId;
			// oView = this.getView();
			var xyz = this.getView().getModel();
			var vp = this;
			// oView.bindElement({
			// 	path: "/" + oArgs
			// 	// model: "oModelBookdata"
			// });
			// oView.updateBindings();
			console.log(oArgs);
			console.log(xyz);


			OData.request({


					requestUri: "/ECC/sap/opu/odata/sap/ZSM_SAMPLE_ODATA_SRV/EmployeeSet('" + oArgs + "')",
					method: "GET",
					user: "",
					password: "",
					headers: {
						"X-Requested-With": "XMLHttpRequest",


						"Content-Type": "application/atom+xml",
						"DataServiceVersion": "2.0",
						"X-CSRF-Token": "Fetch",
						"Access-Control-Allow-Origin": "*",
						"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
						"Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, Accept, X-Request-With",
						"Access-Control-Allow-Credentials": "true",
						'Authorization': 'Basic ' + btoa("username" + ':password')
					}
				},
				function(data,
					response) {


					console.log(data);
					ac = data;
					console.log(ac);
						vp.setData(ac);
				});


		},
	// 	setData : function(mssg) {
	// 	console.log(mssg);	
	// 	var oModel = new sap.ui.model.json.JSONModel();
	// /*	var dc = oModel.setData(mssg); */ 
	// 		oModel.setData(mssg);
	// this.getView().setModel(oModel, "detModel");
	// 	},
		onBack: function() {
			var oHistory = History.getInstance();
			var sPreviousHash = oHistory.getPreviousHash();


			if (sPreviousHash !== undefined) {
				window.history.go(-1);
			} else {
				var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
				oRouter.navTo("View1", true);
			}
		}


		/**
		 * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
		 * (NOT before the first rendering! onInit() is used for that one!).
		 * @memberOf QuenynWebAppQuenynWebApp.view.Detail
		 */
		//	onBeforeRendering: function() {
		//
		//	},


		/**
		 * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
		 * This hook is the same one that SAPUI5 controls get after being rendered.
		 * @memberOf QuenynWebAppQuenynWebApp.view.Detail
		 */
		//	onAfterRendering: function() {
		//
		//	},


		/**
		 * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
		 * @memberOf QuenynWebAppQuenynWebApp.view.Detail
		 */
		//	onExit: function() {
		//
		//	}


	});


});
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Dec 11, 2017 at 07:45 AM

    Hi,

    Do it as following

    // create json model in success function of odata call
    var oModel = new sap.ui.model.json.JSONModel(data); this.getView().setModel(oModel,"mdlName");

    // In View <Input value="{mdlName>/FirstName}" />
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Dec 18, 2017 at 10:54 AM

    Try adding below line in the bootstrap and check again

    data-sap-ui-xx-bindingSyntax="complex"
    Add comment
    10|10000 characters needed characters exceeded

  • Dec 18, 2017 at 09:42 AM

    Hi Yadnesh Kombe,

    Are you getting any error, if so please share screenshots.

    Regards,

    Arjun Biswas

    Add comment
    10|10000 characters needed characters exceeded