Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 

Introduction


In this article, we would like to throw some insights, tips and suggestions that can improve the performance and experience of the List Report Object Page application.

Prerequisites


You should be familiar with SAP Fiori elements List report object page floor plan and configuration options available with a manifest.json

Language fallback i18n properties files


If the application has not translated and has only one i18n.properties file. By default UI5 look for the language set in the browser and runtime will try to load the best match. First, it will try with language set “en_US”, fallback to plain English “en” and at the last, it will try to load plain i18n.properties file.


We can fix this easily by renaming the i18n file to i18n_en.properties. While bootstrapping the application, configure to use only “en” as language
<!– Bootstrapping UI5 –> 
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_belize" data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-language="en"
data-sap-ui-resourceroots='{"myapp": "."}'> </script>

data-sap-ui-language= "en”

It would save ~350ms.

Eliminate all 404s


It depends a lot on your application. We should try to understand the reason for each and every 404 which occurs as part of the application startup and try to get rid of it.

Every 404 will be fired for every user every time as they are not cached.


Go through each network 404 calls and try to understand. There could be two possibilities-

  • Resource not required

  • Resource URI is wrong


Make the necessary change, it would save roughly ~150ms each 404 calls.

Metadata and XML view caching


Every UI5 Fiori application manifest.json contains information about data sources and the URI listed there is the basis of metadata and annotation requests. If service metadata were not changed all the requests will return an empty 304 (Not Modified) response and the browser takes the files from its cache.

Nevertheless, the processing of the metadata and annotations in the browser has to wait until the round trip to the server is returning.

To avoid these round trips the cache buster technique is used to ensure a client-side caching without having conditional requests.

This process is described in the documentation “Cache Buster for OData Metadata” and “XML View cache”.

Based on a regularly running report that collects the last modification date of all OData service metadata and annotations on the Frontend Server all requests get an additional URL parameter sap-context-token containing this last modification information.

Since the metadata are a client and language-dependent the URL parameters sap-client and sap-language have to be added as well. So every change in the metadata results in a new URL and hence it can be cached completely on the client.

Better data visualization


When we open the Object page in the FCL (Flexible column layout) layout with more no. of columns in the LR table, the entire layout gets clumsy, it is very difficult to see the values.

For better user experience you can use UI.Importance annotation settings-

  • If UI.Importance is not set, the default value is High and the column is visible on all devices.

  • If UI.Importance is set to High, the column is visible on all devices.

  • If UI.Importance is set to Medium, the column is visible on desktops and tablets.

  • If UI.Importance is set to Low, the column is visible only on desktops.


Please refer here for example.

Table control with default settings


In LR and OP, we have smart table control & if you have modified/using the following properties. It will have a significant impact on control load time.

  • Growing threshold -

    • The growing threshold should not be changed and the default value should be 20 for the best performance.



  • No. of columns (custom columns)

    • If possible restrict the column count to be 6 or less and avoid the addition of custom columns.



  • Extension onBeforeRebindTableExtension

    • Please be cautious and only if you cannot produce the required behavior by other means.




Preload Object Page resources


There are lots of dependencies loaded for the application. Either by the FLP and by the app. When we navigate to the detail page. Sometimes, some of the un-cached resources get loaded slowly which affects the overall navigation performance (UI exclusive time).

UI5 loads the app’s dependencies before loading the app if they are declared correctly in the manifest. If we mark lazy false it will be loaded with the app load.
"sap.ui5": {
...
"dependencies": {
"libs": {
...
"sap.uxap": {
"lazy": false
}
}
}
}

 

Object page with more no. of sections


When Object Page is loaded and rendered a specific optimization is applied to control the number of sequential roundtrips. With the start of the OP two requests are sent out in parallel, one for the header content and the other for sections 1 and 2 (considering both the section are on viewport area). The following sections are loaded in a "lazy loading" manner after they're detected to be visible.

This leads to additional sequential roundtrips and in turn more UI exclusive time.

Enable IconTabBar mode for Object Page Layout. It easily displays the header and a single section at a time.

If enabled, the sections are displayed separately on each tab rather than having all of them visible at the same time.

Read more here

Note: Must consult with your UX, if there is less content on the section remaining area on viewport would be left blank.  Please use UI adaptation to enable this feature.

Avoid custom coding


Fiori elements, the main idea to avoid custom coding and minimize the effort to build UI5 applications by using metadata.

E.g. Deleting the multiple objects in the List Report page is now supported with any custom code.

Before implementing the break-out code, Refer to the Fiori elements feature map documentation page for the existing features.

Reach out to the Fiori Elements team and get the alternatives or it could be part of the standard template.

Lazy loading – reuse/custom components


When we have an Object page with Custom facets and reuse component, you observe the OData model call would be fired even though the section is not in the viewport area.

Subsequently, it will increase the UI exclusive time.

Custom facet section – Enable the lazy loading in the manifest.


Reuse component section – Make sure the OData model calls are fired when the section on the visible area.

Please refer here

Conclusion


Understanding the problem is helpful for performance optimization, especially in complex scenarios.

We look forward to your feedback. Please feel free to post your feedback on this blog post.

Thank you very much!
1 Comment