Sunday, January 13, 2013
Ever used a Section header in VF Page which is not exposed as a tab?
You will notice a weird thing,
You cant actually control the icon that appears in the section header and it puts a default image(Home Icon) there. To replace the Icon you have to either provide a tabstyle or create a new tab for the VF Page or have to use a standard controller.
Question : What If you want a custom icon instead of the default? Create a new tab with the icon?
Answer : Well that doesn't seem wise enough. To overcome the same I have created a custom section header component that can be used to replace the standard section header component. This custom section header provides the ability to select your own icon or any standard one and best part is you can repeat the component with different icons.
How To Use?
Here is a sample code which shows how to uses the Standard Salesforce Account icon in the custom section header.
Component Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rf3O
You will notice a weird thing,
You cant actually control the icon that appears in the section header and it puts a default image(Home Icon) there. To replace the Icon you have to either provide a tabstyle or create a new tab for the VF Page or have to use a standard controller.
Question : What If you want a custom icon instead of the default? Create a new tab with the icon?
Answer : Well that doesn't seem wise enough. To overcome the same I have created a custom section header component that can be used to replace the standard section header component. This custom section header provides the ability to select your own icon or any standard one and best part is you can repeat the component with different icons.
How To Use?
Here is a sample code which shows how to uses the Standard Salesforce Account icon in the custom section header.
<c:sectionHeader iconsrc="/img/icon/accounts32.png" title="Visualforce Auto-Complete Component" subTitle=" Auto-Complete Demo"/> 
Component Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rf3O
