Skip to Content
Author's profile photo Former Member

Customizing the portal using the new UI Theme Designer – Part 1

Recent Enterprise portal versions include the new UI Theme designer, the official documentation can be found at:

http://help.sap.com/saphelp_nw73ehp1/helpdata/en/8e/a763272dcd4b4ba6ea347050b1f3fc/content.htm?frameset=/en/4e/81a626a87744dbaaad8c837d37f0b4/frameset.htm

Also before you start using it I strongly recommend to read the official limitation note 1890375,

In addition, before starting to use this solution. you need to apply the following note:

Note 1839261 – Application displayed without theme (UI Theme Designer)

In this blog I wanted to share with you a hands on experience, in the part 1 I will show simple branding of the portal with the UI Theme Designer and on part 2 I will show advanced branding using the Web Resource Repository: http://scn.sap.com/community/netweaver-portal/administration-and-development/blog/2013/10/15/customizing-the-portal-using-the-new-ui-theme-designer–part-2

So let’s begin 🙂 The prerequisite for this blog is that you already configured the portal to work with the new theming (this can be easily found in the documentation).

Step 1

launch the new UI Theme Designer

/wp-content/uploads/2013/10/1_293747.png

Step 2

Select the base theme you would like to customize

2.JPG

Step 3

Select the Portal Control Previews and then select the AJAX Framework Page preview

/wp-content/uploads/2013/10/3_293749.png

This step is very important since you can select additional previews to work on simultaneously, as you can see you have not only portal previews but also Unified Rendering previews!

/wp-content/uploads/2013/10/4_293768.png

Now Let’s start customizing 😎

Step 4

Quick theming is the first thing you would usually change, this will affect the basic coloring in few clicks.

Currently the quick theming is not supported for portal controls (it is planned to be supported in the future) and because of that we will use the quick theming to change Unified Rendering controls.

/wp-content/uploads/2013/10/5_293769.png/wp-content/uploads/2013/10/6_293770.png

Step 5

Expert theming is the next step, here you will see all the existing parameters and once you change them you will see it reflected in the preview.

Since there are a lot of parameters in the expert view my tip is to work with the categories:

/wp-content/uploads/2013/10/7_293849.png/wp-content/uploads/2013/10/8_293850.png

Lets’s change the logo image in the Masthead category, the property is: sapPrtAFPMastheadLogoImage:

/wp-content/uploads/2013/10/9_293851.png

Looks tight up there, let’s give it some space 😉 the properties are: sapPrtAFPMastheadLogoImageHeight and sapPrtAFPMastheadLogoImageWidth

/wp-content/uploads/2013/10/10_293867.png

Now lets play with the Top Level Navigation, select the Top Level Navigation category:

Change the parameter: sapPrtAFPTlnFirstLevelTabStandardTextColor

/wp-content/uploads/2013/10/12_293868.png

Change the parameter: sapPrtAFPNewTLNFirstLevelTabDownColor

/wp-content/uploads/2013/10/13_293869.png

Now lets play with the Detailed Navigation, select the Detailed Navigation category:

Change the parameter: sapPrtAFPNewDTNTreeTextStandardColor

/wp-content/uploads/2013/10/14_293897.png

Step 6

That’s it, now what’s left to do is to publish the new theme 😏

/wp-content/uploads/2013/10/15_293899.png/wp-content/uploads/2013/10/16_293900.png

The new theme is in the portal now and you can use it the same way as in the past (Assign it to your desktop). If you want to see your changes quickly just add the following parameter to the portal’s URL: theme=<new theme id>

Good Luck 😎

Itzik


Assigned Tags

      34 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sumanth Thunga
      Sumanth Thunga

      Hi Itzik,

      Nice Blog...

      Are you using 7.3 EHP1 or 7.3 SPS10?

      I enabled after i updated my portal to SPS10 and I am having issues with UI Theme designer 7.3 SPS10 in publishing and have a OSS Message running with SAP.

      In fact, this blog is referenced in OSS Message. in 7.3 SPS10, Quick Tab is empty and also mentioned in limitations.

      Also what browser version are you using for UI Theme Designer.

      Other problem i have is after enabling UI Theme designer, all BEX reports are rendering without any themes and crapy... Did you noticed any sort of these issues?

      Appreciate your inputs.

      Thanks
      Sumanth

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Sumant,

      The same solution is available both in 7.3 SPS10 and 7.3 EHP1 SPS9.

      Can you please tell me the OSS message number so I can have a closer look on the issue you mentioned?

      Regarding the browser version you can use chrome, FF, IE9 or above.

      Regarding the BEX reports, I am not aware of such an issue, can you please open OSS message with all the details and send me the number? I promise to handle it as quick as possible.

      Thanks,

      Itzik

      Author's profile photo Sumanth Thunga
      Sumanth Thunga

      Hi Itzik,

      Thanks for the response. I use all three different browsers and got in to different kind of issues. Also my Theme screens when framework is loaded are little different from the screen shots in this blog.

      Below are my two OSS Message:

      Portal Error after Creating a theme using UI Theme Designer ( 921625 / 2013 )

      BEx BI Reports are not rendered correctly with new UI Theme ( 953809 / 2013 )


      For BEx Issue, i disabled the new UI Theme desiner in Producer Portal (BI Java) so we can continue with testing of functionality. Reports load with SAP Tradeshow plus default theme. The  moment i enable the UI theme designer, standard themes are also not getting rendered correctly for BI Reports.

      Please let me know if more information is needed in Messages.


      Thanks

      Sumanth

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Sumanth,

      Thanks for the information, we will look into the issues and get back to you.

      Regarding the browsers the recommended browser is chrome.

      Thanks,

      Itzik

      Author's profile photo Sumanth Thunga
      Sumanth Thunga

      Hi Itzik,

      Thanks for the Help on messages. I saw the Part 2 Blog and these were the things i was researching from a month when i updated SPS10.

      Will there be part 3 on Export and Transport of themes and what folders to be selected for transport.

      Other question i have and noticed:

      1. There are significant differences i see with SAP_CORBU with out UI Theme Desinger  and with Theme Designer. May be differences because of LESS Files generation. Is this a known difference?

      2. DO we need to publish the Standard Themes when new UI Theme Designer is enabled?

      Thanks
      Sumanth

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Thunga,

      I am glad you find my blogs helpful 🙂

      I didn't have a plan to release an additional blog but I will be happy to answer any question you have here (or you can send me an email with additional details).

      In general the migration is covered in the official documentation:

      http://help.sap.com/saphelp_nw73ehp1/helpdata/en/6f/8f28eba0d446c29336d51b3f51edc9/content.htm?frameset=/en/4e/81a626a87744dbaaad8c837d37f0b4/frameset.htm

      Regarding Themes transport, it can be done only with the standard portal transport (EPA). This is the same functionality as in SP09 with the old theme editor. All you need to do is to create a transport package and add the theme object to it (under System Administration->Transport->Transport Packages). Note - the old Transport themes UI is used now only for migration from old theme structure and not for transporting themes.

      Regarding your questions:

      1. I am not a ware of the differences, can you please send me the main differences? maybe an OSS message should be opened?

      2. No, this is done automatically out of the box.

      Thanks,

      Itzik

      Author's profile photo Sumanth Thunga
      Sumanth Thunga

      Hi Itzik,

      Thanks for your help. I created another message for the Differences i noticed.

      Theme Differences with New UI Theme Designer ( 996024 / 2013 )

      Thanks
      Sumanth

      Author's profile photo Former Member
      Former Member

      Hi Itzik Feldman,

      I think i have the same problems as Sumanth Thunga,

      I'm trying to change the theme in an application using theme designer. I do all the steps, change colors and all that stuff, but when i try to check the changes, doesn't show me nothing, just the default theme used by the App.

      Also when i save the changes as draft, theme designer doesn't let me change nothing on my previous draft.

      I'm using chrome the check it.

      Thanks,

      Ricardo Fuzeta

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Ricardo,

      Do you change also the portal view or only your applications view?

      And how do you try to check your changes? by the shortcut I suggested? if yes, can you please try to assign the theme to your active desktop and let me know if you can see the changes you did?

      Another question - did you apply the note: 1839261 - Application displayed without theme (UI Theme Designer)?

      Thanks,

      Itzik

      Author's profile photo Former Member
      Former Member

      Hello Itzik,

      Thank you for your answer.

      I was changing the application view.

      I think there we were facing two problems:

          - One of them was because there was more than one person making changes on the theme designer with the same user. (Not sure if that's a real problem, but it only works correctly when there's only access per user)

          - The other problem was with the templates. We were changing a mobile app, and we can only make it work with the blueCrystal template. All the other templates don't work.

      Once again thank you for your help.

      Greetings,

      Ricardo Fuzeta

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Ricardo,

      In which technology is the mobile app written? Is it UI5? if yes then it is still not supported to customize UI5 applications through the portal (see the limitations note 1890375). If not please let me know which technology are you using?

      Thanks,

      Itzik

      Author's profile photo Former Member
      Former Member

      Thanks Itzik. I assume you were using NetWeaver 7.4 while creating these blogs? I'm asking because most of the steps you describe in these blogs, can't be done with NetWeaver 7.31 SPS09, at least without errors. Even changing the masthead logo results in a null reference in the UI Theme Designer when publishing the theme. I was able to cheat the tool by manually creating the directories in the repository, changing the base.less file directly and then generating & publishing the theme in UI Theme Designer. I hope SAP will release fixes soon, there is already SAP note 1927550 but it is not accessible to mere mortals.

      Author's profile photo Former Member
      Former Member

      Itzik,

      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

      Author's profile photo Former Member
      Former Member

      Hi Srikanth,


      I have the same problem.

      I have NW7.30 SPS11 Portal and when I start UI Theme Designer I get message "Theme Repository could not be read!" and I can't do nothing more with UI Theme Designer.

      Have you already found some solution for this problem?


      Or could someone help with it?

      Do we miss some configuration?


      Thanks,

      Antonin

      Author's profile photo Former Member
      Former Member

      Hi Antonin,

      No luck at all. We have raised an incident with SAP for the same now.

      Let me know, if you find any solution in the meanwhile.

      Thanks,
      Srikanth

      Author's profile photo Noël Hendrikx
      Noël Hendrikx

      There are a few ways to find out what is going wrong in the meantime.

      1) Check out the default trace in the portal.

      2) Check out the UI Theme Designer log (if you can open it). Open the Theme menu and select "View Log".

      3) Use an http watcher or developer toolbar to examine http connection problems (403,404,302).

      4) Use another browser (is the problem browser related)?

      Good luck!

      Noël

      Author's profile photo navya shetty
      navya shetty

      Hi Itzik,

      We have recently upgraded to NW 7.31 SP9 and we did enable theme designer but we are facing few issues.

      1) I have imported the theme created using theme editor but I am unable to edit those in theme designer.

      2) I am unable to add background image in theme created using theme designer. As per the steps mentioned in your blog , when I drag a image from desktop it doesnt show me the image on screen and to save it as shown in screen-shot below. Can you please guide me where i might be going wrong.

      UploadBgimage.jpg

      Regards,

      Navya

      Author's profile photo Noël Hendrikx
      Noël Hendrikx

      Hi Navya,

      Check out the following blogs, they might help you further for your first issue:

      How to... UI Theme Designer - Migration

      I think you dropped the image not completely into the box. The browser thinks it should open the image for you. Does it work in Google Chrome?

      Kind regards,

      Noël

      Author's profile photo navya shetty
      navya shetty

      Hi Noel,

      The drag and drop of image works fine in google chrome but doesn't work in Internet Explorer 9.

      The themes that were generated using theme editor , I am unable to edit it using theme designer. The themes created using theme editor are visible in theme designer but when i edit it , it doesn't show me the AFP contents in those three tabs.

      Regards,

      Navya.

      Author's profile photo Former Member
      Former Member

      As I remember it the UI Theme Designer developers told in TechEd last year that Chrome is preferred. If you have to use IE, it has to be IE10 or higher.

      Author's profile photo navya shetty
      navya shetty

      Hi Samuli,

      Any idea what might be wrong as we are not able to edit themes created using theme editor in theme designer even in chrome.

      Regards,

      Navya

      Author's profile photo Former Member
      Former Member

      Create a discussion thread about it and share all relevant technical information and what you are trying to achieve. You should really update to either SPS10 with latest patches or SPS11. The UI Theme Designer in SPS09 isn't very functional.

      Author's profile photo navya shetty
      navya shetty

      Hi Samuli,

      I have already created a thread Issues in theme designer for the same but no response on that... 🙁

      Regards,

      Navya

      Author's profile photo Former Member
      Former Member

      Thank you for posting such a excellent document. Keep posting more on UI

      Cheers 😉

      Pradyp

      Author's profile photo Durga Rao Vaddadi
      Durga Rao Vaddadi

      Hi Itzik,

      Thanks for the article.


      in this article Step 4

      "Quick theming is the first thing you would usually change, this will affect the basic coloring in few clicks.Currently the quick theming is not supported for portal controls (it is planned to be supported in the future) and because of that we will use the quick theming to change

      Unified Rendering controls. "

      This quick theming pane as show above in your screen is not available in my server and we are using the 7.4 version  and also please help me in solving the same as we have already raised this earlier .

      UI Theme Designer Doubts..

      Regards

      Durga Rao

      Author's profile photo Former Member
      Former Member

      Hi  Itzik,

      Nice to see the blog.

      I am trying to activate the UI Theme designer, but I did not find any Portal Services tab under Portal Service Details section for the corresponding application com.sap.portal.themes.lafservice. I followed the official document - Activating the UI Theme Designer - Portal - SAP Library.

      I am using Portal Version 7.30 with SP 9. Please suggest me how to proceed it.


      Regards,

      Prasanna

      Author's profile photo Noël Hendrikx
      Noël Hendrikx

      Hi Prasanna,

      The option is available from 7.30 SP10 unfortunately. You can check this blog as well: How to... UI Theme Designer - Installation

      Cheers,

      Noël

      Author's profile photo Former Member
      Former Member

      Thank you for the suggestion Noël..

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      Deepak,

      I'm facing the same issue (NW 7.4 sp 9) (UI theme designer  1.6.1.)

      If i try to access the uploaded image using the repo: com.sap.portal.resourcerepository/repo/theming/Base/baseLib/kul_bluecrystal_fiori/img/misc/sapCompanyLogo.png

      there is no problem.

      But running the portal flp it accesses the image via /irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener/Base/baseLib/kul_bluecrystal_fiori/img/misc/sapCompanyLogo.png

      the testuser gets access denied..

      I also gave end user permission for the web resources map.

      ------------------------------------------------------

      update: solved the issue by modifying the image path in theme designer from

      url("./img/misc/sapCompanyLogo.png")

      to

      url("/com.sap.portal.theming.webdav.themeswebdavlistener/Base/baseLib/kul_bluecrystal_fiori/img/misc/sapCompanyLogo.png")

      so the image becomes 'public' by accessing it using /com.sap.portal.theming.webdav.themeswebdavlistener/ and not using the /irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener/

      Regards,

      Joris

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Hi Itzik Feldman

      I need to change the iView Tray Background and Font COlor. Can not seem to find the properties in the UI Theme Designer.

      I am creating a custom theme for the AJAX Framework Page.

      Could you please share the  properties that need to be change?

      Thanks

      Sandip

      Author's profile photo Former Member
      Former Member

      Dear Sandip

      What is the name of the framework that you want to change via the UI Theme Designer?

      Regards

      Matan

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Hi Matan

      I am using the ajax framework page.

      Thanks for your reply.

      Regards

      Sandip     

      Author's profile photo Former Member
      Former Member

      HI,

      the portal im using is 7.4 sp12. once i create a custom theme and make changes in them, they dont reflect at all. in preview and also by adding it in the url (theme= <theme id>