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.

To report this post you need to login first.

1 Comment

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

Leave a Reply