Как создать сравнение бок о бок в VisualForce

Question

Недавно компания столкнулась с необходимостью создания сравнительного сравнения записей в Visualforce/Apex. У нас обычно есть необходимость объединить выводы в контакты. Ранее это обрабатывалось в S-Controls; однако недавние инициативы и желание поддержать наш код в будущем заставили нас переместить многие наши S-Controls на страницы Visualforce и Apex.

Мы ищем достичь что-то вроде этого:

Я экспериментировал несколько (с немного удачи) делать это с помощью apex:pageBlockTable тега; однако я не уверен, как получить два набора данных для визуализации, когда он ожидает один SObject.

Весь предыдущий код, с которым я должен работать, был выполнен в S-Controls с использованием JavaScript; и в то время как этот код действительно работает, нам нужно перенести его на страницу VisualForce. Очевидно, что я могу вручную написать это с помощью таблиц HTML ... и т. Д., Но я считаю, что это побеждает цель использования функциональности Salesforce.

Я определенно открыт для альтернативных методов - как тот, который я наметил, но требует почти больного количества кодирования, чтобы сделать его жизнеспособным (особенно, когда поля обновляются, удаляются/добавляются в будущем).

Answer 1

Ответ оказался очень прямым!

Первый - Как выясняется, apex:pageBlockTable может обрабатывать почти любой вид объекта, переданного в параметре value, будь то массив SObjects или массив объектов MyFooBar.

Второй - нам нужен класс-обертку для инкапсуляции две записи одновременно:

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); 
    } 
} 

Третий - Нам нужно создать класс «сравнить», который содержит два значения и две булевы основе на котором выбранное значение (и метка строки для отображения на стол):

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; } 
} 

Тогда это так просто, как положить все это на странице VF со следующим:

<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> 

Наконец, мы просто нужно немного JavaScript, чтобы сделать радио-кнопки ведут себя правильно :)

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 может быть помещен в значительной степени в любом месте на странице, но это лучше либо связать его или поместите его вверху документа сразу после открытия тега.

После того, как это было сделано, вы можете (из кода) получить доступ к вашему массиву LeadContactCompareWrapper.[information|marking|furtherDetails] и пройти через каждый, чтобы определить выбранные значения, или написать дополнительные вспомогательные классы для ускорения процесса.

С этим на месте мы смогли создать сравнительное сопоставление записей, которое позволило нам объединить наши выводы непосредственно в наши контакты!