SAPUI5: How Can I Use the WebIDE to Consume OData Model Data in UI5?

In our SAPUI5 Application, we most commonly need to ingest SAP ABAP OData. SAP is, after all, our main source of income. The title makes it clear that we will be using an OData model data to drive a SAPUI5 application in this lesson. We would use WebIDE as our development environment.

The tutorial’s goal is:

Creating a destination in an account on SAP Cloud Platform
Data Source creation is done in the manifest.JSON data
OData Model Declaration in the manifest.json file
OData model instance creation in the controller code for your view
Using NorthWind Odata, a service that is accessible to the general public

Lets get started…

Establishing a destination in an account on SAP Cloud Platform

As indicated below, enter the destination properties.

Once you click the “Check Connection” button, a success message ought to appear.

The Manifest.json file’s Data Source creation

The manifest.json file in SAP WebIDE contains a code editor and a descriptor editor.Based on the previously constructed destination, we will create a new data source using the descriptor editor (no code). To create a new Data Source for your SAPUI5 application, open the manifest.json file in the descriptor editor, select the Data Sources tab, and click the Add icon. The next step would be to develop an OData model using this data source.

**New Datasource creation in the manifest.json file**

Choose the Service URL option in the New Data Source Wizard and input the following values:

Enter the path to the service in the Relative URL field. It is /V2/northwind/northwind.svc in our instance. Next, press the Test button.

Note: Do not include the relative path of the service when creating the destination; only the domain should be provided.When the Data Source is created in the manifest.json file, the relative path should be provided.

The manifest.json file contains an OData model declaration.

In the event that the test is successful, the wizard’s Next button will be enabled. Press the Next button. Enter the name of your OData model on the wizard’s next page. The name of the model in our instance is myModel.

Press the “Finish” button.

This will produce the manifest.json file’s datasource and model code.

4 . The controller of your view has created an instance of an OData model.

To access the Model declared in the manifest.json file from the previous step, write the code below in the onInit method of your view’s controller.

onInit: function () {
 // access OData model declared in manifest.json file
 var oModel = this.getOwnerComponent().getModel("myModel");

 //set the model on view to be used by the UI controls
 this.getView().setModel(oModel);
 },

The Products entity in OData Model

Our application’s OData model is built on the NorthWind OData service, which is accessible to the whole public. You can get its metadata by using this URL. There is a ton of data in this OData service under several entity kinds, such as Categories, Customers, Employees, Products, etc. We will be using the OData service’s Products Entity in this lesson.

Binding XML View Controls to Show Collection of Products

Write the code below in your XML view to tie an ObjectHeader and an ObjectListItem to the Master and Detail sections, respectively.

<mvc:View controllerName="org.unity.DemoMasterDetail.controller.View1" 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>
						<SplitApp id="splitappid" masterButtonText="Master" masterNavigate="" afterMasterNavigate="" masterButton="" detailNavigate="">
							<masterPages>
								<Page id="masterpageid" title="Products" titleLevel="Auto" showNavButton="true" showHeader="true" showSubHeader="true" navButtonText=""
									navButtonTooltip="" enableScrolling="true" icon="" navButtonTap="" navButtonPress="">
									<content>
										<List id="productlist" items="{/Products}" headerText="Products" headerDesign="Standard" footerText="End of the List" noDataText="No Employees"
											showNoData="true">
											<items>
												<ObjectListItem type="Navigation" title="{ProductName}" number="{UnitPrice}" numberUnit="INR" intro="{ProductID}" press="onObjectItemPress">
													<attributes>
														<ObjectAttribute title="" text="{QuantityPerUnit}"></ObjectAttribute>
													</attributes>
													<firstStatus>
														<ObjectStatus title="{UnitsInStock}" text="{designation}"></ObjectStatus>
													</firstStatus>
													<secondStatus>
														<ObjectStatus title="{Discontinued}"></ObjectStatus>
													</secondStatus>
												</ObjectListItem>
											</items>
											<headerToolbar>
												<Toolbar>
													<content>
														<Title text="Products" title="Search"></Title>
														<ToolbarSpacer/>
														<SearchField search="onSearch" width="50%"></SearchField>
													</content>
												</Toolbar>
											</headerToolbar>
										</List>
									</content>
								</Page>
							</masterPages>
							<detailPages>
								<Page id="detailpageid" title="Product Details" titleLevel="Auto" showNavButton="true" showHeader="true" showSubHeader="true"
									navButtonText="" navButtonTooltip="" enableScrolling="true" icon="" navButtonTap="" navButtonPress="">
									<content>
										<ObjectHeader id="objectheaderid" binding="{/Products}" title="{ProductName}"
											number="{UnitPrice}"
											numberUnit="{CurrencyCode}">
											<statuses>
												<ObjectStatus text="Some Damaged" state="Error"/>
												<ObjectStatus text="In Stock" state="Success"/>
											</statuses>
											<attributes>
												<ObjectAttribute text="{SupplierID}"/>
												<ObjectAttribute text="{CategoryID}"/>
												<ObjectAttribute text="{QuantityPerUnit}"/>
												<ObjectAttribute text="www.technicalgyanguru.com" active="true"/>
											</attributes>
										</ObjectHeader>
									</content>
								</Page>
							</detailPages>
						</SplitApp>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Specifying the View’s Controller’s onItemPress and onSearch Event Handlers

Return to your view and create an event handler for onObjectItemPress.

onObjectItemPress: function (oEvent) {
			// get the source control which triggered this event
			var oItem = oEvent.getSource();

			// get the binding context of the control
			var oCtx = oItem.getBindingContext();

			// get the binding path
			var path = oCtx.getPath();

			// use element binding to display current item
			this.getView().byId("objectheaderid").bindElement(path);
		},

Define the onSearch event handler now.

onSearch: function (oEvent) {
			// create a blank filter array
			var aFilter = [];

			// get the string which was searched by the user
			var sQuery = oEvent.getParameter("query");

			// create new filter object using the searched string
			var oFilter = new sap.ui.model.Filter("ProductName", FilterOperator.Contains, sQuery);

			// push the newly created filter object in the blank filter array created above.
			aFilter.push(oFilter);

			// get the binding of items aggregation of the List
			var oBinding = this.getView().byId("productlist").getBinding("items");

			// apply filter on the obtained binding
			oBinding.filter(aFilter);
		}

It’s Time to Run the SAPUI5 Program Test

In your WebIDE toolbar, click the “run” icon. A browser window will open with the application. Examine the application’s search and master detail functions. Take note that the SAPUI5 application is displaying the data from the Products entity.