Skip to Content

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.

/wp-content/uploads/2014/08/16_524938.jpg

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

/wp-content/uploads/2014/08/17_524948.jpg

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.

1 Comment
You must be Logged on to comment or reply to a post.