Consuming APF

The following code snippet is an example of how to consume APF in a UI5 based application:

jQuery.sap.declare("myApp.Component");
sap.ui.getCore().loadLibrary("sap.apf");
jQuery.sap.require("sap.apf.Component");
 
sap.apf.Component.extend("myApp.Component", 
{
        metadata : {
            name : <name>,
            version : <version>
        },
        /**
        * Initialize the application
        *
        * @returns 
        */
        init : function() {
            // Initialize application here. No APF specific operation done here, since APF API is not yet available.
            // Call APF Component init
            sap.apf.Component.prototype.init.apply(this, arguments);
        },
        /**
        * Creates the application layout and returns the outer layout of APF 
        *
        * @returns {sap.ui.core.Control} the content
        */ 
        createContent : function() {
            // Attach APF start-up callbacks
            this.getApi().setCallbackBeforeApfStartup(this.onBeforeApfStartup);
            this.getApi().setCallbackAfterApfStartup(this.onAfterApfStartup);
 
            // Prepare path to application configuration file 
            var modPath = jQuery.sap.getModulePath('myApp');
            var configFilePath = modPath + "/config/myApplicationConfiguration.json";
            this.getApi().loadApplicationConfig(configFilePath);
 
            // Return whatever is returned by parent (APF Component) createContent method
            return sap.apf.Component.prototype.createContent.apply(this, arguments);
        },
 
        onBeforeApfStartup: function() {       //optional
            // Code executed before APF startup
        },
 
        onAfterApfStartup: function() {        //optional
            // Code executed after APF startup
        },
        destroy : function() {
            // Destroy application instances
 
            // Call destroy on APF Component
            sap.apf.Component.prototype.destroy.apply(this, arguments);
        }
    });

Replace myApp with the application-specific namespace.

Method this.getApi() provides a reference to the APF instance.

When you use the start parameter sap-apf-app-config-path, APF executes method loadApplicationConfig() in the init() method of sap.apf.Component, that is, before createContent() of the application component is executed. APF ensures that method loadApplicationConfig() is executed not more than once.

The function registered through onBeforeApfStartup is executed after the execution of method init(), at the beginning of method createContent() of sap.apf.Component. This registered function is useful, for example, for defining application-specific filters.

The function registered through onAfterApfStartup is executed after all asynchronous startup operations have been terminated, that is, at the end of method createContent() of sap.apf.Component. This registered function is useful, for example, for adding footer content to the APF UI.

Footer Content

You can add footer content to your APF-based application, for example, to allow users to make settings such as defining a reporting currency or adjusting the exchange rate settings.

To add footer content, attach the following APF start-up callbacks at APF API level in the Component.js file inside the createContent() method:

1. setCallbackBeforeApfStartup, where you can build footer controls.
2. setCallbackAfterApfStartup, where you can insert the footer content into the UI layout using the addMasterFooterContent API.

Footer controls need to register a listener to the contextChanged event of APF to listen to context changes at startup or when a saved path is opened. The event listener for the contextChanged event is defined as follows: oApi.setEventCallback(oApi.constants.eventTypes.contextChanged,fnCallbackForContextChange);