Show TOC

Best Practices for Developing ApplicationsLocate this document in the navigation structure

Best Practices for developing SAP Fiori apps that run in the SAP Fiori launchpad

Best practices intend to ensure that your apps run without side effects that may be difficult to analyze in the SAP Fiori launchpad:

  • Build your apps as self-contained SAPUI5 components.

    "Apps" in the SAP Fiori launchpad are SAPUI5 components. The launchpad instantiates your app by loading the Component.js file. Use an app-specific index.html file for standalone apps only. The unified shell does not load the application.js and index.html files.

  • Declare the configuration information, for example, the location of icons and library dependencies, in the application descriptor. For more information, see Descriptor for Applications, Components, and Libraries.
  • Do not use global variables. If you cannot avoid a global variable, use qualified names to ensure uniqueness.
  • If you need an event bus, use the event bus of the component (sap.ui.core.Component.getEventBus). By this, you avoid conflicting event names and make sure that your listeners are automatically removed when the component is unloaded. Do not use the global event bus (sap.ui.getCore().getEventBus()).
  • Register models on the root component or on single views of your apps.

    Example: this.getView().setModel("MyModel",aModel); Do not use sap.ui.getCore() to register models.

    Tip

    To get the component that owns an embedded view, you can use the following line of code in the view controller:

    sap.ui.core.Component.getOwnerComponentFor(this.getView());

    For more information, see Model View Controller (MVC) in the SAPUI5 Developer Guide.

  • Let SAPUI5 generate IDs for global elements.

    Do not set explicit IDs for global elements in your code. This may prevent you from running an app several times in the SAP Fiori launchpad. Do not rely on sap.ui.getCore().byId() for global location of elements. Always use local names getView().byId() and let SAPUI5 generate the IDs of views and components.

  • Use only the SAPUI5 APIs to manipulate the location hash.

    Do not read or write directly to window.location.hash or window.location. The SAP Fiori launchpad uses URL hashes for its own navigation. Direct manipulation of the location hash would interfere with the lauchpad navigation. For cross-app navigation, use the CrossApplicationNavigation service. For more information on this service, see sap.ushell.services.CrossApplicationNavigation .

  • Ensure that all controls created by your component are destroyed when the component is destroyed.

    All controls in the component's control tree that are defined in an XML view in a static way or explicitly added to a parent control in a JavaScript view are destroyed automatically. Controls that are not part of a parent, however, are not automatically destroyed, for example dialog instances. You ensure proper destruction by adding the respective controls to the corresponding view with the method addDependent of sap.ui.core.Element.

  • Avoid using sap.ui.localResources inside your Component.js file.

    sap.ui.localResources registers a path relative to the FioriLaunchpad.html page. Components must not make implicit assumptions on this location.

  • Avoid using jQuery.sap.registerModulePath inside your Component.js file. This creates a dependency to a specific platform.