3

I'm working on a custom object merge feature and am having difficulty replicating the standard SF merge UI. I'm hoping to use <apex:selectRadio> to display field values on a row, with the columns representing the different records. The radio option value (value attribute in <input type="radio">) would contain the record Id and the option label the field value. That way, when merging, I can just pull the <apex:selectRadio> value and know which record to copy the field data from.

I cannot get <apex:selectRadio> to display the field values correctly within a row because it outputs a <fieldset> containing a <table> .

Anyone done this using <apex:selectRadio>? Any other approaches/suggestions welcome.

For those not familiar with SF's standard merge UI, here it is:

enter image description here

Here's what I've tried so far:

VF

<apex:page standardController="Widget__c" extensions="WidgetMergeExt" showHeader="true" sidebar="true" recordSetVar="widgets">

  <apex:form>
    <apex:pageBlock>
      <apex:pageBlockTable value="{!fields}" var="field">
        <apex:column>
          <apex:selectRadio value="{!field.radioValue}">
            <apex:selectOptions value="{!field.options}"/>
          </apex:selectRadio>
        </apex:column>
      </apex:pageBlockTable>
    </apex:pageBlock>
  </apex:form>

</apex:page>

Apex

public with sharing class WidgetMergeExt {

    private ApexPages.StandardSetController setCon;
    public List<String> fieldNames {get; set;}
    public List<Field> fields {get; set;}

    public WidgetMergeExt(ApexPages.StandardSetController setCon) {
        this.setCon = setCon;
        fieldNames = new List<String> {'Name','CreatedDate','LastModifiedDate'};
        fields = new List<Field>();
        List<Widget__c> widgetsToMerge = [ SELECT Name,CreatedDate,LastModifiedDate FROM Widget__c WHERE Id IN :setCon.getSelected() ];
        for (String fieldName : fieldNames) {
            List<SelectOption> options = new List<SelectOption>();
            for (Widget__c widget : widgetsToMerge) {
                String value = String.valueOf(widget.Id);
                String label = String.valueOf(widget.get(fieldName));
                options.add(new SelectOption(value, label));
            }
            fields.add(new Field(options));
        }
    }

    class Field {
        public List<SelectOption> options {get; set;}
        public String radioValue {get; set;}
        public Field(List<SelectOption> options) {
            this.options = options;
            this.radioValue = '';
        }
    }
}

Because <apex:selectRadio> outputs a table, the result is a single-column table with the column containing the selectRadio-generated table with a for each option like so:

(example row)

  <tr class="dataRow even  first" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
    <td class=" dataCell  " id="j_id0:j_id1:j_id2:j_id3:0:j_id4" colspan="1">
      <fieldset style="border: none;">
        <table role="presentation">
          <tbody>
            <tr>
              <td>
                <input type="radio" name="j_id0:j_id1:j_id2:j_id3:0:j_id5" id="j_id0:j_id1:j_id2:j_id3:0:j_id5:0" value="a0KM0000009OusKMAS">
                <label for="j_id0:j_id1:j_id2:j_id3:0:j_id5:0">Test Record 1</label>
              </td>
              <td>
                <input type="radio" name="j_id0:j_id1:j_id2:j_id3:0:j_id5" id="j_id0:j_id1:j_id2:j_id3:0:j_id5:1" value="a0KM0000009OusLMAS">
                <label for="j_id0:j_id1:j_id2:j_id3:0:j_id5:1">Test Record 2</label>
              </td>
              <td>
                <input type="radio" name="j_id0:j_id1:j_id2:j_id3:0:j_id5" id="j_id0:j_id1:j_id2:j_id3:0:j_id5:2" value="a0KM0000009OusMMAS">
                <label for="j_id0:j_id1:j_id2:j_id3:0:j_id5:2">Test Record 3</label>
              </td>
            </tr>
          </tbody>
        </table>
      </fieldset>
    </td>
  </tr>

Here's a screenshot: enter image description here

6

The Salesforce Foundation's Nonprofit Starter Pack has a custom merge functionality with a "paint your own record" type UI. The code is open source. Here is a good overview of the functionality:

http://salesforcefoundation.screenstepslive.com/s/npsp/m/contacts/l/20012-merging-contacts

And here is a link to the code:

Helper Class: https://github.com/SalesforceFoundation/Cumulus/blob/dev/src/classes/CON_ContactMerge.cls

Controller: https://github.com/SalesforceFoundation/Cumulus/blob/dev/src/classes/CON_ContactMerge_CTRL.cls

Test: https://github.com/SalesforceFoundation/Cumulus/blob/dev/src/classes/CON_ContactMerge_TEST.cls

VF Page: https://github.com/SalesforceFoundation/Cumulus/blob/dev/src/pages/CON_ContactMerge.page

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.