Consumption of CDS Views in Freestyle UI5 Applications

Introduction

There has been the convenient option of creating CDS views in Eclipse and publishing them via annotation on the SAP Gateway since SAP Netweaver 7.4 SP05. Using the available templates in the SAP WebIDE, you can easily generate an interface for the CDS views. This creates a complete SAP Fiori application with just a few lines of code. But the disadvantages quickly become clear in the attempt to expand the application generated this way:

In the project, one searches in vain for the well-known XML views or JavaScript controllers.
The following section describes how to integrate a CDS view with associated metadata extension into an existing SEGW project. The standard UI5 Smart Controls are then used in a classic UI5 application to consume this data. The resulting UI5 application combines the advantages of CDS views with those of manual development.

Application

For the present example, an app is used in a List Report Layout. By subsequent adjustments, the app is personalized with XML and JavaScript.

Final List Report Application:

Metadata Extension for ZMASTERSEARCH:

Creating the SEGW project

An existing SEGW project will be extended by the Consumption View:

SEGW:

Selecting the CDS Views:

The entity can be reached through the service after regenerating the project.

SuccessfulRead on the CDS View:

Runtime Artifacts:

Annotation:

http://:/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName=’_ANNO_MDL’,Version=’0001′)/$value

The annotations can be downloaded and be used locally.

Creating the UI5 application

At the beginning of the development it makes sense to load a current template from the WebIDE.

Templates in WebIDE :

    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/Z*****_SRV/",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0",
          "localUri": "localService/metadata.xml",
          "annotations": [
            "annotations"
          ]
        }
      },
      "annotations": {
        "type": "oDataAnnotations",
        "uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='Z*****_ANNO_MDL',Version='0001')/$value",
        "settings": {
          "localUri": "annotations/annotations.xml"
        }
      }
    }

From this point you have a fully functional UI5 List Report application that has all the functions defined in the template and CDS View.

Consumption of the CDS views in the application

The view of the UI5 application gets a Smart Filter Bar and a Smart Table Control. Both controllers are assigned the zmastersearch entity set.
The sap.m.Table within the SmartTable provides color highlighting of the result types (highlight = “{path: ‘type’, formatter: ‘. Formatter.lineHighlighter’}”).

XML View:

  <Page showHeader="false" showSubHeader="false">
                <content>
                    <VBox fitContainer="true">
                        <smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="zmastersearch"/>
 
                        <smartTable:SmartTable smartFilterId="smartFilterBar"
                                               showFullScreenButton="true"
                                               entitySet="zmastersearch"
                                               tableType="ResponsiveTable"
                                               header="{viewctrl>/title}"
                                               id="smartTable"
                                               class="sapUiResponsiveContentPadding">
 
                            <Table id="innerUi5Table" growing="true">
                                <ColumnListItem highlight="{path:'type', formatter:'.formatter.lineHighlighter'}"/>
                            </Table>
 
                        </smartTable:SmartTable>
                    </VBox>
                </content>
 
            </Page>

JS Controller:

 onAfterRendering: function()
{
var oSmartTable = this.getView().byId("smartTable");
var that = this;
 
oSmartTable.attachDataReceived(function(data)
{
var oSmartTable = that.getView().byId("smartTable");
var aItems = oSmartTable.getTable().getItems();
 
if (aItems.length === 0) return;
 
aItems.forEach(function(item)
{
item.setType('DetailAndActive');
item.getDetailControl().setIcon("sap-icon://drop-down-list");
item.getDetailControl().setTooltip(inw.i18n('menu'));
 
           item.detachDetailPress(that._handleLineDetailPress.bind(that));
           item.detachPress(that._handleLineNavigation.bind(that));
           item.attachDetailPress(that._handleLineDetailPress.bind(that));
           item.attachPress(that._handleLineNavigation.bind(that));
})
 
})
 
},

Conclusion

This attempt combines the simple creation of a Ui5 app via CDS with all the possibilities of custom Javascript programming.

This Blog was first published on inwerken.de.

About the author