Skip to Content
Technical Articles

Perform CRUD operations on Employee Info in SAP WEB IDE using SAP UI5

Hello Everyone

Here is an basic app to perform CRUD operations on Employee Details in few steps.

I have demonstrated this by using files like: i18n, neo-app.json, manifest.json, controller.js and view.xml.

I have chosen the sample template: SAP UI5 application in sap web ide full stack.

Once the project is created, below are the changes i have made.

neo-app.json:

Manifest.json:

App.view.xml:

<mvc:View controllerName="com.CRUD_Address.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="{i18n>title}">
					<content>
						<Panel id="__panel1">
							<content>
								<List id="List" items="{jsonmodel>/EmployeSet}" headerText="Employees" mode="SingleSelectMaster" selectionChange="onPress">
									<StandardListItem id="Sli" title="{jsonmodel&gt;Name2}" description="{jsonmodel&gt;City}" info="{jsonmodel&gt;Adrnr}"/>
								</List>
							</content>
						</Panel>
						<Panel id="__panel0" headerText="{i18n>addressdetails}">
							<content>
								<Label text="{i18n>addressid}" width="100%" id="__label0"/>
								<Input width="100%" id="__input0"/>
								<Label text="{i18n>c}ity" width="100%" id="__label1"/>
								<Input width="100%" id="__input1"/>
								<Label text="{i18n>name}" width="100%" id="__label2"/>
								<Input width="100%" id="__input2"/>
								<Button text="{i18n>create}" width="100px" id="__button1" press="onSave"/>
								<Button text="{i18n>update}" width="100px" id="__button2" press="onUpdate"/>
								<Button text="{i18n>delete}" width="100px" id="__button0" press="onDelete"/>
							</content>
						</Panel>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/m/MessageToast",
	"sap/ui/model/Filter"
], function (Controller, JSONModel, MessageToast, Filter) {
	"use strict";

	return Controller.extend("com.CRUD_Address.controller.App", {

		onInit: function () {
			var oJSONModel = new JSONModel();
			this.getView().setModel(oJSONModel, "jsonmodel");
			this.getOwnerComponent().getModel().read("/AddressSet", {
				success: function (data) {
					oJSONModel.setData({
						EmployeSet: data.results
					});

				}
			});
		},

		onPress: function (oEvent) {
			this.getselval1 = oEvent.getSource().getSelectedItem().getBindingContext("jsonmodel").getObject().Adrnr;
			this.getView().byId("__input0").setValue(this.getselval1);
			this.getselval2 = oEvent.getSource().getSelectedItem().getBindingContext("jsonmodel").getObject().City;
			this.getView().byId("__input1").setValue(this.getselval2);
			this.getselval = oEvent.getSource().getSelectedItem().getBindingContext("jsonmodel").getObject().Name2;
			this.getView().byId("__input2").setValue(this.getselval);
		},

		onSave: function () {
			var oCust1 = this.getView().byId("__input0").getValue();
			var oCust2 = this.getView().byId("__input1").getValue();
			var oCust3 = this.getView().byId("__input2").getValue();
			var postData = {};
			postData.Adrnr = oCust1;
			postData.Name2 = oCust2;
			postData.City = oCust3;
			this.getOwnerComponent().getModel().create("/AddressSet", postData, null, function (response) {
				MessageToast.show("Address Created Successfully with number  " + oCust1);
				location.reload();
			}, function (Error) {
				MessageToast.show("Customer Creation Failed  " + oCust1);
			});
		},

		onDelete: function () {
			var oCust1 = this.getView().byId("__input0").getValue();
			this.getOwnerComponent().getModel().remove("/AddressSet('" + oCust1 + "')", {
				method: "DELETE",
				success: function (data) {
					MessageToast.show("Customer deleted Successfully with number  " + oCust1);
				},
				error: function (e) {
					MessageToast.show("Customer deletion Failed  " + oCust1);
				}
			});
		},

		onUpdate: function () {
			var oCust1 = this.getView().byId("__input0").getValue();
			var oCust2 = this.getView().byId("__input1").getValue();
			var oCust3 = this.getView().byId("__input2").getValue();
			var postData = {};
			postData.Adrnr = oCust1;
			postData.Name2 = oCust2;
			postData.City = oCust3;
			this.getOwnerComponent().getModel().update("/AddressSet('" + oCust1 + "')", postData, null, function (response) {
				MessageToast.show("Customer update Successfully with number  " + oCust1);
				location.reload();
			}, function (Error) {
				MessageToast.show("Customer update Failed  " + oCust1);
			});

		}

	});
});

i18n:

 

I have written this blog just to show the employee information in any organization. Also for basic understanding of any fresher in SAP UI5.

6 Comments
You must be Logged on to comment or reply to a post.
  • Hi Dhanasupriya.

     

    I applaud you for sharing your journey with the community. I do feel like I have to pitch in and let you know of an easier way to do this.

    If you bind directly to the odata model with two way binding, then all you can do everything in submit changes on the model. You would need to bind the input fields of your panel to the selected item from the list though.

     

    Please have a look at this sample I’ve created for you. It shows how to use the binding context of the view and no need for syncing a local json model and the odata model.

    You can clone this to WebIde and run it with the mock server.

     

     

    Maybe try to use the worklist crud template as this will give you two pages. The list and a detail page where the binding has already happened. Put your save buttons etc on that.

     

    Happy coding 😊