Extending my fiori inbox app.

[Former Member]

Hi everyone,

     I am new to SAP UI5 development and my first engagement with this new tech is with fiori my inbox app. My team and I already did some changes with the app via extensions but there's one thing left we want to do: to create an additional view to be used in the detail page(ie:s4.view.xml). Is this possible? If yes, how are we gonna add the view in the routes of the component.js of my extended app given that it is only an extended app? We already tried the standard route configuration below but ofcourse it didn't work:

jQuery.sap.declare('hpc.extend.myinbox.Component');
var compPath = jQuery.sap.getModulePath('hpc.extend.myinbox');
jQuery.sap.registerModulePath('cross.fnd.fiori.inbox',compPath+'/../ca_fiori_inbox');  //Setting the path /sap/bc/ui5_ui5/sap/ca_fiori_inbox
//jQuery.sap.require('cross.fnd.fiori.inbox.Component'); // - To load Component.js and all subsequent js and xml files as separate files
sap.ui.component.load({name:'cross.fnd.fiori.inbox'});  // - To load Component-preload.js which contains everything 
cross.fnd.fiori.inbox.Component.extend('hpc.extend.myinbox.Component', {
 metadata : {
  name: 'Custom Component extended from cross.fnd.fiori.inbox.Component',
  version : '1',
  includes: ['css/pldtStyles.css'],
  config: {resourceBundle:jQuery.sap.getModulePath('cross.fnd.fiori.inbox')+'/i18n/i18n.properties',   //To avoid the i18n files refered under ZCA_F_INBOX_EXT
   serviceConfig : {
    name: "ZGWFI_VIEWACCTGDOC_SRV",
    serviceUrl: "/sap/opu/odata/sap/ZGWFI_VIEWACCTGDOC_SRV/"
   }
  }, //To avoid the i18n files refered under ZCA_F_INBOX_EXT
  customizing: {      
      "sap.ui.viewExtensions": {
          "cross.fnd.fiori.inbox.view.S3": {
              "CustomerExtensionForInfoTabContent": {    //Extension point name
                  className: "sap.ui.core.Fragment",
                  fragmentName: "hpc.extend.myinbox.view.S3Extn",
                  type: "XML"
              },
              "CustomerExtensionForObjectHeader": {    //Extension point name
                  className: "sap.ui.core.Fragment",
                  fragmentName: "hpc.extend.myinbox.view.S3ExtnHdr",
                  type: "XML"
              }
          }
      },
      
      "sap.ui.controllerExtensions": {
          "cross.fnd.fiori.inbox.view.S3": {
              controllerName: "hpc.extend.myinbox.view.S3Extn"
          },
          "cross.fnd.fiori.inbox.view.S2": {
              controllerName: "hpc.extend.myinbox.view.S2Extn"
          }
      }
      
      
  },
  routing : {
            // The default values for routes
            config : {
                "viewType" : "XML",
                "viewPath" : "hpc.extend.myinbox.view",
                "targetControl" : "fioriContent", // This is the control in which new views are placed
                "targetAggregation" : "pages", // This is the aggregation in which the new views will be placed
                "clearTarget" : false
            },
   routes : [
    {
     pattern : "samplePattern",
     name : "S4",
     view : "S4"
    }
   ]
        }
  
 }
});

     Basically i just need the proper implementation of adding view to the routes of component.js of my extended app if adding view to standard apps if possible. Hope to get feedback re my concern. Thanks!

[former_member182372]

so what exactly is not working?    when you have "#samplePattern" pattern, it doesnt navigate to s4?

[Former Member]

Hi Maksim,

     Actually what happens is that when i open the inbox itself, the application directly go to the s4 view. I believe the pattern has nothing to do with this behavior? Am i missing any config here in the routes so the the s4 view should only appear once i select a row in the detail view. Please take note that even i manage to navigate from s3(detail view) going to s4, the master detail should be retained(desktop scenario).

[Former Member]

Hi Henry,

To add a view to the standard Fiori app and for the master-detail app you should have this in your extended Component.js:

routing: {

     "routes":{

          "masterDetail": {

               "subroutes": {

                    "master": {

                         "subroutes":{

                              "detailS4":{

                                   "pattern":    //the pattern that you want to have for your new view S4

                                   "viewPath": //the path for your view, in your case I think it will be something like hpc.extend.myinbox.view

                                    "targetAggregation": "detailPage",

                                    "view": "S4",

                                     "viewLevel": 2,

                              }

                         }

                        }

                    }

               }

          }

    }

---------

Now you can call this new view:

     this.oRouter.navTo("detailS4",{

                         pattern: //if any

                    });

Best regards,

Frederico

[former_member182645]

did you found any solution?

@Frederico Rocha    

we have same kind of requirement

how to add new view in leave request extended app.

[Former Member]

Hi radhesh,

Did you try what I explained above?

Best regards,

Frederico

[former_member182645]

hi @Frederico Rocha

im just confuse,

i already extend leave request app so , i have to add in extended apss or in orginal apps?

this is extend controller

config: {

            "sap.ca.i18Nconfigs": {

                "bundleName": "hcm.emp.myleaverequests.leaverequestExtension.i18n.i18n"

            }

        },

        customizing: {

            "sap.ui.viewModifications": {

                "hcm.emp.myleaverequests.view.S1": {

                    "LRS4_FELEM_TIMEINPUT": {

                        "visible": false

                    },

                    "LRS4_DAT_STARTTIME": {

                        "visible": false

                    },

                    "LRS4_DAT_ENDTIME": {

                        "visible": false

                    },

                    "LRS4_LBL_STARTTIME": {

                        "visible": false

                    },

                    "LRS4_LBL_ENDTIME": {

                        "visible": false

                    }

                }

            },

            "sap.ui.controllerExtensions": {

                "hcm.emp.myleaverequests.view.S1": {

                    controllerName: "hcm.emp.myleaverequests.leaverequestExtension.view.S1Custom"

                },

                "hcm.emp.myleaverequests.view.S6B": {

                    controllerName: "hcm.emp.myleaverequests.leaverequestExtension.view.S6BCustom"

                }

[former_member182645]

and not see like routing:

[former_member182645]

its in main app.

"config": {

            "titleResource": "app.Identity",

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

            "icon": "sap-icon://Fiori2/F0394",

            "favIcon": "./resources/sap/ca/ui/themes/base/img/favicon/My_Leave_Requests.ico",

            "homeScreenIconPhone": "./resources/sap/ca/ui/themes/base/img/launchicon/My_Leave_Requests/57_iPhone_Desktop_Launch.png",

            "homeScreenIconPhone@2": "./resources/sap/ca/ui/themes/base/img/launchicon/My_Leave_Requests/114_iPhone-Retina_Web_Clip.png",

            "homeScreenIconTablet": "./resources/sap/ca/ui/themes/base/img/launchicon/My_Leave_Requests/72_iPad_Desktop_Launch.png",

            "homeScreenIconTablet@2": "./resources/sap/ca/ui/themes/base/img/launchicon/My_Leave_Requests/144_iPad_Retina_Web_Clip.png"

        },

        viewPath: "hcm.emp.myleaverequests.view",

        masterPageRoutes: {

            "master": {

                "pattern": "history",

                "view": "S3"

            }

        },

        detailPageRoutes: {

            "detail": {

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

                "view": "S6B"

            }

        },

        fullScreenPageRoutes: {

            "home": {

                "pattern": "",

                "view": "S1"

            },

            "change": {

                "pattern": "change/{requestID}",

                "view": "S1"

            },

            "entitlements": {

                "pattern": "entitlements",

                "view": "S2"

            }

        }

    }),

[Former Member]

Hi radhesh,

You need to add to your extended Component.js

You will need to add here:

config: {

            "sap.ca.i18Nconfigs": {

                "bundleName": "hcm.emp.myleaverequests.leaverequestExtension.i18n.i18n"

            }

        },

routing: {

     "routes":{

          "masterDetail": {

               "subroutes": {

                    "master": {

                         "subroutes":{

                              "detailS4":{

                                   "pattern":    //the pattern that you want to have for your new view S4

                                   "viewPath": //the path for your view

                                    "targetAggregation": "detailPage",

                                    "view": "S4",

                                     "viewLevel": 2,

                              }

                         }

                        }

                    }

               }

          }

    }

        customizing: {

            "sap.ui.viewModifications": {

                "hcm.emp.myleaverequests.view.S1": {

                    "LRS4_FELEM_TIMEINPUT": {

                        "visible": false

                    },

                    "LRS4_DAT_STARTTIME": {

                        "visible": false

                    },

                    "LRS4_DAT_ENDTIME": {

                        "visible": false

                    },

                    "LRS4_LBL_STARTTIME": {

                        "visible": false

                    },

                    "LRS4_LBL_ENDTIME": {

                        "visible": false

                    }

                }

            },

            "sap.ui.controllerExtensions": {

                "hcm.emp.myleaverequests.view.S1": {

                    controllerName: "hcm.emp.myleaverequests.leaverequestExtension.view.S1Custom"

                },

                "hcm.emp.myleaverequests.view.S6B": {

                    controllerName: "hcm.emp.myleaverequests.leaverequestExtension.view.S6BCustom"

                }

[former_member182645]

"routes":{

          "masterDetail": {

               "subroutes": {

                    "master": {

                         "subroutes":{

                              "detailS4":{  <---- NEW VIEW

                                   "pattern":    //the pattern that you want to have for your new view S4

                                   "viewPath": //the path for your view

                                    "targetAggregation": "detailPage",

                                    "view": "S4",

                                     "viewLevel": 2,

                              }

                         }

                        }

                    }

               }

          }

    }

IN THIS

"detailS4":{  <---- NEW VIEW,  which is navigate from master view right?

here in leave request

we have

[Former Member]

Right!

[former_member182645]

Thanks for the help Fredrico,

We are able to navigate, but not to the newly created view. We are being taken to the Leave history page i.e the S3 view.

Also do we need to implement the handleRouteMatched and hashchanger in the newly created views controller.

Many thanks for your help

[former_member182645]

this is what we are trying

   "routes":{

          "masterDetail": {

               "subroutes": {

                    "master": {

                         "subroutes":{

                              "holiday":{

                                   "pattern":   "holiday",

                                   "viewPath": "hcm.emp.myleaverequests.view.holiday",

                                    "targetAggregation": "detailPage",

                                    "view": "holiday",

                                     "viewLevel": 2

                              }

                         }

                        }

                    }

               }

          }

    },

our view name is holiday

Thanks

[Former Member]

Is this "hcm.emp.myleaverequests.view.holiday" the namespace of your extending project? I don't think so... I think that is the namespace of the standard App.

Yes you need to implement the handleRouteMatched.

[michal_keidar]

Maybe you can extend the detail controller and add logic there that will navigate to a new view?

[Former Member]

Hi Michal,

     I cannot do the navigation thing in the detail controller if i haven't add the s4 view yet in the routes. I guess i am missing a certain config in my routes since when i open the my inbox app, it directly goes to the s4 view instead to the master/detail view.