Dynamically Handling OData Metadata in a Fiori Fre...

prashanth01 · ‎2024 Oct 18

When developing SAP Fiori applications, especially Freestyle apps, developers sometimes need to manipulate the metadata fetched from OData services. In this blog post, I will walk you through how to modify OData service metadata properties dynamically in Component.js—specifically, how to customize label values based on the current date.

This is particularly useful when working with price forecasts or time-bound data, where metadata labels must reflect the period they represent (e.g., Month-Price, Month-Std Price).

Additionally, I’ll demonstrate how to leverage SAPUI5 lifecycle methods, modify OData annotations at runtime, and integrate it smoothly into your app logic.

Creating the CDS View

To expose your forecast data as OData, start by creating a CDS view in your backend system. This CDS will contain fields such as:

Mnt1YearPrice
Mnt1YearStdPrice
Mnt1YearPriceList
Mnt1YearPpv
Mnt1YearStdFright
These fields represent forecast values that will be updated dynamically in your Fiori app based on the current month.

Example CDS Code:

Explanation:

@odata.publish: true: This annotation will expose the CDS as an OData service.
SQL View: The view pulls forecast data from the zforecast_table table.

Creating the SEGW Project

Once the CDS is ready, you need to create a SEGW (SAP Gateway Service Builder) project to expose it as an OData service.

Enhancing the MPC_EXT Class

In the MPC_EXT class, you can define methods to manipulate metadata properties dynamically. This is particularly useful for updating labels based on the current date.
I am just adding a sample code you can change based on the requirement

METHOD define.
    super->define( ). "Ensure you call the parent metadata
    DATA: lo_entity_type TYPE REF TO /iwbep/if_mgw_odata_entity_typ,
          lo_property    TYPE REF TO /iwbep/cl_mgw_odata_property,
          lo_annotation  TYPE REF TO /iwbep/if_mgw_odata_annotation.
            lo_entity_type = model->get_entity_type( iv_entity_name = 'ZCDS_PTP_FORECASTType'). "Your Entity Name
CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
      EXPORTING
        iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
      RECEIVING
        ro_annotation           = lo_annotation.

    
    lo_property ?= lo_entity_type->get_property( iv_property_name = 'Mnt1YearPrice'). "Property inside your Entity

    CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
      EXPORTING
        iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
      RECEIVING
        ro_annotation           = lo_annotation.

    lo_annotation->add( iv_key = 'label' iv_value = 'Month1curyear' ). "Specific annotation you want to add.

    lo_annotation->add( iv_key = 'label' iv_value = 'Mnt2YearPrice' ). "Specific annotation you want to add.

    lo_property ?= lo_entity_type->get_property( iv_property_name = 'Mnt2YearStdPrice'). "Property inside your Entity Month 02 02

    CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
      EXPORTING
        iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
      RECEIVING
        ro_annotation           = lo_annotation.
"Specific annotation you want to add.

  
    lo_annotation->add( iv_key = 'label' iv_value = 'Mnt3YearPrice' ). "Specific annotation you want to add.

    lo_property ?= lo_entity_type->get_property( iv_property_name = 'Mnt3YearStdPrice'). "Property inside your Entity 02

    CALL METHOD lo_property->/iwbep/if_mgw_odata_annotatabl~create_annotation
      EXPORTING
        iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace
      RECEIVING
        ro_annotation           = lo_annotation.

    lo_annotation->add( iv_key = 'label' iv_value = 'Mnt3YearStdPrice' ). "Specific annotation you want to add.

  ENDMETHOD.

Consuming the OData Service in Fiori App

Once the OData service is available, we bind it to our Fiori app via manifest.json and use Component.js to manipulate metadata labels based on the current month.
Code in Component.js

init: function () {
    // Call the base component's init function
    UIComponent.prototype.init.apply(this, arguments);

    // Initialize routing
    this.getRouter().initialize();

    // Set device model
    this.setModel(models.createDeviceModel(), "device");

    // Get OData model and attach metadata loaded event
    var oModel = this.getModel("forecastService");

    oModel.attachMetadataLoaded(function (data) {
        var oFormat = sap.ui.core.format.DateFormat.getInstance({
            pattern: "MMM-yyyy",
            UTC: true
        });
        var oDate = new Date();

        // Loop through entity properties to modify labels
        var aProperties = data.getParameters().metadata.oMetadata.dataServices.schema[0].entityType[0].property;
        for (var i = 0; i < aProperties.length; i++) {
            var sDate = oFormat.format(oDate);
            var oLabel = aProperties[i].extensions.find(function (ext) {
                return ext.name === "label";
            });

            if (oLabel) {
                switch (aProperties[i].name) {
                    case "Mnt1YearStdPrice":
                        oLabel.value = sDate + " - Std Price";
                        break;
                    case "Mnt1YearPriceList":
                        oLabel.value = sDate + " - Price List";
                        break;
                    case "Mnt1YearPpv":
                        oLabel.value = sDate + " - PPV";
                        break;
                    case "Mnt1YearStdFright":
                        oLabel.value = sDate + " - Standard (Freight & Duty)";
                        break;
                    default:
                        oLabel.value = sDate;
                }
            }
        }
    });
}

In the Component.js file, we’ll modify the metadata labels dynamically based on the current month.

Explanation:

attachMetadataLoaded: Ensures the code runs after metadata is loaded.

Label Manipulation: Updates each property’s label based on the current month.
Sample OUTPUT:

Conclusion

In this blog, we cover how to:

Create a CDS view for forecast data.
Expose the CDS via SEGW as an OData service.
Consume the OData service in a Fiori Freestyle app.
Manipulate metadata dynamically in Component.js based on the current month.

Dynamically Handling OData Metadata in a Fiori Freestyle Application