Tuesday, January 13, 2015

PeopleTools 8.54 - Component Branding

In the OTN forums, someone recently asked how to use Component Branding in PeopleTools 8.54.

Component Branding introduced in 8.54 seems to be a great way to target specific components and override certain style sheets without affecting the rest of the components in the application. It also provides a way to inject custom javascript into a component. All these activities can be done by a Portal Administrator without having the need to use App Designer.

Here is a short example of how Component Branding can be used.

In this example, I will be overriding the delivered style class PSEDITBOXLABEL specific to my test component. This style override will not take effect on any other component.

- Create Custom Style Sheet:

- Apply Custom Style Sheet to Component Branding:

- Test Component:

Notice how the Edit Box Label appears Red for my test component!


  1. Sasank - thanks for this post. I have been working on implementing a CSS footer menu on a specific PS component/page. At one point and time I was able to implement my footer using Component Prebuild code (PT 8.54) AddStyleSheet(StyleSheet.MY_TEST_FOOTER); This worked, but then I noticed that I can add the StyleSheet to the component property Style tab. This also worked. Within a weekend's timeframe my footer no longer worked. After reviewing the HTML source from my browser I noticed that my .CSS stylesheet was no longer referenced with PS stylesheets. I have been trying ever since to get it to work with no luck. Because of this I found your blog while trying to resolve my issue. So I implemented you steps above and my CSS menu still did not work until I added on extra step. On the Branding System Options page I added my Stylesheet to the Additional StyleSheet Objects section and my footer worked again. All this being said, do you have any idea what could be the issue. I'd like to avoid having to modify any of the branding options and stick to code and PeopleTools object properties, especially now that my proof of concept did work at one point.

    Thanks again for your post!

    1. I know this is very basic and you might have tried this already but if you have not, I would suggest clearing your local browser cache, app server cache and web server cache if you are seeing inconsistent results with branding as there could be several layers of caching involved.

      - If you want to use the peoplecode approach, try placing the AddStyleSheet in the page activate or component postbuild events. I have not tried placing the code in prebuild so I am not sure if there are any differences there. But generally speaking, the AddStyleSheet approach should work without any issue. Only other thing I can say again is check the cachng that I previously mentioned.
      - If you are using the Component Style Properties via App Designer or Component Branding via PeopleTools > Portal > Branding > Component Branding, then as mentioned in this post, it only works for Self-Service style pages (and not pages that involve search functionality). At least, that has been my findings in 8.54.
      - If you are using the Branding System Options to add the style then it will not only add it to the desired component/page but also to every other page when it gets loaded. So, generally speaking this approach is only recommended for system wide branding as opposed to targeted component/page specific branding.

      My suggestion would be to use the 'Component Branding' if this is a Self-Service style page (i.e.: no search functionality). Otherwise, just use PeopleCode AddStyleSheet function as you have previously done.

    2. Refer this OTN forum discussion for details on when the Component Branding will not work:

    3. Refer to this OTN forum discussion on current quirk (8.55.11) with Component Branding: