1

I want to display all the converted leads on Visualforce page with ConvertedAccountName, ConvertedContactName and ConvertedOpportunityName.

  1. At the beginning Account,Contact and Opportunity details should be hidden and on click of that lead its related account,Opportunity and Contact details should be displayed inline.
  2. When I click on any other lead the previously shown details should be hidden and newly clicked Lead's Account,Contact and Opportunity details should be displayed inline.
  3. If I click on the same lead which has shown the Account,Contact and Opportunity details.these details should be hidden and only lead should be visible.

I wrote a code using Jquery but it shows and hides all the details related to all the leads. Any suggestion on below code:

public with sharing class CtrlLeadManager {

    public List<Lead> lstLead{get;set;} // list to hold the leadDetails

    public CtrlLeadManager() {

        // fetch AccountId,OpportunityId,ContactId from leads where isConverted = true  
        lstLead = [SELECT Id,Name,ConvertedAccountId,ConvertedAccount.Phone,
                    ConvertedAccount.Email_Address__c,ConvertedContactId,ConvertedContact.Phone,
                    ConvertedContact.Email,ConvertedOpportunityId,ConvertedOpportunity.CloseDate,
                    ConvertedOpportunity.StageName 
                    FROM Lead 
                    WHERE isConverted = true];

    }
}

Page:

<apex:page controller="CtrlLeadManager" sidebar="false">
<apex:includeScript value="{!URLFOR($Resource.jquery,'')}" />
<!-- <style>table tr:not(:first-child) {
    background-color: #900;
}</style> -->
<style>
.alnleft1 {
    margin-left:50px;
}
.alnLeft2 {
    margin-left:20px;
}
th {
    background-color:gray;
}
diffColor {
backgound-color:green;
}
.textAln {text-align:Center;padding:5px;}
</style>
    <apex:form >
        <apex:pageBlock title = "Converted Leads">

            <apex:repeat value="{!lstLead}" var="leadInstance">
            <table style = "margin-left:50px;width:900px;padding:10px;" >
                <tr class = "leadRow">
                    <td>
                        <div class = "leadDiv"><b>{!leadInstance.Name}</b></div>
                    </td>
                </tr>
                <apex:outputPanel >
                    <tbody class="tbl" data-attr="hide" style="display:none;background-color:white;">
                        <tr><th class = "textAln">Account Name</th><th class = "textAln"> Phone</th><th class = "textAln">Email</th></tr>
                        <tr>
                            <td class = "textAln">   
                                <apex:outputField value="{!leadInstance.ConvertedAccountId}" rendered = "{!if(leadInstance.ConvertedAccountId!=null,true,false)}" />
                            </td>
                            <td class = "textAln">       
                                <apex:outputField value = "{!leadInstance.ConvertedAccount.Phone}" rendered = "{!if(leadInstance.ConvertedAccount.Phone!=null,true,false)}"/>
                            </td>
                            <td class = "textAln">
                                <apex:outputField value = "{!leadInstance.ConvertedAccount.Email_Address__c}" rendered = "{!if(leadInstance.ConvertedAccount.Email_Address__c!=null,true,false)}"/> 
                             </td>
                        </tr>
                        <tr ><th class = "textAln">Contact Name</th><th class = "textAln"> Phone</th><th class = "textAln">Email</th></tr>
                        <tr>
                            <td class = "textAln">
                                <apex:outputField value="{!leadInstance.ConvertedContactId}" rendered = "{!if(leadInstance.ConvertedContactId!=null,true,false)}"/>
                            </td>
                            <td class = "textAln">   
                                <apex:outputField value="{!leadInstance.ConvertedContact.Phone}" rendered = "{!if(leadInstance.ConvertedContact.Phone!=null,true,false)}"/>
                            </td>
                            <td class = "textAln">  
                                <apex:outputField value = "{!leadInstance.ConvertedContact.Email}" rendered = "{!if(leadInstance.ConvertedContact.Email!=null,true,false)}"/>
                            </td>
                        </tr>
                        <tr><th class = "textAln">Opportunity</th><th class = "textAln">Close Date</th><th class = "textAln">Stage</th></tr>
                            <tr>
                            <td class = "textAln">
                                <apex:outputField value="{!leadInstance.ConvertedOpportunityId}" rendered = "{!if(leadInstance.ConvertedOpportunityId!=null,true,false)}"/>
                            </td>
                            <td class = "textAln">
                                <apex:outputField value="{!leadInstance.ConvertedOpportunity.CloseDate}" rendered = "{!if(leadInstance.ConvertedOpportunity.CloseDate!=null,true,false)}"/>
                            </td>
                            <td class = "textAln">
                                <apex:outputField value="{!leadInstance.ConvertedOpportunity.StageName}" rendered = "{!if(leadInstance.ConvertedOpportunity.StageName!=null,true,false)}"/>
                            </td>
                        </tr>
                    </tbody>

                </apex:outputPanel>
            </table>
            </apex:repeat>

        </apex:pageBlock>
    </apex:form>
    <script>
        <apex:includeScript value="{!URLFOR($Resource.jquery,'')}" />
            $j = jQuery.noConflict();

            jQuery(function($) {
            $(".leadRow").click(function(){
                //$(this).css("background-Color","gray");
                if($(this).parent().next().attr('data-attr')!='show')
                {
                    $(".tbl").css('display','none');
                    $(".tbl").attr('data-attr','hide');
                } 
                $(this).parent().next().toggle();
                $(this).parent().next().attr('data-attr','show');
            });
        });


        /*jQuery(function($) {
         $(".leadDiv").click(function() {
        $(this).closest("tr").siblings().removeClass("diffColor");
        $(this).parents("tr").toggleClass("diffColor", this.clicked);
    });
    });   */
    </script>
</apex:page>`
1

Your code is expanding and collapsing all items because you are applying css using css selector. You need to tweak your code a little bit as shown below.

Summarized changes:

  1. Detect current item using $(this)
  2. Apply display none only to child element
  3. add a html attribute data-attr which satisfy your #3 point.

    <apex:page controller="CtrlLeadManager" sidebar="false">
    <apex:includeScript value="{!URLFOR($Resource.jquery,'')}" />
    $j = jQuery.noConflict();
    //$(document).ready(function() {
    jQuery(function($) {
        $(".leadRow").click(function(){
    
            if($(this).parent().next().attr('data-attr')!='show')
            {
               $(".tbl").css('display','none');
               $(".tbl").attr('data-attr','hide');
            } 
            $(this).parent().next().toggle();
            $(this).parent().next().attr('data-attr','show');
        });
    });
    </script>
    <apex:form >
        <apex:pageBlock >
            <apex:repeat value="{!lstLead}" var="leadInstance">
    
            <tr class = "leadRow"><td><div >{!leadInstance.Name}</div></td>
            </tr>
                <apex:outputPanel >
                    <apex:outputPanel >
                    <tbody class="tbl" data-attr="hide" style="display:none">
                    <tr><td><apex:outputField value="{!leadInstance.ConvertedAccountId}"/></td></tr>
                    <tr><td><apex:outputField value="{!leadInstance.ConvertedContactId}"/></td></tr>
                    <tr><td><apex:outputField value="{!leadInstance.ConvertedOpportunityId}"/></td></tr>
                    </tbody>
                    </apex:outputPanel>
                </apex:outputPanel>
            </apex:repeat>
        </apex:pageBlock>
    </apex:form>
    

If you feel any trouble. feel free to put your comment I am happy to explain.

| improve this answer | |
  • @Himanshu.Thanks a lot Himanshu!!!It worked.Now I want to show the toggling details with some fancy panel.Can you help me with that? – Sam brooks Mar 29 '16 at 5:58
  • @Himanshu.Please find my updated code for the page in the question I have edited. – Sam brooks Mar 29 '16 at 6:23
  • Now I want to highlight the selected row when selected and unhighlight when other is selected.I tried many jquery function but its not working.Can you help me @Himanshu with the same.I have updated the page in my question – Sam brooks Mar 29 '16 at 14:16
  • hightlight in what sense ? can you put a screenshot ? – Himanshu Mar 29 '16 at 18:16
  • Thanks @Himanshu its done.I just added hover effect to the div - 'leadDiv' – Sam brooks Mar 31 '16 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.