How to… UI Theme Designer – Installation
With Netweaver Portal 7.30 SP10 or 7.31 SP09 SAP launched the new UI Theme Designer. By default the old editor is still loaded, so here are the tips:
1) Enable UI Theme Designer in the portal
In Netweaver Administrator (/nwa) go to Configuration > Infrastructure > Application Modules;
Select the web module “com.sap.portal.themes.lafservice” in the Module List;
Now in the Portal Service Details the Properties are loaded. Change “Determine what will be the theme runtime provider” to LESS.
Save it and restart the portal.
2) By enabling the LESS functionality the portal has added a new menu option under Content Administration > Portal Display > Portal Themes. It is called UI Theme Designer.
If you launch the UI Theme Designer, be sure you are running a modern browser (e.g. CSS3 support -> IE9 or higher, Firefox and Chrome).
Otherwise it won’t start / work correctly.
3) Check out the following: Note 1839261 – Application displayed without theme (UI Theme Designer). In our case we needed a patch for SAP_BASIS (SAPKB73108).
4) Now you can run the UI Theme Designer from the portal.
Some interesting information (thanks Shani and Itzik again 🙂 )
OSS note 1890375
/*
Noël Hendrikx – SAP Portal consultant @ Peppie Portals.
Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.
UI Theming blog series
Portal theming – also waited a couple of years?
How to… UI Theme Designer – Installation
How to… UI Theme Designer – Migration
How to… UI Theme Designer – Locating elements
How to… UI Theme Designer – Transportation
How to… UI Theme Designer – Make use of the Custom CSS tab in the Portal!
Other blogs:
Tired of zipping / unzipping portal theme?
Tips for the Portal Content Studio
DSM Terminator and popup blockers (or not)
My best development friend – Autoresponder FTW
/*
Hi Noel,
Thanks the the nice article.
We are currently on 7.31 SP9 and would like to turn on this feature.
However, when logging NWA -> Application Module. There's no option to input 'LESS' (acceptstyleshee and default.autoload.themeparts ARE availble)
Have you stumble across this problem before?
Thanks again and can't wait to play with it.
Hi Nat,
I have experience with 7.30 SP10, not with 7.31 SP09 unfortunately. It should be available however: http://help.sap.com/saphelp_nw73ehp1/helpdata/en/c7/e01c6b55dc45959efb0336c5c3a032/content.htm?frameset=/en/a3/721c134fdb4f1fbe774cfbfa9be66d/frameset.htm
Will ask Shani Limor to check this.
Cheers,
Noel
Hello Nat,
The UI Them Designer is included in 7.31 SP9. It is strange to me that you don`t see the "Determine what will be the theme runtime provider" property 😯
Sorry for the following question, but can you please verify that your system is indeed updated with EP-RUNTIME, EP-ADMIN, AJAX-RUNTIME and EP-BASIS SCAs that are on 7.31 SP9?
Thanks,
Have a wonderful day,
Shani
Hi Noel, Shani,
Wow, what a quick response. Much appreciated for this.
Even though basis claimed that we are running on SP9. I still see in NWA that all component are in version 7.31.8 which I guess not really SP9.
Will see if they can upped the level by today 🙂 Thanks again guys
Hi Noel,
Nice blog, Keep up the good work! 🙂
Advanced wishes for New Year 2014 😎
Regards,
Hari Suseelan
I said I will write a new blog about the theme designer. It took a while (since we are going live with the first UI Theme Designer project this weekend), but I will be writing a new follow up blog how you can work with the Theme Designer shortly!
Could you maybe also share your lessons learned regarding the project you are going live with? We are looking at implementing UI Theme Designer for SAP NetWeaver Portal but the apparent bugs and limitations make things challenging.
Ofcourse!
There are bugs, there are limitations indeed. But there are also workarounds. Will explain them with screenies 🙂
Check out my new blog, hope it will help you more 😆
How to... UI Theme Designer - Locating elements
Hi Noël,
Great blog dude!
You might want to update the link to help.sap.com because it's not up to date anymore.
Regards, Paul
Thanks Paul 🙂
The link should point to Working with the UI Theme Designer, but that link seems to be broken on help.sap.com unfortunately.
Hi Paul,
Thanks for pointing this out for us.
I am checking it and will update as soon as possible.
Have a wonderful day,
Shani
Enterprise Portal | Product Owner
Hi Noel,
Great Info. Thanks for the article.
I was trying to launch the new UI Theme Designer from Portal to theme the "Ajax Framework Pages'. When I launch it, the tool loads completely but gives an error 'Theme Repository Could not be Read' and gives me no option to continue any further.
Do you think I have missed any pre-req configuration or any OSS Notes.
Thanks,
Srikanth
Hi Srikanth,
Try to open the Developer Toolbar during the loading of the UI Theme Designer. Maybe you can see some missing files. If you use Chrome (which I prefer 😛 ), you can see all traces in the Console. I think it is the only way to figure out why no themes are loaded.
Please report back what your findings are.
Noel
Noel,
Thanks for the reply. I indeed had tried that route too. I placed some debugging points on the JavaScript Call Stack of the Portal, to debug the error, but I cant get the point where it fails.
The error trace is as below : ( Does this ring any bell to you 🙂 )
Thanks,
Srikanth
In the screenshot, you are accessing UI Theme designer using https://.../ and UI Theme Designer is trying to access themes from https://..:80/ which is not the same. With the former :443 is assumed which is the default port for HTTPS. Change your portal system landscape accordingly.
Hi,
I have the same problem as Srikanth.
In Console of Chrome I found following errors:
...
GET http://xxx.net:53000/com.sap.portal.design.urdesigndataless/theme-editor/resources/sap/ui/commons/messagebundle_en_US.properties 404 (Not Found)
...
GET http://xxx.net:53000/com.sap.portal.design.urdesigndataless/theme-editor/resources/sap/ui/themeeditor/i18n/messagebundle_en_US.properties 404 (Not Found)
...
GET http://xxx.net:53000/com.sap.portal.design.urdesigndataless/theme-editor/resources/sap/ui/table/messagebundle_en_US.properties 404 (Not Found)
...
GET http://xxx.net:53000/irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener 404 (Not Found) js/ur/browser/base/file.js:475
2014-04-15 03:09:51 [index.html] Retrieving new CSRF token from server "http://xxx.net:53000" - sap-ui-core.js:9978
2014-04-15 03:09:51 [index.html] sap.file.FileUtil.oSendHttpRequest: Failed accessing http://xxx.net:53000/irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener by method GET with result status 404 - sap-ui-core.js:9978
2014-04-15 03:09:51 [index.html] Calling repository method "GetRepositoryOptions" on "http://xxx.net:53000/irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener"did not succeed
JS call stack:
sap.file.FileUtil.oCallRepositoryMethod(sRepositoryRootUrl, sMethod, mParameters)
sap.file.common.FileUtil.determineRepositoryOptions(sRepositoryRootUrl)
sap.theming.less.Context.setRootPath(sRootPath)
sap.theming.less.Parser.oParseContext(oLessRootPath, oLessContext)
sap.theming.ui.SapLessAPI(sContextRootPath, aInitialFrameworks)
unknown()
eval()
In each URL is used protocol HTTP and port 53000.
I tried to access in browser: http://xxx.net:53000/irj/servlet/prt/
I got list of available components and com.sap.portal.theming.webdav.themeswebdavlistener was listed there as not available.
Do you have any idea how to install/start/correct themeswebdavlistener component?
Thanks,
Antonin
Hi Antonin,
What happens if you launch:
[yourserver+port]/irj/portal/com.sap.portal.theming.webdav.themeswebdavlistener/UR/ur/sap_standard/sf3.css
If even the standard themes are not available, something went wrong during activating the LESS (lafservice component).
I tried to open those files as well and they are not available for me also. What happens if you change the language of the browser?
Samuli,
Thank you. That was a good tip, but that only helped clear the "Resource Not Found" Error, but still continues to fail to load from the theme repository.
The Developer tools in Chrome without the error reads as below :
2014-04-11 12:06:52 Applying DEFAULT repository options for "https://secportal-poc.test.ebsp.msu.edu:443". - sap-ui-core.js:9978
2014-04-11 12:06:52 Problems resolving PROPFIND response JS call stack: sap.file.common.FileUtil.aExtractFoldersAndFilesFromPropfindXml(oResponse, bExtractFolders, bExtractFiles) sap.file.common.FileUtil.aGetSubfolders(sUrl) sap.file.FileUtil.aGetSubfolders(sUrl) sap.theming.ui.SapLessAPI(sContextRootPath, aInitialFrameworks) unknown() eval() - sap-ui-core.js:9978
2014-04-11 12:06:52 lazy stub for 'sap.ui.commons.MessageBox.alert' called. - sap-ui-core.js:9979
2014-04-11 12:06:52 Rendering of popup content: __alert0 - sap-ui-core.js:9978
2014-04-11 12:06:52 position popup content __alert0 at "center center" - sap-ui-core.js:9979
2014-04-11 12:06:52 Event fired: 'focusout' on Element sap.ui.commons.TextField#__jsview7--appPreviewView--previewapp-url - sap.ui.core.UIArea sap-ui-core.js:9979
2014-04-11 12:06:52 Event blur reached Focus Handler (target: [object HTMLInputElement]__jsview7--appPreviewView--previewapp-url) - sap.ui.core.FocusHandler sap-ui-core.js:9979
2014-04-11 12:06:52 Event fired: 'focusin' on Element sap.ui.commons.Button#__alert0--btn-OK - sap.ui.core.UIArea sap-ui-core.js:9979
2014-04-11 12:06:52 focus event on __alert0--btn-OK, contains: false - sap-ui-core.js:9979
2014-04-11 12:06:52 focus event on __alert0--btn-OK, contains: true - sap-ui-core.js:9979
2014-04-11 12:06:52 Event focus reached Focus Handler (target: [object HTMLButtonElement]__alert0--btn-OK) - sap.ui.core.FocusHandler sap-ui-core.js:9979
2014-04-11 12:06:52 Event fired: 'sapfocusleave' on Element sap.ui.commons.TextField#__jsview7--appPreviewView--previewapp-url - sap.ui.core.UIArea
As we couldn't debug to get to the source of this issue, we have also raised an incident with SAP.
Thanks,
Srikanth
Samuli,
We indeed found out today that it is an issue related to our portal system landscape. Basis is working on it. If we opened up the link directly on the server, the theme repository loads successfully.
Your tip on the port number helped me convince the basis that it was related to how the landscape is set up.
Thank you for that.
Will keep you posted.
Regards,
Srikanth
Thanks for the useful document, keep posting more on UI5.
Cheers 😉
Pradyp
Hi Noel,
Its a great step by step document for UI Theme Designer Installation 🙂
Regards
Kiran B
Hi Folks,
I uploaded a new logo for fiori framework page and it shows up fine for me (Super Admin User).
But for end users the image does not display the logo, seems to be permission issue.
I tried opening the image directly as end user.
Image URL
/irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener/Base/baseLib/custom_bluecrystal_V1/img/misc/sapCompanyLogo.gif
I get the below error
Error
Error component failed , reason : Access is denied: com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener - user: Test User1 Original Exception : Access is denied: com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener - user: Test User1
Permission
Have given end user permission to everyone group for below folder.(Still same issue)
Content Administration > Web Resource Repository > Web Resources
Has anyone faced this issue? any pointers on how to resolve this?
Thank you,
Regards,
Deepak.
Hi Deepak,
You can try the below to solve the issue:
Go to :System Administration->permissions -> Portal Permissions.
Then, go to : Portal Content-> Security Zones-> sap.com->Netweaver.Portal -> high_safety->com.sap.portal.theming.webdav.themwebdavlistener->components->
themwebdavlistener.
There, add to the permissions also “Authenticated Users” (in the name column) and check the checkbox for the End User.
Regards,
Tuvia.
Thanks a ton Tuvia Kahana!!! It worked like a charm.
After setting up UI theme editor and restarting the service, my portal doesnt work anymore.
This is the error:
registerApplication() -->Failed to register com.sap.portal.design.portaldesigndataless
[EXCEPTION]
java.lang.NullPointerException: while trying to invoke the method java.lang.String.isEmpty() of a null object loaded from local variable 'parentLibID'
Hi Prem,
That doesn't sound well... Which version do you have? Sounds like you will need to create an oss message for this one. Did you search for solutions already?
Noel
Hi Prem,
I would recommend to apply note number 2178248 - "Blank page appears when launching the Enterprise Portal" It seems to be the same issue with the registration.
Tuvia.
Hi Tuvia,
My portal is on 7.4 SP10 and not patch available for this on the Note. Also I have another portal on the same SP and theme editor works there. Although once I enabled it, Portal favourites stopped working
Thanks !
Prem
Hi Perm,
I am not sure that this is your case, but sometimes after
turning the Theme Designer on the portal goes blank due to memory issue.
In that case, you can look on SAP note 1463088 and install the SAP Kernel (disp+work package)
which includes the fix.
Another option would be, in case you have more than one
server nodes, to stop them and then to start them one by one.
Tuvia.