- SAP Managed Tags:
Hello Everyone
Here is an simple SAPUI5 example of performing CRUD operations on employee details. Helps you to have basic understanding on the SAP UI5 app flow, structure of app and navigation of the project.
This can be used to create, fetch, update or delete the employee profile in your respective organizations.
Here are the end to end steps defined to structure the final app.
Login to your SCP account and add your destinations based on your service.
Now go to services and open SAP WEB IDE full stack. Once opened, click on Go to service. You will be landed to workspace of web ide.
Create a new project under work space.
Choose SAP UI5 application and then click next.
Provide the mandatory data.
Name the view and click finish.
After creating the project, the structure is like this.
Application flow is as explained below.
index.html --> component.js --> manifest.json --> root view(in my case i have defined it as App) <-->App.controller.js
Once the project got created, open the neo-app.json file and add the new destination object here.
This file acts as a bridge between the destinations created and our UI5 app.
Now open manifest.json file and add your service here. Also call the named model as highlighted.
From the manifest.json file, the navigation is to the root view App.view.xml, i have written the following code.
For the actions to be performed on screen, here is the controller part.;
Finally application looks this way.
Please comment if you have any queries. Also request you to let me know if any changes required.
I have written this blog just to show the employee information in any organization. Also for basic understanding of any fresher in SAP UI5.
Here is an simple SAPUI5 example of performing CRUD operations on employee details. Helps you to have basic understanding on the SAP UI5 app flow, structure of app and navigation of the project.
This can be used to create, fetch, update or delete the employee profile in your respective organizations.
Here are the end to end steps defined to structure the final app.
Login to your SCP account and add your destinations based on your service.
Now go to services and open SAP WEB IDE full stack. Once opened, click on Go to service. You will be landed to workspace of web ide.
Create a new project under work space.
Choose SAP UI5 application and then click next.
Provide the mandatory data.
Name the view and click finish.
After creating the project, the structure is like this.
Application flow is as explained below.
index.html --> component.js --> manifest.json --> root view(in my case i have defined it as App) <-->App.controller.js
Once the project got created, open the neo-app.json file and add the new destination object here.
This file acts as a bridge between the destinations created and our UI5 app.
Now open manifest.json file and add your service here. Also call the named model as highlighted.
From the manifest.json file, the navigation is to the root view App.view.xml, i have written the following code.
<mvc:View controllerName="com.detailsExample_Emp_Details.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" xmlns:semantic="sap.m.semantic" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
xmlns:core="sap.ui.core">
<App>
<pages>
<Page title="{i18n>EmpDetails}">
<customHeader>
<Bar>
<contentLeft></contentLeft>
<contentMiddle>
<Label text="{i18n>EmpDetails}" class="pageheadertextClass"/>
</contentMiddle>
<contentRight></contentRight>
</Bar>
</customHeader>
<content>
<SegmentedButton select="handleSegmentedButton" id="segmentedButtonId" visible="true" selectedButton="" width="100%">
<buttons>
<Button text="{i18n>Create}"/>
<Button text="{i18n>Update}"/>
<Button text="{i18n>Delete}"/>
</buttons>
</SegmentedButton>
<f:SimpleForm id="createEmpDetails" visible="false" editable="true" layout="ResponsiveGridLayout" adjustLabelSpan="false" emptySpanL="6"
columnsL="1">
<f:content>
<Label text="{i18n>EmpID}" required="true" design="Bold"/>
<Input id="empIDC" liveChange="onLiveChangeCreateID" maxLength="3"/>
<Label text="{i18n>EmpName}" required="true" design="Bold"/>
<Input id="empNameC" liveChange="onLiveChangeCreateName" maxLength="15"/>
<Label text="{i18n>EmpNo}" required="true" design="Bold"/>
<Input maxLength="10" id="empNumC" liveChange="onLiveChangeCreateNum"/>
<Label text="{i18n>EmpMail}" required="true" design="Bold"/>
<Input id="empMailC" liveChange="onLiveChangeCreateEmail"/>
</f:content>
</f:SimpleForm>
<f:SimpleForm id="updateEmpDetails" visible="false" editable="true" layout="ResponsiveGridLayout" adjustLabelSpan="false" emptySpanL="6"
columnsL="1">
<f:content>
<Label text="{i18n>EmpID}" design="Bold"/>
<Input required="true" submit="onEdit" id="empIDU"/>
<Button text="Edit" press="onEdit"/>
<Label text="{i18n>EmpName}" design="Bold" visible="false" id="empNameLabelU"/>
<Input id="empNameInputU" value="{oModel_EMPUpdate>/Ename}" visible="false"/>
<Label text="{i18n>EmpNo}" design="Bold" visible="false" id="empNoLabelU"/>
<Input id="empNoInputU" value="{oModel_EMPUpdate>/Mobno}" visible="false"/>
<Label text="{i18n>EmpMail}" design="Bold" visible="false" id="empMailLabelU"/>
<Input id="empMailInputU" value="{oModel_EMPUpdate>/Emailid}" visible="false"/>
</f:content>
</f:SimpleForm>
<f:SimpleForm id="deleteEmpDetails" visible="false" editable="true" layout="ResponsiveGridLayout" adjustLabelSpan="false" emptySpanL="6"
columnsL="1">
<f:content>
<Label text="{i18n>EmpID}" design="Bold"/>
<Input required="true" submit="onGet" id="empIDD"/>
<Button text="Get" press="onGet"/>
<Label text="{i18n>EmpName}" design="Bold" visible="false" id="empNameLabelD"/>
<Text text="{oModel_EMPDelete>/Ename}" id="empNameInputD" visible="false"/>
<Label text="{i18n>EmpNo}" design="Bold" visible="false" id="empNoLabelD"/>
<Text text="{oModel_EMPDelete>/Mobno}" id="empNoInputD" visible="false"/>
<Label text="{i18n>EmpMail}" design="Bold" visible="false" id="empMailLabelD"/>
<Text text="{oModel_EMPDelete>/Emailid}" id="empMailInputD" visible="false"/>
</f:content>
</f:SimpleForm>
</content>
<footer id="Green">
<Bar>
<contentRight>
<Button id="idCreate" icon="sap-icon://create-form" text="{i18n>create}" type="Accept" enabled="true" press="createDetails" visible="false"/>
<Button id="idUpdate" icon="sap-icon://edit" text="{i18n>update}" type="Accept" enabled="false" press="updateDetails" visible="false"/>
<Button id="idDelete" icon="sap-icon://delete" text="{i18n>delete}" type="Reject" enabled="false" press="deleteDetails" visible="false"/>
</contentRight>
</Bar>
</footer>
</Page>
</pages>
</App>
</mvc:View>For the actions to be performed on screen, here is the controller part.;
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/ValueState",
"sap/m/MessageBox",
"sap/ui/model/json/JSONModel"
], function (Controller, ValueState, MessageBox, JSONModel) {
"use strict";
return Controller.extend("com.detailsExample_Emp_Details.controller.App", {
handleSegmentedButton: function (oEvent) {
var selectedButton = oEvent.mParameters.button.mProperties.text;
var createEmpInfo = this.getOwnerComponent().getModel("i18n").getResourceBundle().getText("Create");
var updateEmpInfo = this.getOwnerComponent().getModel("i18n").getResourceBundle().getText("Update");
var deleteEmpInfo = this.getOwnerComponent().getModel("i18n").getResourceBundle().getText("Delete");
if (selectedButton === createEmpInfo) {
this.getView().byId("createEmpDetails").setVisible(true);
this.getView().byId("idCreate").setVisible(true);
this.getView().byId("updateEmpDetails").setVisible(false);
this.getView().byId("idUpdate").setVisible(false);
this.getView().byId("deleteEmpDetails").setVisible(false);
this.getView().byId("idDelete").setVisible(false);
this.getView().byId("empIDC").setValue("");
this.getView().byId("empNameC").setValue("");
this.getView().byId("empNumC").setValue("");
this.getView().byId("empMailC").setValue("");
//this.getView().byId("idCreate").setEnabled(false);
}
if (selectedButton === updateEmpInfo) {
this.getView().byId("createEmpDetails").setVisible(false);
this.getView().byId("idCreate").setVisible(false);
this.getView().byId("updateEmpDetails").setVisible(true);
this.getView().byId("idUpdate").setVisible(true);
this.getView().byId("deleteEmpDetails").setVisible(false);
this.getView().byId("idDelete").setVisible(false);
this.getView().byId("empNameLabelU").setVisible(false);
this.getView().byId("empNameInputU").setVisible(false);
this.getView().byId("empNoLabelU").setVisible(false);
this.getView().byId("empNoInputU").setVisible(false);
this.getView().byId("empMailLabelU").setVisible(false);
this.getView().byId("empMailInputU").setVisible(false);
this.getView().byId("empIDU").setValue("");
}
if (selectedButton === deleteEmpInfo) {
this.getView().byId("createEmpDetails").setVisible(false);
this.getView().byId("idCreate").setVisible(false);
this.getView().byId("updateEmpDetails").setVisible(false);
this.getView().byId("idUpdate").setVisible(false);
this.getView().byId("deleteEmpDetails").setVisible(true);
this.getView().byId("idDelete").setVisible(true);
this.getView().byId("empNameLabelD").setVisible(false);
this.getView().byId("empNameInputD").setVisible(false);
this.getView().byId("empNoLabelD").setVisible(false);
this.getView().byId("empNoInputD").setVisible(false);
this.getView().byId("empMailLabelD").setVisible(false);
this.getView().byId("empMailInputD").setVisible(false);
this.getView().byId("empIDD").setValue("");
}
},
onEdit: function () {
var empIDU = this.getView().byId("empIDU").getValue();
if (empIDU === "" || empIDU === undefined) {
MessageBox.error("Please enter Employee Number");
} else {
var That = this;
var empIDU = this.getView().byId("empIDU").getValue();
if (empIDU !== "") {
this.getOwnerComponent().getModel().read("/EmpSet", {
success: function (oData, oResponse) {
var vFlag = false;
for (var i = 0; i < oData.results.length; i++) {
if (oData.results[i].Eid === empIDU) {
vFlag = true;
}
}
if (vFlag) {
this.getOwnerComponent().getModel().read("/EmpSet('" + empIDU + "')", {
success: function (oData1, oResponse1) {
var oModel_EMPUpdate = new JSONModel();
oModel_EMPUpdate.setData(oData1);
That.getView().setModel(oModel_EMPUpdate, "oModel_EMPUpdate");
That.getView().getModel("oModel_EMPUpdate").refresh();
}.bind(this),
error: function (oError) {
}.bind(this)
});
this.getView().byId("empNameLabelU").setVisible(true);
this.getView().byId("empNameInputU").setVisible(true);
this.getView().byId("empNoLabelU").setVisible(true);
this.getView().byId("empNoInputU").setVisible(true);
this.getView().byId("empMailLabelU").setVisible(true);
this.getView().byId("empMailInputU").setVisible(true);
this.getView().byId("idUpdate").setEnabled(true);
} else {
MessageBox.error("Record with this Employee ID doesn't exists. Please select an existing value");
this.getView().byId("empNameLabelU").setVisible(false);
this.getView().byId("empNameInputU").setVisible(false);
this.getView().byId("empNoLabelU").setVisible(false);
this.getView().byId("empNoInputU").setVisible(false);
this.getView().byId("empMailLabelU").setVisible(false);
this.getView().byId("empMailInputU").setVisible(false);
this.getView().byId("idUpdate").setEnabled(false);
}
}.bind(this),
error: function (oError) {
}.bind(this)
});
}
}
},
onGet: function () {
var empIDD = this.getView().byId("empIDD").getValue();
if (empIDD === "" || empIDD === undefined) {
MessageBox.error("Please enter Employee Number");
} else {
var That = this;
if (empIDD !== "") {
this.getOwnerComponent().getModel().read("/EmpSet", {
success: function (oData, oResponse) {
var vFlag = false;
for (var i = 0; i < oData.results.length; i++) {
if (oData.results[i].Eid === empIDD) {
vFlag = true;
}
}
if (vFlag) {
this.getOwnerComponent().getModel().read("/EmpSet('" + empIDD + "')", {
success: function (oData1, oResponse1) {
var oModel_EMPDelete = new JSONModel();
oModel_EMPDelete.setData(oData1);
That.getView().setModel(oModel_EMPDelete, "oModel_EMPDelete");
That.getView().getModel("oModel_EMPDelete").refresh();
}.bind(this),
error: function (oError) {
}.bind(this)
});
this.getView().byId("empNameLabelD").setVisible(true);
this.getView().byId("empNameInputD").setVisible(true);
this.getView().byId("empNoLabelD").setVisible(true);
this.getView().byId("empNoInputD").setVisible(true);
this.getView().byId("empMailLabelD").setVisible(true);
this.getView().byId("empMailInputD").setVisible(true);
this.getView().byId("idDelete").setEnabled(true);
} else {
MessageBox.error("Record with this Employee ID doesn't exists. Please select an existing value");
this.getView().byId("empNameLabelD").setVisible(false);
this.getView().byId("empNameInputD").setVisible(false);
this.getView().byId("empNoLabelD").setVisible(false);
this.getView().byId("empNoInputD").setVisible(false);
this.getView().byId("empMailLabelD").setVisible(false);
this.getView().byId("empMailInputD").setVisible(false);
this.getView().byId("idDelete").setEnabled(false);
}
}.bind(this),
error: function (oError) {
}.bind(this)
});
}
}
},
createDetails: function () {
var empIDC = this.getView().byId("empIDC").getValue();
var empNameC = this.getView().byId("empNameC").getValue();
var empNumC = this.getView().byId("empNumC").getValue();
var empMailC = this.getView().byId("empMailC").getValue();
if (empIDC === "" || empIDC === undefined || empNameC === "" || empNameC === undefined || empNumC === "" || empNumC ===
undefined || empMailC === "" || empMailC === undefined) {
MessageBox.error("Please enter mandatory details");
} else {
this.getOwnerComponent().getModel().read("/EmpSet", {
success: function (oData, oResponse) {
var vFlag = false;
var sParam = "";
for (var i = 0; i < oData.results.length; i++) {
if (oData.results[i].Eid === empIDC) {
vFlag = true;
sParam = "ID";
break;
} else if (oData.results[i].Ename === empNameC) {
vFlag = true;
sParam = sParam + "Name";
break;
} else if (oData.results[i].Mobno === empNumC) {
vFlag = true;
sParam = sParam + "," + "Mob No";
break;
} else if (oData.results[i].Emailid === empMailC) {
vFlag = true;
sParam = sParam + "," + "Email";
break;
}
}
if (vFlag) {
MessageBox.error("Record with the same " + sParam + " already exists. Please select a unique value");
} else {
this.commonFunc();
}
}.bind(this),
error: function (oError) {
}.bind(this)
});
}
},
updateDetails: function () {
var empIDU = this.getView().byId("empIDU").getValue();
var empNameU = this.getView().byId("empNameInputU").getValue();
var empNumU = this.getView().byId("empNoInputU").getValue();
var empMailU = this.getView().byId("empMailInputU").getValue();
var payLoad = {
"Eid": empIDU,
"Ename": empNameU,
"Mobno": empNumU,
"Emailid": empMailU
};
this.getOwnerComponent().getModel().update("/EmpSet('" + empIDU + "')", payLoad, {
method: "PUT",
success: function (odata, Response) {
if (odata !== "" || odata !== undefined) {
MessageBox.success("Updated successfully.");
} else {
MessageBox.error("Not updated.");
}
},
error: function (cc, vv) {
}
});
},
deleteDetails: function () {
var empIDD = this.getView().byId("empIDD").getValue();
if (empIDD === "" || empIDD === undefined) {
MessageBox.error("Please enter Employee ID to delete the record.");
}
this.getOwnerComponent().getModel().remove("/EmpSet('" + empIDD + "')", {
method: "DELETE",
success: function (odata, Response) {
if (odata !== "" || odata !== undefined) {
MessageBox.success("Deleted successfully.");
} else {
MessageBox.error("Not able to delete.");
}
},
error: function (cc, vv) {
}
});
},
onLiveChangeCreateID: function (oEvt) {
var regex = /^[0-9]*$/;
var valID = oEvt.mParameters.value;
if (valID === "" || valID === undefined || valID.match(regex) === null) {
this.getView().byId("empIDC").setValueState(ValueState.Error);
this.getView().byId("empIDC").setValueStateText("Please enter a numeric value. Limited to 3 digits");
this.getView().byId("empIDC").setValue("");
} else {
this.getView().byId("empIDC").setValueState(ValueState.None);
}
},
onLiveChangeCreateName: function (oEvt) {
var regex = /^[a-z]*$/;
var valName = oEvt.mParameters.value;
if (valName === "" || valName === undefined || valName.match(regex) === null) {
this.getView().byId("empNameC").setValueState(ValueState.Error);
this.getView().byId("empNameC").setValueStateText("Please enter charecters. Limited to 15 characters");
this.getView().byId("empNameC").setValue("");
} else {
this.getView().byId("empNameC").setValueState(ValueState.None);
}
},
onLiveChangeCreateNum: function (oEvt) {
var regex = /^[0-9]*$/;
var valNum = oEvt.mParameters.value;
if (valNum === "" || valNum === undefined || valNum.match(regex) === null || valNum.slice(0, 1) === "0" || valNum.length < 9) {
this.getView().byId("empNumC").setValueState(ValueState.Error);
this.getView().byId("empNumC").setValueStateText("Please enter a 10 digit number. cannot start with Zero");
} else {
this.getView().byId("empNumC").setValueState(ValueState.None);
}
},
onLiveChangeCreateEmail: function (oEvt) {
var regex = /^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/;
var valMail = oEvt.mParameters.value;
if (valMail === "" || valMail === undefined || !(regex.test(valMail))) {
this.getView().byId("empMailC").setValueState(ValueState.Error);
this.getView().byId("empMailC").setValueStateText("Please enter a valid mail ID");
} else {
this.getView().byId("empMailC").setValueState(ValueState.None);
}
},
commonFunc: function () {
var empIDC = this.getView().byId("empIDC").getValue();
var empNameC = this.getView().byId("empNameC").getValue();
var empNumC = this.getView().byId("empNumC").getValue();
var empMailC = this.getView().byId("empMailC").getValue();
var payLoad = {
"Eid": empIDC,
"Ename": empNameC,
"Mobno": empNumC,
"Emailid": empMailC
};
this.getOwnerComponent().getModel().create("/EmpSet", payLoad, {
success: function (odata, Response) {
if (odata !== "" || odata !== undefined) {
MessageBox.success("Created successfully.");
} else {
MessageBox.error("New entry not created.");
}
},
error: function (cc, vv) {
}
});
}
});
});Finally application looks this way.
Please comment if you have any queries. Also request you to let me know if any changes required.
I have written this blog just to show the employee information in any organization. Also for basic understanding of any fresher in SAP UI5.
2 Comments
