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!
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!
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.
ReplyDeleteThanks again for your post!
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.
Delete- 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.
Refer this OTN forum discussion for details on when the Component Branding will not work:
Deletehttps://community.oracle.com/thread/3647802
Refer to this OTN forum discussion on current quirk (8.55.11) with Component Branding:
Deletehttps://community.oracle.com/thread/4018541
Hi Sasank,
ReplyDeleteWere you able to use Javascript for component branding? I did it for an component to hide the the links "Basic Search" and Save Search" but it was hidden only when the page loaded. When i clicked on Search button, both the links would appear back. The tools that i am using is 8.56.
I saw jim's comment but wanted to check if there is a workaround that you have come across.
Regards,
Allen
Hi Allen - I think that is expected behavior of javascript. Your function/code seems like it executed initially but after a server trip the page contents gets refreshed and your code is not executing at that time. You will need to code around such events.
DeleteIs there a reason for using javascript in this case instead of css for hiding fields?
Hi Sasank,
ReplyDeleteThe class associated with "Basic Search" and Save Search" is PSHYPERLINK. I had included dispay:none for PSHYPERLINK in Peoplesoft CSS branding object and tied it to the component. The issue that i noticed that the tab "Add a new Value" on the search page also got hidden. The change was affecting all the elements associated with PSHYPERLINK class. Thats the reason why i shifted to Javascript.
Is there a way to hide the elements associated with #ICSaveSearch, #ICAdvSearch through CSS?
Regards,
Allen
Hi Allen - Yes. You could use the attribute selector as follows. It seems to work for me!
ReplyDeletea[name="#ICAdvSearch"], a[name="#ICSaveSearch"], a[name="#ICBasicSearch"] {
display: none;
}
Thanks Sasank, It worked. I used your code in the css
Deletea[name="#ICAdvSearch"], a[name="#ICSaveSearch"], a[name="#ICBasicSearch"] {
display: none;
}
//To hide the Case Sensitive label and checkbox, I used the same concept
label[for="#ICMatchCase"]{
display: none;
}
Hi Sasank, I have to display header for the component where as the component have four pages(are displayed like tabs). I have tried doing this by using Java script in component branding but somehow the java script is not being loaded when accessing component. BTW, the style sheet is working but not Java script. Is there anyway I can achieve this? Any suggestions would be appreciated.
ReplyDeleteHi Sasank,
ReplyDeleteCan we write a script to update the component branding page so that using that script we can add/update multiple bolt-on components to it.
Hi Suprada - Looks like you have a lot of entries to manage in the component branding page. If you have a large list of components, you can either use a SQL script or an app engine/CI to enter your configurations.
DeleteIf you configuration is more global in nature, you can use the Branding System Options Page.