Skip to Content
Author's profile photo Murali Shanmugham

Fiori Extension – Reuse OData/UI components – Part 2

In the previous article, I wrote about enhancing OData services. In this article, I will focus on the UI5 extensions. Assuming the OData services are prepared for consumption using the previous steps, we can now bring the Document Flow information as a table across all 3 CRM Transactional Apps – Opportunity/Appointment/Tasks.

Below is the details screen of Appointment App showing the desired outcome.


Create an new SAPUI5 Application Project in Eclipse. I have called it DOCUMENT_FLOW. Add the highlighted files – Component.js , view and a controller file as shown below


Declare the component as shown below"cus.crm.documentFlow.Component");"cus.crm.documentFlow.Component", {
      metadata :"FS", {
            "name" : "cus.crm.documentFlow",
            "version" : "1.0.0",
            "library" : "cus.crm.documentFlow",
            "includes" : "",
            "dependencies" : {
                  "libs" : [ "sap.m", "" ],
                  "components" : []

The XML view represents the Table which will display the Document flow records

<core:View xmlns="sap.m"  xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
<Table id="DocFlowTable"
    visible="true" inset="false" items="{json>/DocFlowSet}">
      <Column hAlign="Center">
        <Text text="Transaction ID" />
      <Column  hAlign="Center">
        <Text text="Transaction Type" />
      <Column  hAlign="Center">
        <Text text="Description" />
      <Column  hAlign="Center">
        <Text text="Created On" />
            <Text id="TransactionIDText"   text="{json>TransactionID}"/>
            <Text id="TransactionDesText"  text="{json>TransactionDes}" />
            <Text id="DescriptionText"     text="{json>Description}" />
            <Text id="CreatedOnText"       text="{path: 'json>CreatedOn', type:'', formatOptions:{style:'medium'}}"/>

In the controller, we retrieve the parameters passed to this view from the calling Applications. Based on the parameter, we make an OData call to the respective service.

sap.ui.controller("cus.crm.documentFlow.view.DocFlow", {
      onInit : function() {
            //Retrieve the transaction Guid which is being passed
            var Guid = this.oView.oViewData.GuidID;
            //Identify the application which is calling and accordingly construct the service URL
            if (this.oView.oViewData.Application == "Appointment")     
                  var ODataUrl = "/sap/opu/odata/sap/ZMS_APPOINTMENT_SRV";
var sPath = "/AppointmentSet(guid'" + Guid
            + "')/DocumentFlow";
            }else if (this.oView.oViewData.Application == "Opportunity"){
                  var ODataUrl = "/sap/opu/odata/sap/ZMS_OPPORTUNITY_SRV";
var sPath = "/Opportunities(guid'" + Guid
            + "')/DocumentFlow";
            }else if (this.oView.oViewData.Application == "Task"){
                  var ODataUrl = "/sap/opu/odata/sap/ZMS_TASK_SRV";
var sPath = "/Tasks(guid'" + Guid
            + "')/DocumentFlow";
            var oModel = new sap.ui.model.odata.ODataModel(ODataUrl);
            var that = this;
            //Fetch the Document flow records making an OData call and bind the result to the table,null,null,true,jQuery.proxy(function(odata,response) {
                                var dataResults =;
                                this.newResult =;
                                var oTable = that.getView().byId("DocFlowTable");
                                var dataLength =;
                                var dataObject = { DocFlowSet : [] };
                                for ( var i = 0; i < dataLength; i++) {
                                  var record = dataResults[i];
                                var jsonModel = new sap.ui.model.json.JSONModel();
                              }, this));             

The Document flow component is now ready to be used in any of the applications.

I have chosen CRM Appointment App. I have already created an extension project for this App. In the Component.js, register the document flow component.'cus.crm.documentFlow','/sap/bc/ui5_ui5/sap/zdocument_flow');

Since, I am displaying the Document flow table in the Appointment Detail screen, I have to put my code within Appointment Detail Custom Controller. Notice that a view (which is within the Document Flow component) has been instantiated and is added to a control which already exists in the Standard Appointment Detail XML view.

onInit: function() {
                  //Create an instance of a Panel
                  var   panel = new sap.m.Panel({
                        headerText: "Document Flow",
                  // Instantiate a view
                  this.embedView = sap.ui.view({
                      type : sap.ui.core.mvc.ViewType.XML,
                      viewName : "cus.crm.documentFlow.view.DocFlow",
                      viewData : {
                              Application : "Appointment",
                            GuidID : "00505694-0AF6-1ED3-BFFF-14B2312AD27D" //Hard code GUID for Demonstration
                  //Embed the view into a panel
                  //Add the Panel to a container object (like a page) which is available in the Standard XML View

Similarly, we can make enhancements in Opportunity and Task App to call the Document Flow component in order to display a table consisting of the related document flow records.

I hope you found this useful.I am keen to hear from others if they had used another approach to reuse UI components in Fiori.

Assigned tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thanks for sharing Murali !!