Getting data in SAPUI5 application from backend tables in NetWeaver

Note: Eclipse is just a standard editor to develop UI5 applications. You should use SAP Web IDE which is one of the recommended editors now for SAPUI5 development.

When your backend system is a NetWeaver system, Gateway and OData services would be the recommended way to retrieve data from backend tables.

Overview of Data Retrieval Architecture

In SAPUI5 applications connected to NetWeaver backend systems, the data flow follows this pattern −

SAP Gateway and OData Services

SAP Gateway acts as a bridge between your SAPUI5 frontend application and the NetWeaver backend system. It exposes backend data through OData services, which are RESTful web services that follow the OData protocol.

Key Benefits of Using OData

Using OData services provides several advantages −

• Standardized Protocol: OData follows REST principles and JSON/XML formats
• Built-in Filtering: Supports $filter, $select, and $expand operations
• Two-way Data Binding: Seamless integration with SAPUI5 models
• Metadata Support: Self-describing services with $metadata endpoint

Example: Consuming OData Service in SAPUI5

Here's how to connect your SAPUI5 application to an OData service −

// In your SAPUI5 controller or component
var oModel = new sap.ui.model.odata.v2.ODataModel({
    serviceUrl: "/sap/opu/odata/sap/ZMY_SERVICE_SRV/",
    useBatch: false
});

// Set the model to your application
this.getView().setModel(oModel);

// Read data from backend table via OData
oModel.read("/EmployeeSet", {
    success: function(oData) {
        console.log("Data retrieved successfully:", oData.results);
    },
    error: function(oError) {
        console.log("Error retrieving data:", oError);
    }
});

Data Binding Example

You can bind the OData model directly to your UI controls −

<Table items="{/EmployeeSet}">
    <columns>
        <Column>
            <Text text="Employee ID" />
        </Column>
        <Column>
            <Text text="Name" />
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <Text text="{EmployeeId}" />
            <Text text="{Name}" />
        </ColumnListItem>
    </items>
</Table>

This approach ensures efficient data retrieval from NetWeaver backend tables while maintaining clean separation between your UI layer and business logic. The OData service handles the complexity of database access and provides a standardized interface for your SAPUI5 application.