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.

/wp-content/uploads/2013/10/nwa_less_294326.gif

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.

/wp-content/uploads/2013/10/portal_294327.gif

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.

/wp-content/uploads/2013/10/theme_294328.gif

Some interesting information (thanks Shani and Itzik again 🙂 )

OSS note 1890375

http://help.sap.com/saphelp_nw73ehp1/helpdata/en/8e/a763272dcd4b4ba6ea347050b1f3fc/content.htm?frameset=/en/47/fdd03fc5de3c92e10000000a42189c/frameset.htm

/*

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

/*

To report this post you need to login first.

30 Comments

You must be Logged on to comment or reply to a post.

  1. Nat Malasit

    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. 

    (0) 
    1. Shani Limor

      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

      (0) 
  2. Nat Malasit

    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

    (0) 
  3. Noël Hendrikx Post author

    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!

    (0) 
    1. Samuli Kaski

      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.

      (0) 
  4. P. Beekman

    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

    (0) 
      1. Shani Limor

        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

        (0) 
  5. Srikanth Chandru

    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

    (0) 
    1. Noël Hendrikx Post author

      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

      (0) 
      1. Srikanth Chandru

        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 🙂 )

        Failed to load resource https://secportal-poc.test.ebsp.msu.edu:80/irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener

        2014-04-10 11:19:46 sap.file.FileUtil.oSendHttpRequest: Failed accessing https://secportal-poc.test.ebsp.msu.edu:80/irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener by method GET with result status 0 –  sap-ui-core.js:9978

        1. 2014-04-10 11:19:46 Calling repository method “GetRepositoryOptions” on “https://secportal-poc.test.ebsp.msu.edu:80/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() –  sap-ui-core.js:9976
          1. log

        Thanks,

        Srikanth

        (0) 
        1. Samuli Kaski

          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.

          (0) 
          1. Antonin Tesacek

            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

            (0) 
            1. Noël Hendrikx Post author

              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?

              Side note:

              I did see something strange in your url, so called /prtrw/. After searching I found the following blog from Simon: What does that funny URL do?… it bypasses the document hooks… huh?

              (0) 
          2. Srikanth Chandru

            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

            (0) 
          3. Srikanth Chandru

            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

            (0) 
  6. Deepak Ramani

    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.

    (0) 
    1. Tuvia Kahana

      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.

      (0) 
  7. Prem M

    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’

    (0) 
    1. Noël Hendrikx Post author

      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

      (0) 
  8. Tuvia Kahana

    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.

    (0) 
    1. Prem M

      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

      (0) 
  9. Tuvia Kahana

    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.

    (0) 

Leave a Reply