How to create parallel comparison of records in VisualForce

Question

Recently, the company was faced with the need to create a comparative comparison of records in Visualforce / Apex. We usually have a need to combine the findings into contacts. This was previously handled in S-Controls; however, recent initiatives and a desire to support our code in the future have forced us to move many of our S-Controls to Visualforce and Apex pages.

We want to achieve something like this:

I experimented a bit (with little luck) by doing this with the apex:pageBlockTable tag apex:pageBlockTable ; however, I'm not sure how to get two datasets for visualization when it expects one SObject.

All the previous code I have to work with was executed in S-Controls using JavaScript; and while this code really works, we need to transfer it to the VisualForce page. Obviously, I can manually write this using HTML tables ... etc., but I believe that this defeats the goal of using Salesforce functionality.

I am definitely open to alternative methods - like the one I outlined but requires an almost sick amount of coding to make it viable (especially when fields are updated, deleted / added in the future).

Answer 1

The answer was very direct!

First one . As it turned out, apex:pageBlockTable can process almost any object passed in the value parameter, whether it be an array of SObjects or an array of objects MyFooBar.

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 contains two values ​​and two logical elements based on which value is selected (and the row label to display in 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's 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 some javascript to get the switches to 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; } } 

Javascript can be placed almost anywhere on the page, but it’s best to either link it or place it at the top of the document immediately after opening the tag.

Once this is done, you can (from the code) access your LeadContactCompareWrapper.[information|marking|furtherDetails] and go through each one to determine the selected values, or write additional helper classes to speed up the process.

With this in place, we were able to create a comparative comparison of the records, which allowed us to integrate our leaders directly into our contacts!