2

Simple story: As a sales user, I want to mass assign leads to a teammate, so I can better distribute our total workload. The constraint is that I need to do this in Lightning Experience, in which the standard Change Owner button doesn't work.

Trailhead and the Winter '17 Release Notes both imply that to create a mass action that operates on a standard list view, Visualforce is the only option.

For the simple UX implied in the screenshot below, what is the easiest way for me to create a clean lookup field that fits the look and feel of LEX?

New Owner field and Assign button

The only way I know to have Salesforce generate a lookup field is to use the apex:inputField tag and bind it to an SObject field such as Lead.OwnerId.

But when I tried to combine apex:inputField with SLDS markup, the result was pretty ugly. Code and screenshot below.

        <apex:form styleClass="slds-form--inline">
          <div class="slds-form-element">
            <div class="slds-form-element__control">
              <apex:inputField id="owner" styleClass="slds-input"
                               value="{!anyLead.OwnerId}" />
            </div>
          </div>
          <div class="slds-form-element">
            <button class="slds-button slds-button--brand"
                    type="button">Assign</button>
          </div>
        </apex:form>

New Owner field rendered from apex:inputField

0

Here is what I created. The lookup field is not relevant, just do not use slds class for the lookup field. It will look weird, but it will save you dev time.

(I have created a custom lookup component for internal use but not sure if it is worth the time for you).

The first section is the list views that you can select. This takes the list views you already have and allow you to edit from here. I believe the limit is 50 per page. There is a way around it, but you should look at Salesforce docs on list controllers.

<apex:form id="theForm">

   <apex:selectList id="list3" value="{!filterid}" size="1">
    <apex:actionFunction name="refreshMyPanel2" reRender="theForm" />
    <apex:actionSupport event="onchange" rerender="theForm"/>
       <apex:selectOptions value="{!listviewoptions}"/>
   <br></br>
   </apex:selectList>


    <apex:actionSupport event="onclick"
                            rerender="error,theForm,buttons"/>
    <apex:panelGrid columns="8" id="buttons">
            <apex:commandButton reRender="error,theForm,buttons" action="
{!Save}" value="Save"/>
            <apex:commandButton reRender="error,theForm,buttons" action="
 {!Cancel}" value="Cancel"/>
            <apex:inputHidden />
            <apex:commandButton reRender="error,theForm,buttons" disabled="
{!!hasprevious}" action="{!First}" value="First"/>
            <apex:commandButton reRender="error,theForm,buttons" disabled="
{!!hasprevious}" action="{!Previous}" value="Previous"/>
            <apex:commandButton reRender="error,theForm,buttons" disabled="
{!!hasnext}" action="{!Next}" value="Next"/>
            <apex:commandButton reRender="error,theForm,buttons" disabled="
{!!hasnext}" action="{!Last}" value="Last"/>
            <!-- Pagination -->
<table style="width: 100%" id="table1"><tr id="row">

<td>
    Page: <apex:outputText value=" {!PageNumber} of {! CEILING(ResultSize / 
 PageSize) }"/>
</td>            

<td align="center">
    <!-- Previous page -->
    <!-- Next page -->
</td>

<td align="right">
    <!-- Records per page -->
</td>





 </tr></table>

        </apex:panelGrid>

The next section is the page block with columns. Yes, I know this is not recommended in Lightning. It affects responsiveness for mobile, but it works.

<apex:pageBlock id="thePageBlock" mode="edit"> 
        <apex:pageBlockTable value="{!records}" var="record" id="acct"> 
           <apex:column width="100x">
                <apex:outputField value="{!record.Account.Name}" 
id="acctname" /> 
                <apex:facet name="header">Account Name</apex:facet>
            </apex:column>
           <apex:column width="100px">
                <apex:outputField value="{!record.Name}" id="AccountTypeDOM" 
 /> 
                <apex:facet name="header">Contact Name</apex:facet>
            </apex:column>
            <apex:column width="100px">
                <apex:outputField value="{!record.Phone}" 
                    id="phone" />  
                    <apex:facet name="header">Phone</apex:facet>
            </apex:column>
            <apex:column width="60px">
                <apex:outputField value="{!record.Email}" 
                    id="email" />  
                    <apex:facet name="header">Email</apex:facet>
            </apex:column>
            <apex:column width="100px">
                <apex:outputField value="
{!record.Accounts_Handled_by_Rep__c}" 
                    id="handled" />  
                    <apex:facet name="header">Accounts Handled</apex:facet>
            </apex:column>
            <apex:column width="25px" id="col">
                <apex:outputField value="{!record.Log_Call__c}" 
                    id="call" />  
                    <apex:facet name="header">Log Call</apex:facet>
            </apex:column>
            <apex:column >
                <apex:outputField value="{!record.Comments_Feedback__c}" 
                    id="comments" />  
                    <apex:facet name="header">Comments</apex:facet>
            </apex:column>
            <apex:column style="display:none;">
                <apex:outputField value="{!record.Id}" 
                    id="id" />  
                    <apex:facet name="header">Id</apex:facet>
            </apex:column>
            <apex:inlineEditSupport showOnEdit="saveButton,cancelButton" 
event="onclick" hideOnEdit="editButton" /> 
        </apex:pageBlockTable> 

    </apex:pageBlock>

</apex:form>

and of course you will need a list controller, below is contact, you will need to make into opps.

<apex:page standardController="Contact" recordSetVar="records" id="thePage" 
sidebar="true"> 

And then you make sure your VF Page is okay for lightning, then add to lightning page.

As always, you need to update your objects and custom fields. You can use the slds for this page, except for the lookup field. Like I said, that field is a bit more tricky because it is actually 5 fields and some javascript.

I would not put this in front a lot of users because it will not look as clean because of the styling and the lack of responsiveness but it works.

  • Thanks for the suggestion... in my case we have some rather high UX standards and I've started down a different path of getting Lightning components into Visualforce, and instead using Visualforce as a dumb container for a Lightning component. – Marty C. Apr 17 '17 at 15:26
  • Yeah, this will not work if you have high UX standards. In the long run, the route you are taking is probably much better. – disasterlooms Apr 17 '17 at 16:32
  • Still no true lookup, but better UX that more closely matches LEX: github.com/martyychang/sf-lex-change-owner – Marty C. Apr 17 '17 at 21:29
  • 1
    I use Typehead for my lookups and I made it SLDS styling. It does look good. I did not share this before because it is not quick and dirty. It may be worth looking into. I personally love it. github.com/SalesforceFoundation/visualforce-typeahead – disasterlooms Apr 18 '17 at 17:10

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.