Skip to Content
0 %
Consume an OData Service with Create Option
// Explore More Tutorials

Consume an OData Service with Create Option


Consume an OData Service with Create Option

You will learn

Consume an OData Service with Create Option

Step 1: Copy previous code

You will begin by making a copy of the previous exercise.


Right-click on the resources folder . Choose Paste.


In the copy folder dialog, give the new Name as odataCRUD.

copy folder
Step 2: Copy the OData create service

In the js->lib->xsodata folder, copy the file user.xsodata into user2.xsodata. Replace the code with the following:

service {
	"UserData.User" as "Users"
	create using

You should have something like:

Step 3: Edit `manifest,json`

Go into the manifest.json file and switch the service to the existing user.xsodata service. Also adjust the name of the datasource in the model configuration:

Adjust manifest
Step 4: Adjust the XML view

Use the following code to replace the existing code for your XML view:

<core:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:u="sap.ui.unified" xmlns:core="sap.ui.core" xmlns:smartTable="sap.ui.comp.smarttable" controllerName="dev.odataBasic.controller.App"> <u:Shell id="myShell" icon="/images/sap_18.png"> <u:user> <u:ShellHeadUserItem image="sap-icon://person-placeholder" username="{config>/UserName}"/> </u:user> <u:content> <ScrollContainer height="100%" width="100%" horizontal="true" vertical="true"> <Panel headerText="New User Record Details" expandable="true" expanded="true"> <List width="400px"> <InputListItem label="First Name"> <Input id="fName" value="{/FirstName}"/> </InputListItem> <InputListItem label="Last Name"> <Input id="lName" value="{/LastName}"/> </InputListItem> <InputListItem label="Email"> <Input id="email" value="{/Email}"/> </InputListItem> </List> <Button text="Create Record" press="callUserService"/> <Button text="Update Changes" press="callUserUpdate"/> </Panel> <VBox fitContainer="true"> <smartTable:SmartTable id="userTable" header="User List" editable="false" entitySet="Users" showRowCount="true" enableAutoBinding="true" showFullScreenButton="true" tableType="Table"> <Table> <columns> <Column id="UserId"> <customData> <core:CustomData key="p13nData" value='\{"columnKey": "UserId", "leadingProperty": "UserId", "sortProperty": "UserId", "columnIndex":"1"}'/> </customData> <Text text="User ID"/> </Column> <Column id="FirstName"> <customData> <core:CustomData key="p13nData" value='\{"columnKey": "FirstName", "leadingProperty": "FirstName", "maxLength": "40","columnIndex":"2"}'/> </customData> <Text text="First Name"/> </Column> <Column id="LastName"> <customData> <core:CustomData key="p13nData" value='\{"columnKey": "LastName", "leadingProperty": "LastName", "maxLength": "40","columnIndex":"3"}'/> </customData> <Text text="Last Name"/> </Column> <Column id="Email"> <customData> <core:CustomData key="p13nData" value='\{"columnKey": "Email", "leadingProperty": "Email", "maxLength": "40","columnIndex":"4"}'/> </customData> <Text text="Email"/> </Column> </columns> <items> <ColumnListItem> <cells> <Input value="{UserId}" name="PERS_NO" /> <Input value="{FirstName}" name="FIRSTNAME"/> <Input value="{LastName}" name="LASTNAME"/> <Input value="{Email}" name="E_MAIL"/> </cells> </ColumnListItem> </items> </Table> </smartTable:SmartTable> </VBox> </ScrollContainer> </u:content> </u:Shell> </core:View>
Step 5: Add controller logics

Event handlers are within the controller file for your view. You can delete the implementation of the functions onInit and onErrorCall, as you will implement new logics:

delete handler implementation

Add the following code to the onInit function:

this.getView().addStyleClass("sapUiSizeCompact"); // make everything inside this View appear in Compact mode
			var oConfig = this.getOwnerComponent().getModel("config");
			var userName = oConfig.getProperty("/UserName");
			var userModel = this.getOwnerComponent().getModel("userModel");
			var oTable = this.getView().byId("userTable");

Add a function called callUserService:

callUserService: function() {
			var oModel = this.getOwnerComponent().getModel("userModel");
			var result = this.getView().getModel().getData();
			var oEntry = {};
			oEntry.UserId = "0000000000";
			oEntry.FirstName = result.FirstName;
			oEntry.LastName = result.LastName;
			oEntry.Email = result.Email;

				"content-type": "application/json;charset=utf-8"
			var mParams = {};
			mParams.success = function() {"Create successful");
			mParams.error = this.onErrorCall;
			oModel.create("/Users", oEntry, mParams);

Take a look at the code you have just added. You can see it is creating a JSON object with the service fields. Add a new function called callUserUpdate

callUserUpdate: function() { var oModel = this.getOwnerComponent().getModel("userModel"); oModel.setHeaders({ "content-type": "application/json;charset=utf-8" }); var mParams = {}; mParams.error = function() {"Update failed"); }; mParams.success = function() {"Update successful"); }; oModel.submitChanges(mParams); },

Finally, here is the code for the error handling function:

onErrorCall: function(oError) { if (oError.statusCode === 500 || oError.statusCode === 400 || oError.statusCode === "500" || oError.statusCode === "400") { var errorRes = JSON.parse(oError.responseText); if (!errorRes.error.innererror) { sap.m.MessageBox.alert(errorRes.error.message.value); } else { if (!errorRes.error.innererror.message) { sap.m.MessageBox.alert(errorRes.error.innererror.toString()); } else { sap.m.MessageBox.alert(errorRes.error.innererror.message); } } return; } else { sap.m.MessageBox.alert(oError.response.statusText); return; } },

Keep the reusable methods from the original script.

Step 6: Save and test

Run the js module and then the web module. When the new tab opens, adjust the URL to include the odataCRUD path:


Try creating a new record:

Try both creating a new record and editing existing records. Also try creating a record with an invalid email address.


Next Steps

Next Steps

Back to top