Web-to-Case form with custom field look up UI

INTRODUCTION: 

  • This article gives a solution to have look up field UI on the community page form using JavaScript. Both logged in users and public users can have access to this lookup. 
  • This can be achieved using both aura component and LWC. Here is the example with Lightning component. 
  • Web- to-Case can’t work with a lookup field. This is because lookup fields must be filled with data, but as an unauthenticated user a web to case user can’t see any data. This is solved by using JavaScript and controller runs in system mode. 

LIGHTNING COMPONENT: 

Create a lightning component and controller. In this example, a  Case object is used and Account lookup custom field is created in the Case object to capture input from the user. 

To Place the component in community page, create a public access page in community.  

Lightning component code to bring the look up functionality to the community users and public users. 

Here is the component code: 

<aura:attribute name=”selectedAccountValue” type=”String”/> 

<aura:attribute name=”searchMessage” type=”String” /> 

<aura:attribute name=”searchVisible” type=”Boolean”/> 

<aura:attribute name=”columns” type=”List”/> 

<aura:attribute name=”data” type=”Object”/> 

< ! – – To display field with lookup design — > 

               <div class=”slds-grid slds-gutters”> 

                    <div class=”slds-col”> 

                        <div class=”searchbox”  aura:id=”accselector”> 

                            <lightning:input type=”text” label=”Select your account” name=”SearchAccount” value=”{!v.selectedAccountValue}” onkeyup=”{!c.searchKeyChange}” placeholder=”Search Account” aura:id=”searchacc” class=”” > 

                            </lightning:input><div class=”customErrormsg slds-form-element__help”>Complete this field.</div> 

                            <span class=”slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight”> 

                                <lightning:icon class=”slds-icon slds-icon slds-icon_small slds-icon-text-default” iconName=”utility:search” size=”x-small” alternativeText=”icon” onclick=”{! c.openModel }”/> 

                            </span> 

                            <aura:if isTrue=”{!v.searchVisible}”> 

                                <div class=”accountResult slds-scrollable”> 

                                    <lightning:spinner alternativeText=”Loading” size=”small” aura:id=”smallSpinner” /> 

                                    <table class=”slds-box slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered” aria-label=”Example table of Opportunities with a single column”> 

                                        <thead> 

                                            <tr class=”slds-line-height_reset”> 

                                                <aura:iteration items=”{!v.columns}” var=”columns”> 

                                                    <th class=”” scope=”col”> 

                                                        <div class=”slds-truncate” title=”{!columns.Name}”>{!columns.label}</div> 

                                                    </th> 

                                                </aura:iteration> 

                                            </tr> 

                                        </thead> 

                                        <tbody> 

                                            <aura:iteration items=”{!v.data}” var=”row”> 

                                                <tr class=”slds-hint-parent cursorpointer” onclick=”{!c.AddAccount}” data-accname=”{!row.Name}” data-accid=”{!row.Id}” > 

                                                    <th data-label=”Account Name” scope=”row”> 

                                                        <div class=”slds-truncate” title=”Name”> 

                                                            <a>{!row.Name}</a> 

                                                        </div> 

                                                    </th> 

                                                    <td data-label=”Billing Address”> 

                                                        <div class=”slds-truncate” title=”BillingAddress”>{!row.BillingAddress}</div> 

                                                    </td> 

                                                </tr> 

                                            </aura:iteration> 

                                        </tbody> 

                                    </table> 

                                </div> 

                            </aura:if> 

                            <aura:if isTrue=”{!v.searchMessage != null}”> 

                                <div class=”accountResult slds-box fullwidth”> 

                                    <label class=”slds-form-element__label”> {!v.searchMessage}</label> 

                                </div> 

                            </aura:if>  

                        </div> 

                    </div> 

                </div> 

On clicking the search icon, a modal window opens, and it shows the list of account records with the pagination in the table format. User can select the Account using the radio button and the script copies the account selected value to the custom field. SearchMessage variable shows the result content by matching key value and the records found from the query displayed in table format as drop down.  

CONTROLLER 

searchKeyChange : function(cmp, event, helper) { 

// bring the result on the lookup by matching the key value 

         cmp.set(“v.searchVisible”, true); 

        cmp.set(“v.searchMessage”, null); 

        var inputCmp = cmp.find(“searchacc”); 

        var value = inputCmp.get(“v.value”); 

        var isVisible = false; 

        console.log(‘value.length’+value.replace(/ /g, “”).length); 

        if(value.replace(/ /g, “”).length > 0){ 

            isVisible = true; 

        } 

        else{ 

            cmp.set(“v.searchMessage”, null); 

            isVisible = false; 

        } 

        if(isVisible){  

            var action = cmp.get(“c.searchAccount”); 

            action.setParams({ searchKey : value}); 

            action.setCallback(this, function(response) { 

                var state = response.getState(); 

                if (state === “SUCCESS”) { 

                    var result = response.getReturnValue(); 

                    var searchMap = []; 

                    if(result.length > 0){ 

          for(var key in result){ 

  result[key].BillingAddress = JSON.stringify(result[key].BillingAddress); 

                        } 

                        cmp.set(“v.data”, result); 

                         cmp.set(“v.searchMessage”, null); 

                         $A.util.addClass(cmp.find(“smallSpinner”), “slds-hide”);  

                    }else{ 

                        cmp.set(“v.data”, “”); 

                        cmp.set(“v.searchVisible”, false); 

                        cmp.set(“v.searchMessage”, “No records found”); 

                    } 

                    cmp.set(“v.isLoading”, false); 

                } 

            }); 

            $A.enqueueAction(action); 

        }else{ 

            cmp.set(“v.isLoading”, false); 

            cmp.set(“v.searchVisible”, false); 

        } 

    } 

openModel: function(cmp, event, helper) { 

        // Set isModalOpen attribute to true 

        cmp.set(“v.isModalOpen”, true); 

    }, 

    closeModel: function(cmp, event, helper) { 

        // Set isModalOpen attribute to false   

        cmp.set(“v.isModalOpen”, false); 

    } 

<!—Show all the account records in modal windows when clicking search icon — > 

<aura:if isTrue=”{!v.isModalOpen}”> 

        <!– Modal/Popup Box starts here–> 

        <section role=”dialog” tabindex=”-1″ aria-labelledby=”modal-heading-01″ aria-modal=”true” aria-describedby=”modal-content-id-1″ class=”slds-modal slds-fade-in-open”> 

            <div class=”slds-modal__container”> 

                <!– Modal/Popup Box Header Starts here–> 

                <header class=”slds-modal__header”> 

                    <lightning:buttonIcon iconName=”utility:close” 

                                          onclick=”{! c.closeModel }” 

                                          alternativeText=”close” 

                                          variant=”bare-inverse” 

                                          class=”slds-modal__close”/> 

                    <h2 id=”modal-heading-01″ class=”slds-text-heading_medium slds-hyphenate”>Search Account</h2> 

                </header> 

                <!–Modal/Popup Box Body Starts here–> 

                <div class=”slds-modal__content slds-p-around_medium” id=”modal-content-id-1″> 

                    <c:SearchAccount  selectedAccountValue=”{!v.selectedAccountValue}” selectedAccountId=”{!v.caseRec.Account__c}”/> 

                </div> 

            </div> 

        </section> 

        <div class=”slds-backdrop slds-backdrop_open”></div> 

    </aura:if> 

Child component is used to show the Account all records data table. 

<lightning:datatable aura:id = “accDT” 

                             columns = “{!v.columns}” 

                             maxRowSelection=”1″ 

                             data = “{!v.data}” 

                             keyField = “Id” 

                             selectedRows = “{!v.selectedRowList}” 

                          onrowselection=”{! c.AddSelectRow }” 

                             /> 

Without Sharing is used on the apex class to bring the lookup functionality for public users on the community page. 

@AuraEnabled(cacheable=true) 

     public static List<Account> searchAccount(String searchKey){ 

        List<Account> acclist = new List<Account>(); 

         String searchString= searchKey+’%’; 

        for (Account a : [SELECT Id, Name, BillingAddress FROM Account WHERE AQB__AccountStatus__c = ‘Active’ AND NEI__c = true AND Name LIKE :searchString]) { 

                      acclist.add(a); 

                  } 

return acclist; 

    } 

@AuraEnabled 

    public static List<Account> getAccountList(Integer pageSize, Integer pageNumber){ 

         Integer offset = (pageNumber – 1) * pageSize; 

        List<Account> acclist = new List<Account>(); 

        for (Account a : [SELECT Id, Name, BillingAddress FROM Account WHERE AQB__AccountStatus__c = ‘Active’ AND NEI__c = true LIMIT :pageSize OFFSET :offset]) { 

                      acclist.add(a); 

                  } 

return acclist; 

    } 

For further information, refer this link https://varasi.com/development-and-admin/custom-lookup-in-salesforce-using-lightningrecordeditform/ 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.