SAP Fiori MyInbox provides a one-stop shop for managers to see their pending approvals and act on them. The existing views may need to be adjusted as per customer requirements to accommodate the different scenarios, and this means extending the S2(list) and S3(detail) views. This blog shows a way how this can easily be done.

Based on the guide provided by SAP Note 2118812  (How to Extend SAP Fiori My Inbox), there is the option to adapt the list and detail screens through extensibility based on the Task ID of the item to be approved. The guide by SAP explains how new views are defined as copies of the S3 with the additional variations specific to these Task IDs. This approach recommends creating a copy of the SAP standard S3 view and modify them to be the extended views.

Here we show you how to use an alternative - and in our view better - way to create multiple views with additional controls - using XML fragments.

Step 1

Implement extension point in manifest.json for S3 view and controller.

"sap.ui5": {
  "_version": "1.1.0",
	"dependencies": {
  	  "minUI5Version": "${sap.ui5.dist.version}"
	},
	"extends": {
	  "component": "cross.fnd.fiori.inbox",
	  "extensions": {
		"sap.ui.viewExtensions": {
	  	  "cross.fnd.fiori.inbox.view.S3": {
			"CustomerExtensionForAdditionalDetails": {
			  "className": "sap.ui.core.Fragment",
			  "fragmentName": "cross.fnd.fiori.inbox.inboxExtension.view.S3_CustomerExtensionForAdditionalDetailsCustom",
			  "type": "XML"
			}
		  }
		},
		sap.ui.controllerExtensions": {
		"cross.fnd.fiori.inbox.view.S3": {
		  "controllerName": “cross.fnd.fiori.inbox..view.S3_Ext"
		  } 
		}
	  }
	},
    

Step 2

Define XML fragment for the extension

Here we define the generic fragment with just a VerticalLayout control, which will be filled dynamically based on the taskID selected from the list.

<core:FragmentDefinition xmlns:core="sap.ui.core" 
 xmlns:form="sap.ui.layout.form" 
 xmlns:layout="sap.ui.layout" 
 xmlns="sap.m">
 <layout:VerticalLayout id=“CustomExtensionGeneric" />
</core:FragmentDefinition>

Step 3

Create XML fragments for different scenarios. Here you can have additional controls for the specific scenarios. In our case, lets say they are called S3_CustomerExtensionForScenario1 and S3_CustomerExtensionForScenario2, for our reference.

Step 4

Implement controller hook to load the relevant fragment based on task ID.

In this controller extension, we read the task ID from the binding context, and based on this we decide which scenario fragment is instantiated and inserted into the generic fragment.

sap.ui.controller(“cross.fnd.fiori.inbox.INBOX-EXTENSION-NAME.view.S3_Ext", {
  extHookOnDataLoaded: function(oData){
    //clearing and adding Generic fragment
	this.getView().byId(“CustomExtensionGeneric").removeAllContent();
	if( this.getView().getBindingContext().getProperty(“TaskDefinitionID").split("_")[0] === this.getOwnerComponent().getMetadata().getManifestEntry(“sap.app").taskId["Scenario1"] )//Scenario 1
	  {
	    if(! this.oScenario1Fragment){
		  this.sFragmentId = this.getView().getId() + "Scenario1Fragment";
			this.oScenario1Fragment = sap.ui.xmlfragment(this.sFragmentId, "cross.fnd.fiori.inbox.inboxExtension.view.S3_CustomerExtensionForScenario1", this);
            	this.getView().addDependent(this.oScenario1Fragment);
		}
		this.getView().byId("CustomExtensionGeneric").addContent(this.oScenario1Fragment);
	    
	// bind model start
	}
	else if( this.getView().getBindingContext().getProperty("TaskDefinitionID").split("_")[0] === this.getOwnerComponent().getMetadata().getManifestEntry("sap.app").taskId["Scenario2"] )//Scenario 2
	  {
	  if(! this.oScenario2Fragment){
		this.sFragmentId = this.getView().getId() + "Scenario2Fragment";
		this.oScenario2Fragment = sap.ui.xmlfragment(this.sFragmentId, "cross.fnd.fiori.inbox.inboxExtension.view.S3_CustomerExtensionForScenario2", this);
       	this.getView().addDependent(this.oScenario2Fragment);
	  }
	  this.getView().byId("CustomExtensionGeneric").addContent(this.oScenario2Fragment);
	    
   // bind model end
     }
  }
  }
});

You can see the final result in the following screenshots:

This approach would ensure that any changes from SAP in the S3 view are independent of the extension we have done. In addition, the fragments created would only have the additional controls for each scenario, which makes it a bit easier to read and maintain.

You can download the source code of this example here: