About this blog
This blog/document shows a compact and (hopefully newbie-friendly) approach for adding new / additional SAPUI5 versions (sources) to a SAP Web IDE Personal Edition and making these sources available for the Web IDE's runtime.
Almost all of the information within this blog is already available on the Community Forums and through wikis and official documentation, so the blog serves as a means of consolidation depicting one particular use case.
This blog does not cover the initial setup and configuration of the Web IDE PE. If you are looking for information to do that, I'd highly recommend this blog written by florian.henninger which covers pretty much all practical problems you might be facing which are not handled in the official documentation.
I've used a 64-bit installation for Windows of the "Productive Use" variant on version 1.53.1. The following content might not apply for a different version.
1. Downloading sources
1.1. Download your desired Version of the UI5 sources from the same page you got your Web IDE archive from, i.e. from here. If you solely need the sources you can download the runtime archive. I, however, downloaded the entire SDK because it contains some nice testing files and tons of well written documentation.
1.2. Extract the archive somewhere.
2. Adding sources to the Web IDE
2.1. Copy the folders "resources" and "test-resources" from the extracted archive from step 1. If you have downloaded the runtime archive, these folders will be the only ones available. The following Screenshot is taken from an extracted SDK archive and in my use case I wanted to add the version 1.52.8.
2.2. In your Web IDE file structure, from its root path, go to \eclipse\plugins\com.sap.webide.orionplugin_<version>\ui5. Create a new folder and name it according to the UI5 version you are about to paste in. Navigate into that folder and paste in the two folders copied from step 2.1.
Hint: If you are using or are forced to use Windows, you might encounter problems copying the files because the folder structures are highly nested and might easily exceed the Windows Explorer's restriction of 255 characters per absolute file name. You can try to fall back on the Command Shell's XCOPY, however, this might, depending on your client environment, fail due to insufficient RAM allocation rights. So, temporarily renaming subfolders to bypass the 255 restriction is the fastest, if also most unelegant, way to success.
3. Tell the Web IDE about its new sources
3.1. Navigate back to the parent directory, i.e. to the "ui5" folder and edit the "neo-app.json" file with an editor less horrible than Window's Editor. Add your new UI5 version within the routes-clause. I also replaced the maven-clause with the new version while struggling with getting things to work. If you use another build-tool or none at all, you can probably disregard changing it (I'm not really sure about this myself).
4. Link the new sources to the Web IDE's Template Wizard
Up to this point, the Web IDE will have access to the sources for SAPUI5's Version 1.52.8. This, however, does not yet mean, that the template wizard in the Web IDE's runtime "knows" this. I.e. you will not be able to select your new version from the dropdown-list.
4.1. In the Web IDE's file structure, navigate to the parent directory twice and from therein into the folder "ui5templates".
4.2. Edit the file "versionoverview.json" and add your new UI5 version respectively.
5. Caches are evil and must be purged
Naturally, after the changes you'll have to restart your Orion Server and the Web IDE. Dependent on your infrastructure, though, there are several caches which might prevent the changes made from reflecting. Here is what I had to do to get things working:
5.1. You might have already noticed in the screenshot from 3.1. that there is a clause "cacheControl" with an attribute "maxAge" in the neo-app.json file. By default, that attribute is set to a Seconds-Value which equals 365 days, meaning the cache will "live" one year. What I found especially deceptive, is the fact, that the maxAge attribute apparently reflects even though the file also contains a statement ""ui5CacheBuster": true". So apparently the cache buster only starts busting after maxAge has been exceeded. At this point I'm uncertain whether it intentionally works this way or whether it's a bug. Either way, I've set the value for maxAge to "0" for means of a clean cache-buildup.
5.2. Clear your browser cache.
5.3. Check whether your changes reflect in the Web IDE by opening the template wizard
5.4. You might want to reset the maxAge value to its default value for performance reasons.
Links to revelant Information Snippets
- SAP Managed Tags:
8 Comments
