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.

  1. 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.

Kindly provide your feedback regarding this tutorial, and I would be pleased to address any queries or remarks you may have.

THANK YOU


you may be interested in this blog here:-

How can I see the values ​​of variables in OpenSolver as they change?

Navigating SAP’s E070 Table in SAP: The Heartbeat of Transport Management

  • Related Posts

    Sample program to attach any file from application server to any Business Object

    Let’s get started on Sample program to attach any file from application server to any Business Object. * Sample program to attach documents to any business objectREPORT z_gos_attachment NO STANDARD…

    Table to check whether a business object has any GOS attachment or not

    Table to check whether a business object has any GOS attachment or not? Numerous multiple times we really want to check, the number of GOS connections that are there in…

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You Missed

    Sample program to attach any file from application server to any Business Object

    • By Varad
    • May 28, 2025
    • 19 views
    Sample program to attach any file from application server to any Business Object

    Table to check whether a business object has any GOS attachment or not

    • By Varad
    • May 27, 2025
    • 47 views
    Table to check whether a business object has any GOS attachment or not

    SAP Cloud Platform Integration (CPI) Part 23 – Step-by-Step Guide to Mail Adapter Configuration with Attachments

    • By Varad
    • May 26, 2025
    • 34 views
    SAP Cloud Platform Integration (CPI) Part 23 – Step-by-Step Guide to Mail Adapter Configuration with Attachments

    How to Send Custom Purchase Order Form Directly to the Vendor?

    • By Varad
    • May 25, 2025
    • 77 views
    How to Send Custom Purchase Order Form Directly to the Vendor?

    Object Oriented Way of Sending an email with PDF as an Attachment

    • By Varad
    • May 24, 2025
    • 54 views
    Object Oriented Way of Sending an email with PDF as an Attachment

    SOLMAN – Understanding Attribute Context & Action Profile in Mail Forms

    • By Varad
    • May 23, 2025
    • 56 views
    SOLMAN – Understanding Attribute Context & Action Profile in Mail Forms