function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
kjpetersonkjpeterson 

PageBlock tabStyle doesn't show icon

I'm trying to get a pageblock to show like a standard related list with the icon for the object the pageblock will display.  If I set the tabStyle attribute of the pageBlock to the object it changes the border colors but does not display the icon.  How can I display the object icon too?

bob_buzzardbob_buzzard

You can do this using the header facet of the page block.

 

Something like the following worked for me.

 

<apex:pageBlock id="pbid" title="Recent Changes">
   <apex:facet name="header">
      <img src="<your image url here>" class="relatedListIcon" />
      <h3 class="mainTitle">&nbsp;Recent Changes</h3>
   </apex:facet>
</apex:pageBlock>

 
JonMitchellJonMitchell

This is exactly what I need to do, but what do I put in for the image url?  I want it to be the icon I chose for my custom Invoice object that this pageBlock is referencing.

 

I've tried the following but nothing shows up.  This is the url that shows up in FireBug for the standard related list.

 

<apex:pageBlock title="Open Invoices" id="OpenInvoices">
    
   <apex:facet name="header">
      <img src="/s.gif" class="relatedListIcon" />
      <h3 class="mainTitle">&nbsp;Open Invoices</h3>
   </apex:facet>

 
bob_buzzardbob_buzzard

The best place I've found for re-using images is this one:

 

http://free-121d5f44d20-121d603d1c5-121ee2b8103.force.com/force2b/salesforceicons

 

You can just inspect a particular image to get the relative URL and use that yourself.
JonMitchellJonMitchell
Thank you! That is very helpful. Unfortunately this does not include all the available images like the credit card, but I can just switch my object to use one of these.

Ideally I would like to specify tabSytle="Invoice__c" and have the icon from that object show up. Any ideas?
JonMitchellJonMitchell

So I found an invoices24.png icon on that page that I switched to.  But that isn't available as a tab icon!  It is too bad that it isn't the same list of icons available in both places.  

 

I also had to add some styling to get the spacing right.  Here is what I ended up with:

 

<apex:facet name="header">
   <div class="pbTitle" style="padding-left:5px; padding-top:5px;">
      <img src="/img/icon/invoices24.png" class="relatedListIcon" style="width:24px; display:block; margin-left:0;" />
      <h3 class="mainTitle">&nbsp;Open Invoices</h3>
   </div>
</apex:facet>

 

 

 
JonMitchellJonMitchell

Final complete solution:

 

	    <apex:pageBlock title="Open Invoices" id="OpenInvoices">
	    
	    	<apex:facet name="header">
	    		<apex:panelGrid columns="2">
			    	<div class="pbTitle" style="padding-left:5px;padding-top:5px;">
					<img src="/img/icon/invoices24.png" class="relatedListIcon" style="width:24px;display:block;margin-left:0;" />
					<h3 class="mainTitle">&nbsp;Open Invoices</h3>
				</div>
				<apex:panelGroup styleClass="pbButton" style="text-align:right;">
					<font size="1pt">Page:&nbsp;<apex:outputLabel value="{!pageNumberOpen}"/>&nbsp;of&nbsp;<apex:outputLabel value="{!totalPageNumberOpen}"/>&nbsp;&nbsp;</font>
					<apex:commandButton value="Previous" action="{!prevOpenClick}" reRender="OpenInvoices" disabled="{!prevOpenDisabled}"></apex:commandButton>
					<apex:commandButton value="Next"     action="{!nextOpenClick}" reRender="OpenInvoices" disabled="{!nextOpenDisabled}"></apex:commandButton>
				</apex:panelGroup>
	    		</apex:panelGrid>
		</apex:facet>

	        <apex:pageBlockTable value="{!openInvoices}" var="inv" rendered="{!NOT(ISNULL(openInvoices))}">
	            <apex:column headerValue="Invoice Number" value="{!inv.Name}"/>
	            <apex:column headerValue="Transaction Type" value="{!inv.Transaction_Type__c}"/>
	            <apex:column headerValue="Order" value="{!inv.Order__c}"/>
	            <apex:column headerValue="PO Number" value="{!inv.PO_Number__c}"/>
	            <apex:column headerValue="Invoice Date" value="{!inv.Invoice_Date__c}"/>
	            <apex:column headerValue="Due Date" value="{!inv.Due_Date__c}"/>
	            <apex:column headerValue="Invoice Total" value="{!inv.Invoice_Total__c}"/>
	            <apex:column headerValue="Balance" value="{!inv.Balance__c}"/>
	        </apex:pageBlockTable> 
	        
	        <apex:outputLabel value="No open invoices" rendered="{!(ISNULL(openInvoices))}" styleClass="noRowsHeader"></apex:outputLabel>
	
	    </apex:pageBlock>

 
spatelcespatelce

I hope that you can also use:

 

<apex:sectionHeader title="Custom Title" subtitle="Custom Subtitle" />

 

On Visualforce page, simply use this code. Change title and subtitle that you want to display and it will show you Standard/Custom object tab icon that you have selected.

 

-Saw
anto nirmalanto nirmal
The following code is more perfectly aligned with the salesforce standard styles: 
<apex:facet name="header">
        <div class="content">
            <img src="/s.gif" class="pageTitleIcon" >
        </div>
        <div class="pbTitle">
            <h3>Custom Title</h3>
        </div>
    </apex:facet>