Consume an OData Service with Create Option

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

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
	xmlns:smartTable="sap.ui.comp.smarttable" controllerName="opensap.odataBasic.controller.App" height="100%">
	<Page id="mPage" title="{i18n>appTitle}" titleLevel="H1">
		<content>
			<ScrollContainer id="sc1" height="100%" width="100%" horizontal="true" vertical="true">
				<Panel id="panel" headerText="New User Record Details" expandable="true" expanded="true">
					<List id="list" width="400px">
						<InputListItem id="itmFName" label="{i18n>FName}">
							<Input id="fName" value="{/FirstName}"/>
						</InputListItem>
						<InputListItem id="itmLName" label="{i18n>LName}">
							<Input id="lName" value="{/LastName}"/>
						</InputListItem>
						<InputListItem id="itmEmail" label="{i18n>EMail}">
							<Input id="email" value="{/Email}"/>
						</InputListItem>
					</List>
					<Button id="btnCall" text="{i18n>B3}" press="callUserService"/>
					<Button id="btnUpdate" text="{i18n>B4}" press="callUserUpdate"/>
				</Panel>
				<VBox fitContainer="true">
					<smartTable:SmartTable id="userTable" header="{i18n>UList}" 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="{i18n>UserId}"/>
								</Column>
								<Column id="FirstName">
									<customData>
										<core:CustomData key="p13nData" value='\{"columnKey": "FirstName", "leadingProperty": "FirstName", "maxLength": "40","columnIndex":"2"}'/>
									</customData>
									<Text text="{i18n>FName}"/>
								</Column>
								<Column id="LastName">
									<customData>
										<core:CustomData key="p13nData" value='\{"columnKey": "LastName", "leadingProperty": "LastName", "maxLength": "40","columnIndex":"3"}'/>
									</customData>
									<Text text="{i18n>LName}"/>
								</Column>
								<Column id="Email">
									<customData>
										<core:CustomData key="p13nData" value='\{"columnKey": "Email", "leadingProperty": "Email", "maxLength": "40","columnIndex":"4"}'/>
									</customData>
									<Text text="{i18n>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>
		</content>
	</Page>
</mvc:View>

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 logic:

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");
oTable.setModel(userModel);

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;

  oModel.setHeaders({
    "content-type": "application/json;charset=utf-8"
  });
  var mParams = {};
  mParams.success = function () {
    sap.ui.require(["sap/m/MessageToast"], function (MessageToast) {
      MessageToast.show("Create successful");
    });
  };
  mParams.error = onODataError;
  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 = onODataError;
  mParams.success = function () {
    sap.ui.require(["sap/m/MessageToast"], function (MessageToast) {
      MessageToast.show("Update successful");
    });
  };

  oModel.submitChanges(mParams);
}

Finally, delete the error handling function as we will use the reusable function from common/error.js which was created earlier. But we also need add this error.js reference to our index.html

	<script type="text/javascript" src="/common/error.js" ></script>