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é
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.
Hi,
no, you can't apply the AppCacheBuster in the portal application directly.
How do you integrate the SAP UI5 resources?
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é
Thanks Rene! Working Perfectly .
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
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
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.