Extending SAPUI5 Apps - Component Configuration



This blog relates to how, component file needs to be configured, when an application is to be extended. Hope, you have followed my previous blogs on extending sapui5 application. The component configuration contains the information about the extension metadata and the objects that are replaced or extended in the custom view or control.

The configuration is stored in the component.js file of the custom application. The component of the custom application needs to inherit from the main component of the original application. To make the location of the original application or component known to SAPUI5, it may be necessary to use registerModulePath(...). The configuration in the customizing section contains the extension metadata and describes the objects that are replaced or extended.

The following code snippet shows an example of a configuration structure.

some.sap.Component.extend("some.customer.Component", {
   
    metadata : {
        .....some configuration
        config: {
            .....some configuration
        },
        customizing: {
                     
            "sap.ui.viewExtensions": {       
                "samples.components.ext.sap.Sub2": {   
                    "extension2": {   
                        className: "sap.ui.core.Fragment",   
                        fragmentName: "samples.components.ext.customer.CustomFrag1",
                        type: "XML"
                    },   
                    "extension3": {   
                        className: "sap.ui.core.mvc.View",
                        viewName: "samples.components.ext.customer.CustomSubSubView1",           
                        type: "XML"
                    }   
                },
                "samples.components.ext.sap.Sub4": {
                    "extension4": {
                        className: "sap.ui.core.Fragment",
                        fragmentName: "samples.components.ext.customer.CustomFrag2",
                        type: "JS"
                    }
                }
            },
           
            "sap.ui.viewModifications": {       
                "samples.components.ext.sap.Sub3": {   
                    "someCustomizableTextControl": {   
                        "visible": false
                    }
                }   
            },

            "sap.ui.viewReplacements": {
                "samples.components.ext.sap.Sub1": {
                    viewName: "samples.components.ext.customer.CustomSub1",
                    type: "XML"
                }
            },
           
            "sap.ui.controllerExtensions": {   
                "samples.components.ext.sap.Main": {
                    "controllerName": "samples.components.ext.customer.MainExtension"
                }
            }
        }
    }
});

So here, the first highlighted section, is the section where we have to mention our extension paths, where and what type of extensions are to be done, it could be view extension, controller extension, view Replacement, view modification.

"sap.ui.viewExtensions": Provides custom view content in a specified extension point in the delivered standard application
"sap.ui.viewModifications": Used for overriding control properties of the delivered standard application
"sap.ui.viewReplacements": Used for replacing a standard view with a custom view
"sap.ui.controllerExtensions": Used for extending a standard controller with a custom controller

Hope, you understood how to configure the component.js file for extending view, controller, or modification or replacement of views. So in my next tutorial blog, I will tell you about extension point in views and basically how to extend a view.
Previous
Next Post »