Skip to Content
Author's profile photo Rene Jurmann

Enabling Cache Buster for SAP NetWeaver Portal components based on SAPUI5

Hi all,

There are many ways how to create SAPUI5 applications. In one of our projects we came across a situation where the data which should be displayed or modified in the SAPUI5 component was retrieved from a SAP NetWeaver Portal, only. Therefore we decided to create a PortalAbstractComponent which will be the basic container for the SAPUI5 component to be displayed. Meaning, the PortalAbstractComponent includes a JSP or HTML which will implement the SAPUI5.

How to implement/call a SAPUI5 component from any HTML can be found here:

https://sapui5.netweaver.ondemand.com/#docs/guide/3da5f4be63264db99f2e5b04c5e853db.html

 

We then created an iView from the PortalAbstractComponent and added this to a user role. The SAPUI5 was displayed as expected and all worked fine.

But somewhen we needed to change the SAPUI5 due to a change request. And now we recognized that caching was an issue. All changes to client side files (such as JavaScript or View XML files) were not visible to the end user without deleting the browser cache. We checked various SCN and SAP Help entries and found following entry for the SAP Cache Buster in SAP Help:

https://help.sap.com/saphelp_nw74/helpdata/en/ff/7aceda0bd24039beb9bca8e882825d/frameset.htm

 

Unfortunately, this SAP Help entry is not very precise when it comes to SAP NetWeaver Portal applications. It can be used for standard JEE applications but not for Portal applications based on AbstractPortalComponent. The problem with such Portal applications is that for those applications you can’t modify the web.xml. But according the SAP Help you need to add some filter here.

That’s why we create this blog to describe how to create a Portal application implementing SAPUI5 and using the SAP Cache Buster.

 

For the impatient in short – create two new projects:

  • a J2EE Web Module project containing the custom SAPUI5 resources and the modified web.xml
  • a J2EE Enterprise Application project needed as transport container to deploy the Web Module

 

 

The Portal Application Project will only contain the Java Resources retrieving the data and initializing the SAPUI5 resources. For initializing the SAPUI5 resources we added following the the <head> part within the HTML DOM tree

<script src="/sapui5/resources/sap-ui-cachebuster/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="<custom-theme>@/com.sap.portal.theming.webdav.themeswebdavlistener" data-sap-ui-libs="sap.m, sap.ui.core" data-sap-ui-compatversion="edge" data-sap-ui-versionedlibcss="true" data-sap-ui-appcachebuster="./"></script>

Replace “<custom-theme>” with the according theme ID.

 

Now create a J2EE Web Module project and paste all custom SAPUI5 files below “WebContent” folder. Thereby following files must be placed directly below the “WebContent” folder:

  • Component-preload.js (if used)
  • Component.js
  • manifest.json

All other files can be structured in sub folders as needed.

Modify the web.xml of the Web Module project located below “WebContent > WEB-INF” as described in SAP Help

https://help.sap.com/saphelp_nw74/helpdata/en/90/a0e440cdc143a48c0a5b395dcb7828/frameset.htm

 

As the Web Module can’t be deployed you need to create a J2EE “Enterprise Application” Project. Here you need to reference the Web Module project.

 

In order to call the custom SAPUI5 within the Web Module we added a <script> block to the HTML output:

	sap.ui.getCore().attachInit(function () {
		
		var resource = {};
		resource.url = "/<web-module-path>";
		resource.final = true;
		
		jQuery.sap.registerModulePath("my.custom.SAPUI5", resource);
		sap.ui.core.AppCacheBuster.register(resource.url);
		
		new sap.ui.core.ComponentContainer({
			name : "my.custom.SAPUI5"
		}).placeAt("someDivId");
		
	});

The “resource.url” must point to the basic web path of the web module. It must not point to any subfolder as the SAP Cache Buster only checks the root path for an application.

As we have multiple portal components using SAPUI5 we register each SAP Web Module for the SAP Cache Buster using:

sap.ui.core.AppCacheBuster.register(resource.url);

 

If we now deploy the Portal Application Project and Enterprise Application project the Cache Buster is working as expected.

Additionally: You do not need to create a file “sap-ui-cachebuster-info.json” as indicated by the SAP Help. This file will be generated automatically by the Cache Buster.

 

Hope, this helps if you need to create Portal Applications using SAPUI5.

 

 

regards

René

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Rene,

       

      Thanks for the blog. It suits our requirement. We are following the same approach.

      But after deploying both the projects(Web module proj and Enterprise application proj),I am getting blank screen. In F12 developer tool, i got below error

      Uncaught TypeError: Cannot read property 'register' of undefined at line

      sap.ui.core.AppCacheBuster.register(resource.url);

      and getting blank screen while running the application.

      Can you please explain in which project I need to add the section

      "sap.ui.getCore().attachInit(function()" under <script>.

       

      Is there any other way to apply cache buster in portal application instead of creating web-module and Enterprise application projects.

      Waiting for your reply.

       

      Thanks in Advance.

       

       

      Author's profile photo Rene Jurmann
      Rene Jurmann
      Blog Post Author

      Hi,

      no, you can't apply the AppCacheBuster in the portal application directly.

      How do you integrate the SAP UI5 resources?

      • Ensure the "src" property includes "sap-ui-chachbuster" and add a property for "data-sap-ui-appcachebuster".
      • Ensure SAPUI5 is loaded before calling the according JS methods

       

      Additionally, what is missing in the blog above:

      All projects (Portal application as well as web module and Enterprise application) should have a dependency to SAP standard DC "UISAPUI5_JAVA - ui/five"

       

      The script block for the "sap.ui.getCore().attachInit(function()" is added to the HTML output of the Portal Application (AbstractPortalComponent). So, you can include a JSP or HTML to the response of the AbstractPortalComponent and add this script block here.

       

      regards

      René

      Author's profile photo Former Member
      Former Member

      Thanks Rene! Working Perfectly .

      Author's profile photo Peter Muessig
      Peter Muessig

      Hi René,

      please keep in mind that the Application Cachebuster in NW Java only works as a side-effect (that you can refer to UI5 DC). Officially the Java Filter was never rolled out to customers – but at least it works with your trick. The documentation of NW 7.4 states this by accident and with NW 7.5 and in SAP Cloud Platform this documentation issue has been corrected.

       

      NW 7.5: https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.5.3/en-US/ff7aceda0bd24039beb9bca8e882825d.html

       

      SAP CP: https://sapui5.hana.ondemand.com/#docs/guide/ff7aceda0bd24039beb9bca8e882825d.html

       

      Best regards,

      Peter

      Author's profile photo Christian Schuff
      Christian Schuff

      Hi Peter,

      can you elaborate on the 'why'?

      It seems so easy to activate AppCacheBuster on Java Stack and it is so painful to NOT have it. You can't explain your customers to always clear their browser cache... SAP needs to provide a solution for this.

      BR

      Chris

      Author's profile photo Lakshmikanthaiah S
      Lakshmikanthaiah S

      Thanks a lot for sharing the Solution.

       

      Include the property data-sap-ui-appcachebuster and updated the web.xml with appcache filters.

      And my long term issue resolved.

       

      Big Kudos to you.

       

      Thanks again.