Fiori Extension - Reuse OData/UI components - Part 2

[Murali_Shanmu]

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

jQuery.sap.declare("cus.crm.documentFlow.Component");



sap.ca.scfld.md.ComponentBase.extend("cus.crm.documentFlow.Component", {

      metadata : sap.ca.scfld.md.ComponentBase.createMetaData("FS", {

            "name" : "cus.crm.documentFlow",

            "version" : "1.0.0",

            "library" : "cus.crm.documentFlow",

            "includes" : "",

            "dependencies" : {

                  "libs" : [ "sap.m", "sap.me" ],

                  "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"

      controllerName="cus.crm.documentFlow.view.DocFlow">

<Table id="DocFlowTable"

    visible="true" inset="false" items="{json>/DocFlowSet}">

    <columns>

      <Column hAlign="Center">

        <Text text="Transaction ID" />

      </Column>

      <Column  hAlign="Center">

        <Text text="Transaction Type" />

      </Column>

      <Column  hAlign="Center">

        <Text text="Description" />

      </Column>

      <Column  hAlign="Center">

        <Text text="Created On" />

      </Column>

    </columns>

    <items>

      <ColumnListItem>

        <cells>

            <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:'sap.ca.ui.model.type.Date', formatOptions:{style:'medium'}}"/>

        </cells>

      </ColumnListItem>

    </items>

  </Table>

</core:View>

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

 oModel.read(sPath,null,null,true,jQuery.proxy(function(odata,response) {

                                var dataResults = response.data.results;

                                this.newResult = response.data.results;

                                var oTable = that.getView().byId("DocFlowTable");

                                var dataLength = response.data.results.length;

                                var dataObject = { DocFlowSet : [] };

                                for ( var i = 0; i < dataLength; i++) {

                                  var record = dataResults[i];

                                  dataObject.DocFlowSet.push(record);

                                }

                                var jsonModel = new sap.ui.model.json.JSONModel();

 jsonModel.setData(dataObject);

 oTable.setModel(jsonModel,"json");

                              }, 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.

jQuery.sap.registerModulePath('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

                  panel.addContent(this.embedView);  

                  //Add the Panel to a container object (like a page) which is available in the Standard XML View

                  this.byId("detail").addContent(panel);

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.