Moving data from one controller or view to another

[csimpson]

I am new to SAPUI5 and I am having trouble moving data from a table to another view or controller. I am trying to take data from the main view and on press open it in the edit view. Thank you for the help in advance.

sap.ui.jsview("ECSB1.CommClassTable.view.main", {


	/** Specifies the Controller belonging to this View. 
	 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	 * @memberOf controller.main
	 */
	getControllerName: function () {
		return "ECSB1.CommClassTable.controller.main";
	},


	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	 * Since the Controller is given to this method, its event handlers can be attached right away.
	 * @memberOf controller.main
	 */
	createContent: function (oController) {
		//Buttons
		var btnAdd = new sap.m.Button({
						text: "Add",
						width: "150px",
						press: [oController.onPressGoToAddNew, oController]
		});
		
		var btnEdit = new sap.m.Button({
						text: "Edit",
						width: "150px",
						press: [oController.onPressGoToEdit, oController]
		});
		
		var btnDelete = new sap.m.Button({
						text: "Delete",
						width: "150px",
						press: [oController.onPressGoToDelete, oController]
		});
		
		//CommClassTable
		 this.commClassTable = new sap.m.Table("commClass",{
			headerText : "{CommClass}",
			noDataText: "Loading",
			growing : false
		});
		
		//button Column 
		var commClassTableButton = new sap.m.Column("commClassButton", {header: new sap.m.Label({text: "Select"})}); 
		this.commClassTable.addColumn(commClassTableButton);
		
		//Code Column
		var commClassCodeCol =  new sap.m.Column("commClassCode",{header: new sap.m.Label({text:"Code"})});
		this.commClassTable.addColumn(commClassCodeCol);
		
		//NameColumn 
		var commClassNameCol = new sap.m.Column("commClassName",{header: new sap.m.Label({text:"Name"})});
		this.commClassTable.addColumn(commClassNameCol);
		
		//Freight column   
		var commClassFreightCol = new sap.m.Column("commClassFreight",{header: new sap.m.Label({text:"Freight Factor"})});
		this.commClassTable.addColumn(commClassFreightCol);
		
		this.commClassTableTxt =  new sap.m.ColumnListItem("commClassTableTxt",
			{
				type: "Navigation",
				press:[oController.onPressGoToEdit, oController]
			});//,{type: "Active"});
		
		this.commClassButton = new sap.m.RadioButton({
			
			select: [oController.onSelect, oController]
		});
		this.commClassTableTxt.addCell(this.commClassButton);
		
		this.commClassTxtCode = new sap.m.Text("commClassTxtCode", {text:"{Code}"});
		this.commClassTableTxt.addCell(this.commClassTxtCode);
		var commClassTxtName = new sap.m.Text("commClassTxtName", {text:"{Name}"});
		this.commClassTableTxt.addCell(commClassTxtName);
		var commClassTxtFreight = new sap.m.Text("commClassTxtFreight", {text:"{U_FreightFactor}"});
		this.commClassTableTxt.addCell(commClassTxtFreight);
		
		//Display
		var mainPage = new sap.m.Page({
			title: "Comm Class",
			content:[
				
				btnAdd,
				//new sap.m.ToolbarSpacer(),
				btnEdit,
				//new sap.m.ToolbarSpacer(),
				btnDelete,
				//new sap.m.ToolbarSpacer()
				this.commClassTable
				]
		});
		
		
		return mainPage;
	}


});

/*global app:true*/
sap.ui.define([
	"sap/ui/core/mvc/Controller"
	
], function (Controller) {
	"use strict";


	return Controller.extend("ECSB1.CommClassTable.controller.main", {
		onInit: function(){
			
			sap.ui.localResources("i18n");
			var oResourceModel = new sap.ui.model.resource.ResourceModel({
				bundleName: "i18n.i18n"
			});
			sap.ui.getCore().setModel(oResourceModel, "i18n");
			
			var user = "manager";
			var pass = "secofr";
			var comp = "ZZZTESTING05";
			
			var jData = JSON.stringify({
				UserName: user,
				Password: pass,
				CompanyDB: comp
			});
			var loginURL = "/destinations/Goetze/Login";
			$.ajax({
				url: loginURL,
				data: jData,
				type: "POST",
				dataType: "json"
			});
			var tableURL = "/destinations/Goetze/ECSB1_COMMCLASS";
			
			this.onCompleteCall = function (result){
				this.commClass = sap.ui.getCore().byId("commClass");
				this.commClassTableText = sap.ui.getCore().byId("commClassTableTxt");
				this.oModel = new sap.ui.model.json.JSONModel();
				
				this.oModel.setData(result);
				this.commClass.setModel(this.oModel);
				this.commClass.bindItems("/value", this.commClassTableText);
				
			};
			
			$.ajax({
				url: tableURL,
				xhrFields: {withCredentials:true},
				type:"GET",
				dataType:"json",
				success: this.onCompleteCall
				//error: this.onErrorCall
			});
		},
		
		onPressGoToAddNew: function(){
			app.to("add");
			
		},
		onPressGoToEdit: function(oEvent){
			
			this.name = oEvent.getSource().getBindingContext().getProperty("Name");//.addTo("/edit");
			this.code = oEvent.getSource().getBindingContext().getProperty("Code");
			var test = new sap.ui.getRouter().navTo("edit", {Code: this.code});
			this.onPressGoToEdit(oEvent.getSource(test));
			console.log(this.code);
			
			app.to("edit",{
				//"Code": this.code,
				//"Name": this.name
			});
			
		},
		
		onSelect: function(oEvent){
			if (oEvent.getParameter("selected")) {
				var name = oEvent.getSource().getBindingContext().getProperty("Name");
				console.log(name);
				
				this.code = oEvent.getSource().getBindingContext().getProperty("Code");
				console.log(this.code);
				
			}
			//app.to("edit")
		}
		/*onPress1: function(oEvent){
			this.commClassTable.app.to("edit");
		}*/


	});
});

sap.ui.jsview("ECSB1.CommClassTable.view.edit", {


	/** Specifies the Controller belonging to this View. 
	 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	 * @memberOf ECSB1.CommClassTable.view.edit
	 */
	getControllerName: function () {
		return "ECSB1.CommClassTable.controller.edit";
	},


	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	 * Since the Controller is given to this method, its event handlers can be attached right away. 
	 * @memberOf ECSB1.CommClassTable.view.edit
	 */
	createContent: function (oController,oEvent) {
		var data = this.code;
		
		var text =  new sap.m.Text({
			text: data
		});
		
		//Page
		var edit = new sap.m.Page({
			title: "Edit",
			content: [
				text
			]
		});
		
		return edit;
	}


});

/*global app:true*/
sap.ui.define([
	"sap/ui/core/mvc/Controller"
	//"CommClassTable/controller/main/controller"
], function (Controller) {
	"use strict";
	
	return Controller.extend("ECSB1.CommClassTable.controller.edit", {
		
		/**
		 * 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 ECSB1.CommClassTable.view.edit
		 */
		onInit: function () {
			var user = "manager";
			var pass = "secofr";
			var comp = "ZZZTESTING05";
			
			var jData = JSON.stringify({
				UserName: user,
				Password: pass,
				CompanyDB: comp
			});
			var loginURL = "/destinations/Goetze/Login";
			$.ajax({
				url: loginURL,
				data: jData,
				type: "POST",
				dataType: "json"
			});
			
				
		},
		 
		onPressSave: function(){
			
			
			
		},
		
		onPressBack: function(){
			
			app.to("mainPage");
		},
		
		/**
		 * 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 ECSB1.CommClassTable.view.edit
		 */
		//	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 ECSB1.CommClassTable.view.edit
		 */
			onAfterRendering: function(oEvent){
				//var oData = sap.ui.getCore().getModel();
				//this.code = oData;
				console.log(this.code);
			}


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


	});


});

[former_member596346]

Hi Charles,

Do you want all data to be visible in all views and controllers then go with setmodel for core like-

var oModel = new JSONModel(); // json mode
oModel.setData(<json string>);  // file or json data
sap.ui.getCore().setModel(oModel); for core level

But if you want to send some data from one view to another then use Routing with Parameters and refer this link

Routing with Parameters

[UxKjaer]

Best practice is to use XML views instead of JS views for your UI5 apps. Depending on the amount of data being transferred you can either do it by the routing. The worklist template from Webide shows this.

If both controllers are in the same app. Just declare a JSONmodel in the manifest and set the data there. Then it's ealisy fetched on the other controller by this.getOwnerComponent().getModel("<ModelName>").getData()

[former_member554588]

There are various ways to share data.

The simplest is to set a model to the Component, or even to the Core.

const component = sap.ui.getCore().getComponent(componentId);
component.setModel(jsonModel, "sharedData");

You get it with

component.getModel("sharedData");

For example, the i18n ResourceModel is usually made available Component-wide.

To avoid possible conflicts, it is recommended to limit the scope of models as much as possible .

If you consider to use routes to be able to jump directly to some bookmarked view, be aware that every view/controller has to take care of fetching all required data and setting the related models for the involved views.

For the business-data, I actually prefer to separate them from UI5 through dedicated data objects (collections and entities). Maybe you find useful example code here: UI5 Guide example code.

[csimpson]

Thank you I will give this a shot.

[jorge_cabanas]

Hi Charles,

What you need it's fully explained in this blog.
There you will find the way to share data between apps / view / controllers...
The way you implement, it's up to you 🙂

Kind regards,
Jorge.

[csimpson]

Thank you I will have a look at that.