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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |