Consume oData v4 service as Model

In this example, we will try to consume SAP CAPM oData V4 service as an oData model in a UI5 application and bind it to a Table.

We will follow below steps -

Create Destination using CAP application details
Configure App Router for oData
Define Data Source
Define Data Model

Step 1 - Create Destination using CAP application details

In our case, the SAP CAP application exposes the following OData service-

CAP app oData service

https://trial-us10-development-tspace-cap-application-srv.cfapps.us10-004.hana.ondemand.com/odata/v4/custom-service/Warehouses

So, we will create Destination using below details -

Property	Value
Name	--any-name-- (In our case, we are using cap_application_srv)
Type	HTTP
ProxyType	Internet
URL	--your-cap-app-url-- (in our case, its- https://trial-us10-development-tspace-cap-application-srv.cfapps.us10-004.hana.ondemand.com)
Authentication	OAuth2UserTokenExchange
Client ID	--cap-app-client-id--
Client Secret	--cap-app-client-secret--
Token Service URL	--cap-app-client-id-- (add /oauth/token at the end)
verificationKey	--from cap app environment variables--
xsappname	--from cap app environment variables--
sap.cloud.service	--appName.service--

Step 2 - Configure App Router for oData

Define the app router for odata requests in xs-app.json file after resources object like-

xs-app.json

{
    "authenticationType": "xsuaa",
    "csrfProtection": false,
    "source": "^/odata/v4/custom-service/(.*)",
    "target": "/odata/v4/custom-service/$1",
    "destination": "cap_application_srv"
}

In our case-

Destination- cap_application_srv
Service- /odata/v4/custom-service

and we are able to see the metadata using -

metadata

https://trial-us10-development-tspace-cap-application-srv.cfapps.us10-004.hana.ondemand.com/odata/v4/custom-service/$metadata

Step 3 - Define Data Source

Now, define the odata as Data Source under sap.app section after crossNavigation on manifest.json file like-

webapp/manifest.json

"dataSources": {
    "WarehouseDataSource": {
        "uri": "/odata/v4/custom-service/",
        "type": "OData",
        "settings": {
            "odataVersion": "4.0"
        }
    }
}

In our case, the data source is defined with the name WarehouseDataSource.

Step 4 - Define Data Model

Now use the data source to define a oData model under models section on sap.ui5 section in manifest.json file like-

webapp/manifest.json

"WarehouseModel": {
    "dataSource": "WarehouseDataSource",
    "preload": true,
    "settings": {
        "synchronizationMode": "None",
        "operationMode": "Server",
        "autoExpandSelect": true,
        "earlyRequests": true
    }
}

In our case, the model is defined with the name WarehouseModel.

Its done, now we can use the odata model and bind it with table.

Bind oData Model with Table

Lets define a table in the View1.view.xml file and bind its items aggregation to the OData model.

We will define the binding with item like -

table

items="{WarehouseModel>/Warehouses}"

so the complete code will look like -

webapp/view/View1.view.xml

<mvc:View controllerName="warehouse.project3.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:f="sap.f"
	xmlns:l="sap.ui.layout"
	xmlns:form="sap.ui.layout.form"
    >
    	<!-- Show Details Panel -->
        <Panel class="m-tb-10">
            <Table id="idWarehouseTable" items="{WarehouseModel>/Warehouses}" headerText="Warehouse Details">
                <headerToolbar>
                    <OverflowToolbar>
                        <content>
                            <Title text="Warehouses" level="H2"/>
                            <ToolbarSpacer />
                        </content>
                    </OverflowToolbar>
                </headerToolbar>
		
                <columns>
                    <Column>
                        <Text text="ID" />
                    </Column>
                    <Column>
                        <Text text="Registered Name" />
                    </Column>
                    <Column>
                        <Text text="Owner" />
                    </Column>
                    <Column>
                        <Text text="Location" />
                    </Column>
                </columns>

                <items>
                    <ColumnListItem vAlign="Middle">
                        <cells>
                            <Text text="{WarehouseModel>ID}" />
                            <Text text="{WarehouseModel>name}" />
                            <Text text="{WarehouseModel>owner}" />
                            <Text text="{WarehouseModel>location}" />
                        </cells>
                    </ColumnListItem>
                </items>

            </Table>
        </Panel>

    </Page>
</mvc:View>

Create new Record

We can define custom logic to create a new record and persist it through the OData model.

Lets define a UI for User input like-

webapp/view/View1.view.xml

<Panel class="m-tb-10">
    <VBox class="sapUiSmallMargin">
        <form:SimpleForm id="SimpleFormDisplay354"
            editable="true"
            layout="ResponsiveGridLayout"
            title="Register Warehouse"
            labelSpanXL="3"
            labelSpanL="3"
            labelSpanM="3"
            labelSpanS="12"
            adjustLabelSpan="false"
            emptySpanXL="4"
            emptySpanL="4"
            emptySpanM="4"
            emptySpanS="0"
            columnsXL="1"
            columnsL="1"
            columnsM="1"
            singleContainerFullSize="false" >
            <form:content>
                <Label text="Name" />
                <Input id="name" placeholder="Warehouse Name" />
                <Label text="Owner" />
                <Input id="owner" placeholder="Owner Name" />
                <Label text="Location" />
                <Input id="location" placeholder="Complete Address" />
                <Label text="" />
                <Button text="Register" type="Emphasized" press="registerWarehouse" />
            </form:content>
        </form:SimpleForm>
    </VBox>
</Panel>

And then on button press, we can trigger custom logic like -

webapp/controller/View1.controller.js

registerWarehouse: function () {
    const name = this.getView().byId('name').getValue();
    const owner = this.getView().byId('owner').getValue();
    const location = this.getView().byId('location').getValue();

    if (name.length == 0 || owner.length == 0 || location.length == 0) {
        MessageToast.show('Please fill all the fields');
        return;
    }

    // Get Table and its binding
    const oTable = this.byId("idWarehouseTable");
    const oBinding = oTable.getBinding("items");

    //  Insert Data using Binding
    const oContext = oBinding.create({
        name: name,
        owner: owner,
        location: location
    });

    oContext.created()
        .then(() => {
            MessageToast.show("Warehouse created successfully!");
        })
        .catch((oError) => {
            MessageToast.show("Error creating warehouse: " + oError.message);
        });
}

Heading 1

Heading 2

Heading 3

Bold Content

content list item 1
content list item 2
content list item 3
content list item 4

content list item 1
content list item 2
content list item 3
content list item 4

View1.view.xml

https://trial-us10-development-tspace-cap-application-srv.cfapps.us10-004.hana.ondemand.com/odata/v4/custom-service/Warehouses

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

Note

https://trial-us10-development-tspace-cap-application-srv.cfapps.us10-004.hana.ondemand.com/odata/v4/custom-service/Warehouses - it gives Subaccout subdomain

https://trial-us10-development-tspace-cap-application-srv.cfapps.us10-004.hana.ondemand.com/odata/v4/custom-service/Warehouses - it gives cf org details

!!! Its Done !!!

Filter, sort on table / List Routing Navigation Page, Pannel, Shell, App Controls Formatter, Dialog, Fragment, Nested View Custom Control oData model