How to create side-by-side record comparison in VisualForce

Question

The company recently came upon the need to create a side by side record comparison in Visualforce / Apex. We routinely have the need to merge leads into contacts. Previously this was handled in S-Controls; however, recent initiatives and desire to have support for our code on into the future has pushed us to move many of our S-Controls into Visualforce pages and Apex code.

We are looking to achieve something like this:

I have experimented somewhat (with little luck) doing this using the apex:pageBlockTable tag; however, I am not sure how to get two sets of data to render through when it is expecting a single SObject.

All of the prior code I have to work with was done in S-Controls using JavaScript; and while this code does work now - we need to port this to a VisualForce page. Obviously I can manually write this using HTML tables...etc but I believe that defeats the purpose of using the stock Salesforce functionality.

I'm definitely open to alternative methods - as the one i have outlined works, but requires an almost painful amount of coding to make it viable (especially as fields are updated/removed/added in the future).

Answer 1

The answer ended up being very straight forward!

First - As it turns out, the apex:pageBlockTable can handle pretty much any kind of object passed into the value parameter, be it an array of SObjects or an array of MyFooBar objects.

Second - we needed a wrapper class to encapsulate two records at the same time:

public with sharing class LeadContactCompareWrapper {
    public static final String SALUTATION = 'Salutation';
    public static final String FIRST_NAME = 'First Name';
    public static final String LAST_NAME = 'Last Name';
    public static final String EMAIL = 'Email';
    public static final String PHONE = 'Phone';
    public static final String STREET = 'Street';
    public static final String CITY = 'City';
    public static final String STATE = 'State';
    public static final String COUNTRY = 'Country'; 
    public static final String ZIP_POSTAL = 'Zip / Postal Code';
    public static final String TITLE = 'Title';
    public static final String PRIMARY_FUNCTIONAL_ROLE = 'Primary Functional Role';
    public static final String SECONDARY_FUNCTIONAL_ROLE = 'Secondary Functional Role';
    public static final String BULLETIN = 'Bulletin'; 
    public static final String CREDIT_MEMO = 'Credit Memo';
    public static final String FS_INSIGHTS = 'FS Insights';
    public static final String MANUFAC_IND_INSIGHTS = 'Manufact. Ind Insights';
    public static final String LIT_AND_FRAUD = 'Lit. & Fraud News';
    public static final String REGULATORY_INSIGHTS = 'Regulatory Insights';

    private Lead lead; 
    private Contact contact; 

    public List<Compare> information { get; set; }
    public List<Compare> marketing { get; set; }
    public List<Compare> furtherDetails { get; set; }

    public List<SelectOption> names { get;set; }
    public String newName { get;set; }

    public Id getContactId() { 
        return this.contact.Id;
    }
    public Id getAccountId() { 
        return this.contact.Account.Id;
    }
    public Id getLeadId() { 
        return this.lead.Id;
    }

    public Lead getLead() { 
        return this.lead;
    }

    public Contact getContact() { 
        return this.contact;
    }

    public LeadContactCompareWrapper(Lead lead, Contact contact) { 
        this.lead = [Select Id, DeliveryPreference__c, ACE__c,AML__c,BusContinuity__c,CorpGovSOX__c,ERM__c,FinancialRisk__c,InternalAudit__c,ITAsset__c,ITAudit__c,ITSecurity__c,LitSupport__c,ORM__c,SelfAssessment__c,SpendRisk__c, Owner.Name, Company, Bulletin__c,Credit_Memo__c,FSInsights__c,Manufact_Ind_Insights__c,LitFraudNews__c,RegulatoryInsights__c, LastModifiedDate, Salutation, FirstName, LastName, Email, Phone, Street, City, State, Country, PostalCode, Title, Primary_Functional_Role__c, SecondaryFunctionalRole__c From Lead Where Id = :lead.Id];
        this.contact = [Select Id, Owner.Name, Account.Id, Account.Name, Bulletin__c,Credit_Memo__c,FSInsights__c,Manufact_Ind_Insights__c,LitFraudNews__c,RegulatoryInsights__c,  LastModifiedDate, Salutation, FirstName, LastName, Email, Phone, MailingStreet, MailingCity, MailingState, MailingCountry, MailingPostalCode, Title, Primary_Functional_Role__c, SecondaryFunctionalRole__c From Contact Where Id = :contact.Id];

        this.init();
    }

    private void init() { 
        this.information = new List<Compare>();
        this.marketing = new List<Compare>();
        this.furtherDetails = new List<Compare>();

        // this part will suck but it has to be done
        information.add(this.createCompare(SALUTATION, 
                        (this.lead.Salutation != null) ? this.lead.Salutation : '', 
                        (this.contact.Salutation != null) ? this.contact.Salutation : ''
                        ));
        /* Continue adding as many compare fields for the 'information' section as needed... */
        // Marking Subscriptions
        marketing.add(this.createCompare(BULLETIN, 
                        (this.lead.Bulletin__c != null) ? this.lead.Bulletin__c : '', 
                        (this.contact.Bulletin__c != null) ? this.contact.Bulletin__c : ''
                        ));
        /* Continue adding as many compare fields for the 'marketing' section as needed... */                       

        // Further information - just for display purposes
        furtherDetails.add(this.createCompare('Owner', 
                        (this.lead.Owner.Name != null) ? this.lead.Owner.Name : '', 
                        (this.contact.Owner.Name != null) ? this.contact.Owner.Name : '',
                        false,
                        true
                        ));
        /* Continue adding as many compare fields for the 'further information' section as needed... */                     
    }

    /*
     * Creates a comparison object
     */
    private Compare createCompare(string label, String val1, String val2, Boolean isVal1, Boolean isVal2) { 
        Compare c = new Compare(label);
        c.selectVal1 = isVal1;
        c.selectVal2 = isVal2;
        c.val1 = val1;
        c.val2 = val2;

        return c;
    }

    /*
     * Defaults our comparison to value 1 as selected
     */
    private Compare createCompare(String label, String val1, String val2) {
        return createCompare(label, val1, val2, true, false);
    }
}

Third - We need to create a 'compare' class that holds two values and two booleans based on which value is selected (and a row label to display on the table):

public class Compare { 
    public Compare (String label) { 
    this.label = label;
    }

    public String label { get; set; }
    public Boolean selectVal1 { get; set; }
    public Boolean selectVal2 { get; set; }
    public String val1 { get; set; }
    public String val2 { get; set; }
}

Then it is as simple as putting it all on a VF page with the following:

<apex:pageblocktable value="{!leadToContact.information}" var="compare">
    <apex:column>
        <apex:facet name="header">Information</apex:facet>
        {!compare.label}
    </apex:column>
    <apex:column>
        <apex:facet name="header">Lead</apex:facet>
        <apex:inputcheckbox id="val1" label="{!compare.val1}" onclick="uncheckOtherCompare(this);" title="{!compare.val1}" value="{!compare.selectVal1}" />
        <apex:outputlabel value="{!compare.val1}" />
    </apex:column>
    <apex:column>
        <apex:facet name="header">Contact</apex:facet>
        <apex:inputcheckbox id="val2" label="{!compare.val2}" onclick="uncheckOtherCompare(this);" value="{!compare.selectVal2}" />
        <apex:outputlabel value="{!compare.val2}" />
    </apex:column>
</apex:pageblocktable>

Finally we just need a little javascript to make the radio buttons behave properly :)

function uncheckOtherCompare(obj) {
    // Get the id of the object being checked
    var objId = obj.id;

    if (objId.indexOf('val1') >= 0) {
      objId = objId.replace('val1', 'val2');  
    } else {
      objId = objId.replace('val2', 'val1'); 
    }

    if (obj.checked) {
      document.getElementById(objId).checked = false; 
    } else if (!document.getElementById(objId).checked) {
      // If the user is trying to uncheck both boxes, recheck the box that is being passed in.  
      // We can't have 'no' boxes checked on a given row
      obj.checked = true; 
    }
}

The javascript can be placed pretty much anywhere on the page, but it's best to either link it or place it at the top of the document just after the opening tag.

Once this has been done you can (from the code) access your LeadContactCompareWrapper.[information|marking|furtherDetails] array and step through each one to determine the selected values, or write additional helper classes to expedite the process.

With this in place we were able to create a side-by-side record comparison that allowed us to merge our leads directly into our contacts!