sapui5sap-fiori

Extending SAP Fiori App - Adding button in the footer

I am extending hcm.emp.payslip app and need to add a button in the footer....what is the right way of doing it?..

option 1: placing a extension point as described in page 13 of this pdf.. -- it didnt work..I followed exactly the steps mentioned. or will this not work as we are inserting an extension point ourselfs and which is not supported now.?

option 2: extending UI controller hooks as described here -- I couldnt try this as the documentation is very brief and I am a beginner...Also I am not sure if we can change the view by extending controller

I am using eclipse, and installed the Tool kit plug-in, some places I saw they recommended using Web IDE, but we would like to do it using tool kit, as I am not sure if we have cloud HANA access. or is it still fine to use the UI tool kit way..

would like to suggest the right approach with detailed steps...

Solution

  • Your Option 1 is not possible(Why? Because to add button to the footer there is controllerHook not UI extension point)

    Go with Option 2 there are already extensionHooks given in all the controllers (S3.controller.js and in S3_phone.controller.js) of detail pages of the application.

    controllerHook : extHookChangeFooterButtons

    by Default SAP builds headerFooterOptions and sends that object to your extension Hook

    /**
         * @ControllerHook Modify the footer buttons
         * This hook method can be used to add and change buttons for the detail view footer
         * It is called when the decision options for the detail item are fetched successfully
         * @callback hcm.emp.payslip.view.S3_Phone~extHookChangeFooterButtons
         * @param {object} objHdrFtr-Header Footer Object
         * @return {object} objHdrFtr-Header Footer Object
         */

        if (this.extHookChangeFooterButtons) {
            objHdrFtr = this.extHookChangeFooterButtons(objHdrFtr);
        }

    So you in the extended controller, receive the same append:

    extHookChangeFooterButtons: function (objHdrFtr) {
    //first if the buttonsList is empty, create one. 
    //Actually in S3.controller.js buttonsList is not defined since there are no buttons
    if (!objHdrFtr.buttonList) {
        objHdrFtr.buttonList = [];
    }
    //then create a button:
    var extendedButton = {
        sId: "EXT_BUTTON",
        sI18nBtnTxt: "SAMPLE", //make sure you add texts in respective i18n files
        bEnabled: true,
        onBtnPressed: function (evt) {
            that.handleExtButtonPress(evt);
        }
    };
    objHdrFtr.buttonList.append(extendedButton)
    //as you can see SAP says to return the object
    return objHdrFtr;
}

    Suggestion: Its very easy to do it in Web IDE. Why?