Saipan WiFi

Design Hi-Fi Apps With SAPUI5

by Sirisha posted Jan 08, 2018 Views 92964 Replies 0


PrevPrev Article

NextNext Article


Larger Font Smaller Font Up Down Go comment Print Update Delete


In this digital era, IT tools has become very important for a web designer to design attractive functional sites/applications that can generate online traffic and interest among internet users. The User Interface (UI) design of your website plays a vital in building high traffic volume in the web. Hence, it is necessary for a web designer to select an effective and powerful UI tool to create an attractive UI designs and Applications.

SAPUI5 Overview:

SAP User Interface for HTML 5 (Well-known as SAPUI5) is a bundle of libraries that web developers can use them to frame mobile and desktop applications that run in a browser. SAPUI5 is a client User Interface technology based on HTML, Javascript and CSS. Apps build with SAPUI5 run in a browser on any device such as desktop, laptop, mobile or tablets etc. When internet users access SAPUI5 application, the request is send to the relevant server to load the app into the browser. The view approaches the respective library and retrieves the business data from the database. The libraries of SAPUI5 application can be stored on SAP Netweaver Application Server or SAP HANA cloud platform, in fact it depends on which environment SAPUI5 is used.




Among many UI tools in the market, only SAPUI5 has got more features than any other. Let us have a close look at them.

  • Cache Buster:

This allows SAPUI5 to inform the browser to revive the resources only when the UI5 resources have been changed. The resources can be retrieved from the browser until they are not changed. SAPUI5 aids the cachebuster concept for ABAP and Java servers and HANA cloud platform too.

  • Accessibility:

In an ongoing process, SAPUI5 aims to streamline with different products standards such as keyboard handling, screen reader support and high contrast theming.

  • Application Cache Buster:

In short this is also referred as App Cachebuster. This is used for application resources which looks similar to CacheBuster. SAPUI5 supports Appcache buster strategy for ABAP and Java servers and HANA cloud platform.

  • App Templates:

This includes SAP’s updated recommendations and can be used at any point of development, for instance starting point of developing app as per the SAP Fiori design guidelines. This also includes generic application capabilities and tests that can be easily stretched with custom functionalities as per the requirement.

  • Data Binding:

Data binding is used for joining two information sources or data sources together and synchronize them. So changes made in one data source will be reflected in the other data source as well. SAPUI5 allows data binding with JSON, OData, XML and other data formats. Data binding examples are shown in SAP UI5 Training with tutorials.

  • Component:

Components in SAPUI5 App are independent and reusable. SAPUI5 has two components, UI component and Faceless component. UI components represent an element or screen area on the UI, like a shell or a button, along with metadata and respective settings. Faceless components do not have UIs and are used as a service that dispatches data from the back-end database.

  • Controls:

These are used to detail the behaviour and appearance of the screen areas. Right from fundamental elements to high-end complex elements, SAPUI5 is constituted with more than 200 controls.

  • Templating:

This supports both XML and HTML templating. XML templating strategy helps to use XML view as a template. This templating is completely changed by an XML preprocessor on the source stage i.e., XML DOM at runtime prior to creation of SAPUI5 control tree from the XML source. HTML templating strategy enables you to combine text against properties in the model, text gets updated appropriately along with the change in property of the model.


In addition, there are also some more features such as Theming, Routing Pattern, Support tools, UI Adaptation, Testing, Resource Handling, Performance Measurement, Text Localization, Right to Left Support, Navigation and Model View Controller.