Skip to Content

Best practices to build apps with SAPUI5

This BLOG will Guide us what we need to keep in mind to build apps with SAPUI5. 🙂

Best practice 1: Determine View creation Approach early

  • In SAPUI5 view can be made using
    • HTML
    • XML
    • JSON
    • JavaScript
  • Choice is on skillet of development team.
  • XML is more simple and HTML can be embedded into an XML view

Features comparison among different view

JS view Advantages over others

XML view Advantages over others

  • Self-container registration of custom library locations
  • Properties of other types (object)
  • Multiple event listener and/or without scope
  • Customization data binding (formatter, data type, factory approach)
  • Dynamic control creation (based on model data, but outside data binding feature)
  • Templating
  • Code completion (Eclipse)
  • Embedded HTML (without use of HTML control)
  • Code completion (Eclipse) with limitation
  • Validation

Best practice 2: Ensure Application Independence

  • The application should be accessible via an icon / a bookmark
  • Index.html should be the delivery mechanism for the appà
  • Build the app so that you can take its functionality and embed it to into any other structure such as the Fiori launch pad, the HTML – based user facing component.

Best practice 3: Use of Component to Encapsulate the App

  • An app developed that is independent can typically be build by separate teams working on pieces of the overall functionality
  • Requires building the app using the component concept
  • The component approach allows you to run the app within a standalone HTML page or within larger context such as the Fiori Launch pad.

Makeup of the componenet.js

General information

  • Include metadata such as app name , version , library dependencies
  • Specially the rootView to be displayed
  • In the example seen on the prior page , there was no rootView element.
  • createContent function is used instead of rootView
  • createContent allows you more flexibility in the how the view is built

Config Information

  • Can specify information like the name of the resource bundle being used for internationalization
  • Can specify the URL of an OData service of the model
  • Both pieces of config information could also be performed in the createcontent function mentioned above

Routing Information

  • Requires for book marking and resuming application UI state.

Best Practice 4: Minimal code in index.html

  • Only these bare essentials should be in the index.html
    • Meta
    • The UI5 bootstrap code which loads the UI5 runtime core
    • HTML Body containing the declaration of one or more UI-areas.
    • Minimal logic to point to the componentContainer

Best Practice 5: Make the App Addressable, UI-Focused and responsive

  • Allows for “deep linking”
    • Where the user can bookmark places in an app and be able to come back and pick up where they left off.
    • Do not requires that the user has to start at the top page of a website and descend through multiple link just to get information about specific page.
  • Focus on the UI by the following MVC approach in keeping data model handling, the UI logic separate.
  • Build the app so that it makes the best use of available screen real-estate and navigation regardless of the device(Phone ,tablet ,desktop)
    • Make use of the sap.m library which was designed from the ground up to support this requirement.
    • Create a “Device model” that will allow you to determine things such as if the device is touch-capable.

Device model

  • sap.ui.Device library allows you to determine various runtime platform characteristics
  • These characteristics are stored in a client-side JSON model
  • This model is defined in Component, as seen below, & then is used throughout  application
  • Example of device model in List control’s mode attribute

Best Practice 6: Localization support

  • Driven explicitly or via the user’s locale settings.
  • Sap.m.controls support right –> left language
  • Manage the static text of the app separately, in a way that they can be easily swapped from different locale.

Best Practice 7: Make the use of patterns like master details.

  • A master detail is a very commonly used designed pattern.
  • List shown in the master and information about the selected item shown in the details
  • Supported by sap.m.SplitApp control
  • SplitApp is a container control which has 2 sections in the form of aggregations master and details page.

Best Practice 8:  create custom utilities to share code

  • When developing an app there is always a need to reuse javascript coding across multiple views/controllers
  • Store such code in separate files in a util folder

Thanks Note

Thanks to  for providing such a good information.

Thanks to Avijit Dhar of IBM for his help while Learning SAPUI5 App Development.

A Big Thanks to Dipankar Saha and Sudipta Mukherjee from IBM who always encourage me to write such blog.

You must be Logged on to comment or reply to a post.