cancel
Showing results for 
Search instead for 
Did you mean: 

Approve Request Fiori app - UI Extensions not working

Former Member
0 Kudos

We have configured the standard Approve Requests app to show Customer Invoice approval and it works fine. And there are 3 requirements I am trying to achieve in our sandbox on top of the Approve Requests (CA_ALL_APV) app.

1. Add a custom UI field in the info tab of the details page.

2. Enable to show the attachment and notes tab (standard app has these 2 not visible)

3. Enable multiple approval(I think i'll start another discussion for this requirement since standard doesn't support mass approval-which is such a negative for this app)

After downloading the application and adding it to an SAPUI5 project in eclipse, I made the following changes:

For requirement 1, I created  InfoFields.fragment.xml where i have the below code:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">

    <Label  text="Vendor ID"/>

      <Text  text="1234"/>

    <Label  text="Custom Field 2"/>

      <Text text="Custom Text 2"/>

</core:FragmentDefinition>

Additionally for requirement 1 along with requirement 2, i created a customizing object under the metadata object with the below code in Component.js:

customizing : {

  "sap.ui.viewModifications": {

  "cross.fnd.approve.requests.view.S3": {

  "ARAttachmentIconTabFilter": {

  "visible": true,

  }

     },

  "cross.fnd.approve.requests.view.S3": {

  "ARNoteIconTabFilter": {

  "visible": true,

     }

  },

  "sap.ui.viewExtensions" : {

  "cross.fnd.approve.requests.view.S3":{

  "CustomerExtensionForInfoTabContent": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cross.fnd.approve.requests.view.InfoFields",

  type : "XML"

  }

   }

  }

  }

  }

After making the changes, I uploaded the WebContent folder of the project back to the backend with the report /UI5/UI5_REPOSITORY_LOAD.

I named the new BSP application ZVCA_ALL_APV5.

How i tested? I tested it in 2 ways:

1. From SE80, Right Click and test. This does not load anything. A blank page is shown. The console in the IE developer tools shows no errors.

2. Change the URL in LPD_CUST to point to the new BSP. The run the fiori launchpad. this will show the tile for Approve Requests with the correct number of workitems as 2. But once you click on the tile, an error popup is shown which reads 'Failure - Unable to start App'. The console in IE has an error: "TypeError - Object doesn't support property or method '_createRequestUrl' Approve Requests".

I made the changes to Component.js and did not touch Component-dbg.js or Component-preload.js. Do i need to change these 2 files too each time i change Component.js?

We are in process to decide if we really want to use Fiori or go with Kony. So I would want to get Fiori working in sandbox with our custom requirement to give it a chance.

@Fiori Gurus: What do you think the problem is? Am i making any silly mistake here?

Best Regards,

Varun

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

For requirement#1 you need to use this extension point under "ViewExtensions" part of your component.js file. The name of the extension point needs to be defined correctly or else it will not work.

Here is a sample:

  "CustomerExtensionForInfoTabContent": {

                        className: "sap.ui.core.Fragment",

                        fragmentName: "zxyz.approve.frag.S3_CustomerExtensionForInfoTabContent",

                        type: "XML"

                }

Regarding other requirements #2  to show Notes and Attachments tab, this is available out of the box for the app. you do not need to do any customizing or extension for this as if your backend SAP Document has Notes and Attachments in the WORKFLOW CONTAINER then it  will show up in the app. Please check workflow log and the container and see what is coming in the attachment and notes container.

I have all of this working for Notes & Attachment without single line of code for My Extended Approve Requests Fiori App. I have also added custom fields in the Info tab view by using above extension point and it works fine.

Regarding your point of Kony v/s SAP Fiori please check all options before making decision. Fiori is based on open industry protocols like oData, HTML5, JS and you are not tied to any proprietary software. Fiori is very extensible and easy to use. it is your decision finally but consider everything before you make that final choice.

regards

Ashish

Former Member
0 Kudos

Hi Ashish,

Thanks.

I will check further regarding requirement 2. Our workitems have attachments, however they are not being retrieved when i test the OData service. I will investigate further on that.

requirement 1: if you see my previous memo, i have written the below code:

"sap.ui.viewExtensions" : {

  "cross.fnd.approve.requests.view.S3":{

"CustomerExtensionForInfoTabContent": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cross.fnd.approve.requests.view.InfoFields",

  type : "XML"

  }

}

}

But i have the above code under customizing object in the component.js file. My component.js now looks like below.

Do you think this is correct?

/*

* Copyright (C) 2009-2014 SAP AG or an SAP affiliate company. All rights reserved

*/

// define a root UIComponent which exposes the main view

jQuery.sap.declare("cross.fnd.approve.requests.Component");

jQuery.sap.require("sap.ui.core.UIComponent");

jQuery.sap.require("sap.ca.scfld.md.ConfigurationBase");

jQuery.sap.require("cross.fnd.approve.requests.Configuration");

jQuery.sap.require("sap.ui.core.routing.Router");

jQuery.sap.require("sap.ca.scfld.md.ComponentBase");

// new Component

sap.ca.scfld.md.ComponentBase.extend("cross.fnd.approve.requests.Component", {

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

  "name": "Approve Requests", // F0392

  "version" : "1.2.9",

  "library" : "cross.fnd.approve.requests",

  "includes" : [

  ],

  "dependencies" : {

  "libs" : [

  "sap.m",

  "sap.me"

  ], 

  "components" : [

  ]

  },

  "config" : {

  "resourceBundle" : "i18n/i18n.properties",

  "titleResource" : "SHELL_TITLE",

  "icon" : "sap-icon://approvals",

  "favIcon" : "./resources/sap/ca/ui/themes/base/img/favicon/Approve_Requests.ico", //FIXME: should use F0392, but resource is not like that for W1s

  "homeScreenIconPhone" : "./resources/sap/ca/ui/themes/base/img/launchicon/Approve_Requests/57_iPhone_Desktop_Launch.png", //FIXME: should use F0392, but resource is not like that for

  "homeScreenIconPhone@2" : "./resources/sap/ca/ui/themes/base/img/launchicon/Approve_Requests/114_iPhone-Retina_Web_Clip.png", //FIXME: should use F0392, but resource is not like that for

  "homeScreenIconTablet" : "./resources/sap/ca/ui/themes/base/img/launchicon/Approve_Requests/72_iPad_Desktop_Launch.png", //FIXME: should use F0392, but resource is not like that for

  "homeScreenIconTablet@2" : "./resources/sap/ca/ui/themes/base/img/launchicon/Approve_Requests/144_iPad_Retina_Web_Clip.png", //FIXME: should use F0392, but resource is not like that for

  "startupImage320x460" : "./resources/sap/ca/ui/themes/base/img/splashscreen/320_x_460.png",

  "startupImage640x920" : "./resources/sap/ca/ui/themes/base/img/splashscreen/640_x_920.png",

  "startupImage640x1096" : "./resources/sap/ca/ui/themes/base/img/splashscreen/640_x_1096.png",

  "startupImage768x1004" : "./resources/sap/ca/ui/themes/base/img/splashscreen/768_x_1004.png",

  "startupImage748x1024" : "./resources/sap/ca/ui/themes/base/img/splashscreen/748_x_1024.png",

  "startupImage1536x2008" : "./resources/sap/ca/ui/themes/base/img/splashscreen/1536_x_2008.png",

  "startupImage1496x2048" : "./resources/sap/ca/ui/themes/base/img/splashscreen/1496_x_2048.png"

  },

  // Navigation related properties

  viewPath : "cross.fnd.approve.requests.view",

  detailPageRoutes : {

  "detail" : {

                "pattern" : "detail/{SAP__Origin}/{InstanceID}/{contextPath}",

                "view" : "S3",

  }

  },

  fullScreenPageRoutes : {

            "detail_deep" : {

               "pattern" : "detail_deep/{SAP__Origin}/{InstanceID}/{contextPath}",

               "view" : "S3",

            }

  },

  customizing : {

  "sap.ui.viewExtensions" : {

  "cross.fnd.approve.requests.view.S3":{

  "extMoreInfo": {

  className: "sap.ui.core.Fragment",

  fragmentName: "cross.fnd.approve.requests.view.CustomFrag1",

  type : "XML"

  }

   }

  }

  }

  }),

  /**

  * Initialize the application

  *

  * @returns {sap.ui.core.Control} the content

  */

  createContent : function() {

        var oViewData = {component: this};

       

  return sap.ui.view({

  viewName : "cross.fnd.approve.requests.Main",

  type : sap.ui.core.mvc.ViewType.XML,

  viewData : oViewData

  });

  },

  setDataManager : function(oDataManager) {

  this.oDataManager = oDataManager;

  },

  getDataManager : function() {

  return this.oDataManager;

  }

}

);

Best Regards,

Varun

Former Member
0 Kudos

I'm sorry , here below is the correct version.

jQuery.sap.declare("cross.fnd.approve.requests.Component");

jQuery.sap.require("sap.ui.core.UIComponent");

jQuery.sap.require("sap.ca.scfld.md.ConfigurationBase");

jQuery.sap.require("cross.fnd.approve.requests.Configuration");

jQuery.sap.require("sap.ui.core.routing.Router");

jQuery.sap.require("sap.ca.scfld.md.ComponentBase");

// new Component

sap.ca.scfld.md.ComponentBase.extend("cross.fnd.approve.requests.Component", {

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

  "name": "Approve Requests", // F0392

  "version" : "1.2.9",

  "library" : "cross.fnd.approve.requests",

  "includes" : [

  ],

  "dependencies" : {

  "libs" : [

  "sap.m",

  "sap.me"

  ],

  "components" : [

  ]

  },

  "config" : {

  "resourceBundle" : "i18n/i18n.properties",

  "titleResource" : "SHELL_TITLE",

  "icon" : "sap-icon://approvals",

  "favIcon" : "./resources/sap/ca/ui/themes/base/img/favicon/Approve_Requests.ico", //FIXME: should use F0392, but resource is not like that for W1s

  "homeScreenIconPhone" : "./resources/sap/ca/ui/themes/base/img/launchicon/Approve_Requests/57_iPhone_Desktop_Launch.png", //FIXME: should use F0392, but resource is not like that for

  "homeScreenIconPhone@2" : "./resources/sap/ca/ui/themes/base/img/launchicon/Approve_Requests/114_iPhone-Retina_Web_Clip.png", //FIXME: should use F0392, but resource is not like that for

  "homeScreenIconTablet" : "./resources/sap/ca/ui/themes/base/img/launchicon/Approve_Requests/72_iPad_Desktop_Launch.png", //FIXME: should use F0392, but resource is not like that for

  "homeScreenIconTablet@2" : "./resources/sap/ca/ui/themes/base/img/launchicon/Approve_Requests/144_iPad_Retina_Web_Clip.png", //FIXME: should use F0392, but resource is not like that for

  "startupImage320x460" : "./resources/sap/ca/ui/themes/base/img/splashscreen/320_x_460.png",

  "startupImage640x920" : "./resources/sap/ca/ui/themes/base/img/splashscreen/640_x_920.png",

  "startupImage640x1096" : "./resources/sap/ca/ui/themes/base/img/splashscreen/640_x_1096.png",

  "startupImage768x1004" : "./resources/sap/ca/ui/themes/base/img/splashscreen/768_x_1004.png",

  "startupImage748x1024" : "./resources/sap/ca/ui/themes/base/img/splashscreen/748_x_1024.png",

  "startupImage1536x2008" : "./resources/sap/ca/ui/themes/base/img/splashscreen/1536_x_2008.png",

  "startupImage1496x2048" : "./resources/sap/ca/ui/themes/base/img/splashscreen/1496_x_2048.png"

  },

  // Navigation related properties

  viewPath : "cross.fnd.approve.requests.view",

  detailPageRoutes : {

  "detail" : {

                "pattern" : "detail/{SAP__Origin}/{InstanceID}/{contextPath}",

                "view" : "S3",

  }

  },

  fullScreenPageRoutes : {

            "detail_deep" : {

               "pattern" : "detail_deep/{SAP__Origin}/{InstanceID}/{contextPath}",

               "view" : "S3",

            }

  },

customizing : {
"sap.ui.viewExtensions" : {
"cross.fnd.approve.requests.view.S3":{
"CustomerExtensionForInfoTabContent": {
className: "sap.ui.core.Fragment",
fragmentName: "cross.fnd.approve.requests.view.CustomFrag1",
type : "XML"
}
  }
}

}

  }),

  /**

  * Initialize the application

  *

  * @returns {sap.ui.core.Control} the content

  */

  createContent : function() {

        var oViewData = {component: this};

      

  return sap.ui.view({

  viewName : "cross.fnd.approve.requests.Main",

  type : sap.ui.core.mvc.ViewType.XML,

  viewData : oViewData

  });

  },

  setDataManager : function(oDataManager) {

  this.oDataManager = oDataManager;

  },

  getDataManager : function() {

  return this.oDataManager;

  }

}

);

Former Member
0 Kudos

Hi Varun

I mentioned this already in my response that you are not using correct fragment as I can see  from your last response. you need to prefix your Z component name when declaring your fragment name. Your sample mentioned below references std SAP component name which is not right as there is no such file there-->"cross.fnd.approve.requests.view.CustomFrag1"--> is not right as component name is incorrect( do not use std sap comp name).

Please use this extension point as I have mentioned in my example below:

"cross.fnd.approve.requests.view.S3": {

             

                "CustomerExtensionForInfoTabContent": {

                        className: "sap.ui.core.Fragment",

                        fragmentName: "zxyz.approve.frag.S3_CustomerExtensionForInfoTabContent",

                        type: "XML"

                }

        }

thanks

A

Answers (0)