Tag Archives: Visualforce Page

Highlight Selected Row in a table in Visualforce Page

Here is an example to highlight the selected row in a page block table in visualforce page. To do this add the below code snippet to your visualforce page to highlight the selected row color among the rest of the rows in same page block table.

Visualforce Page:

<apex:page standardController="Account" recordSetVar="Accounts" sidebar="false" showHeader="false">  
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>  
    <style>
        .ui-state-active{
        border: 1px solid #fbd850;
        background: rgb(199,199,199);
        font-weight: bold;
        color: #eb8f00;
        }
    </style> 
    <script>  
    function highlightRow(row){  
        $('tr').removeClass('ui-state-active');  
        $(row).parent().addClass('ui-state-active');  
    }  
    </script>  
    <apex:form >  
        <apex:pageBlock >  
            <apex:pageBlockTable value="{!accounts}" var="a">  
                <apex:column value="{!a.Name}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.AccountNumber}" onclick="highlightRow(this)"/>
                <apex:column value="{!a.Type}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.Industry}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.Phone}" onclick="highlightRow(this)"/>  
            </apex:pageBlockTable>  
        </apex:pageBlock>  
    </apex:form>    
</apex:page>  

Output:

Note: If you want to change the Highlighted color, you can write your won style class.

Salesforce: Use Tab in Visualforce Page

Visualforce Page:

<apex:page doctype="html-5.0" standardcontroller="account" tabstyle="account">
    <apex:pageblock title="{!account.Name}">
        <apex:tabpanel id="tabpanel">
         
            <apex:tab label="Account Details" rerender="tabpanel" switchtype="ajax">
            <apex:detail relatedlist="false"></apex:detail>
            </apex:tab>
             
            <apex:tab label="Contacts" rerender="tabpanel" switchtype="ajax">
            <apex:relatedlist list="Contacts"></apex:relatedlist>
            </apex:tab>
             
            <apex:tab label="Opportunities" rerender="tabpanel" switchtype="ajax">
            <apex:relatedlist list="Opportunities"></apex:relatedlist>
            </apex:tab>
             
            <apex:tab label="Cases" rerender="tabpanel" switchtype="ajax">
             <apex:relatedlist list="Cases"></apex:relatedlist>
            </apex:tab>
             
        </apex:tabpanel>
    </apex:pageblock>
</apex:page>

Note: Please pass account id in url e.g.
https://salesforce.com/apex/TabInVisualForcePage?id=0019000001DEV5z

Output:

index

How to Print a Visualforce page in Salesforce?

Controller:

public class PrintSample {
 
    public List<account> objList {get; set;}
    
    public PrintSample() {
        objList = new List<account>();
        objList = [SELECT Name, Phone FROM Account];
    }
}

Visualforce Page:

<apex:page showheader="false" controller="PrintSample">
    <apex:panelgrid width="100%" style="text-align:right;">
        <apex:form>
            <apex:commandlink value="Print" onclick="window.print();"></apex:commandlink>
        </apex:form>
    </apex:panelgrid>
    <apex:pageblock title="Account Information">
        <apex:pageblocktable value="{!objList}" var="a">
            <apex:column value="{!a.Name}"></apex:column>
            <apex:column value="{!a.Phone}"></apex:column>
        </apex:pageblocktable>
    </apex:pageblock>
</apex:page>

Output:

download

Rendering a Visualforce Page in PDF Format

You can render any page as a PDF by adding the renderAs attribute to the component, and specifying pdf as the rendering service.

For example:

<apex:page renderas="pdf">
</apex:page>

Note: Visualforce pages rendered as PDFs will either display in the browser or download as a PDF file, depending on your browser settings.

Confirm Dialog box in Visualforce page

Visualforce Page:

<apex:page>
    <apex:form>
        <apex:pageblock>
            <apex:pageblocksection title="Confirm dialog box Demo" collapsible="false">
                 <apex:commandbutton value="Click to Confirm" onclick="return confirm('Do you want to submit');"></apex:commandbutton>
            </apex:pageblocksection>
        </apex:pageblock>
    </apex:form>
</apex:page>

download