Salesforce only allows you to search an sObject by name. Fonteva's Lookup component allows you to search your sObjects using flexible search terms. Additionally, you can use customized templates to search multiple sObjects in one picklist.

There are two ways to handle creating a Lookup field in your component.

The simple way is a single line of code:

Simple Lookup Field

<Framework:InputFields qaData='{"type" : "input", "name": "incomeAccount"}' group="ticketTypeBuilder" fieldType="lookup"
                   aura:id="incomeAccount" label="{!$Label.c.Income_Account_Event_Builder}" value="{!v.ticketTypeObj}" otherAttributes='{"type" : "OrderApi__GL_Account__c"}'/>
JS

The otherAttributes field includes the sObject type you wish to search on. In the above example, this lookup field searches any sObject that includes a field type you specify. The list automatically updates as the sObject is updated.

Sharing Rules

By default, your Salesforce Sharing Rules apply. See Sharing Rules for more information.

Advanced Options in Lookup

Fonteva allows you to override or extend the functionality of your Lookup fields using the otherAttributes object. This object contains the arrays to override Salesforce's defaults. A full list of configuration options is available at Selectize.js.

Fonteva allows you to disable Sharing Rules for your Lookup field. You can add the attribute enforceSharingRules to otherAttributes to disable those rules. For example:

otherAttributes : enforceSharingRules

var otherAttributes = {
            advanced: true,
            enforceSharingRules : false,
JS

Before adding in any customization through otherAttributes, you must set the advanced value to true. This allows you to override any defaults available in the Lookup component. For instance, setting the enforceSharingRules to false disables Salesforce Sharing Rules for your field.

By setting the advanced field to true, you are able to provide each individual override.

For example, in the Lookup field, there are several top-level attributes you can customize:

Top-level Lookup otherAttributes

var otherAttributes = {
            advanced: true,
            enforceSharingRules : false,
            concatenateLabel : true,
            types : {
                Contact : {
                    fieldNames : fieldList,
                    filter : filter,
                    initialLoadFilter : filter + ' Order By LastModifiedDate ASC LIMIT 100'
                },
                OrderApi__Assignment__c : {
                    fieldNames : ['OrderApi__Full_Name__c', 'OrderApi__email__c'],
                    filter : 'Id = null',
                    initialLoadFilter : 'Id = null'
                },
                EventApi__Waitlist_Entry__c : {
                    fieldNames : ['EventApi__Full_Name__c', 'EventApi__Email__c'],
                    filter : 'Id = null',
                    initialLoadFilter : 'Id = null'
                }
            },
JS

Configurable Attributes

  • fieldNames - An array of strings for all the fields and related fields your lookup component searches on. The field searched does not have to exist on all sObjects listed.
    • For example, sObjectLabel and Name are provided for you by the system in the above code block. Email and OrderApi__Preferred_Email are fields that are searched in Contact, OrderApi__Assignment, and EventApi__Waitlist_Entry.
  • filter - The SOQL filter that is created by the lookup inputField. This produces an SOQL statement.
  • initialLoadFilter - The prepopulated data when the inputField is first instantiated.

otherMethods

The otherMethods array allows you to use any option Selectize.js exposes and pass it into your Fonteva component. Some otherMethods contain multiple methods. Each one of these is configurable to your specification. See Selectize.js Usage Documentation for a full list of configurable attributes.

Each otherMethod must have the $A.getCallback attribute included. This method provides Lightning with the order of execution automatically. For more information, see Modifying Components Outside the Framework Lifecycle for more information.

render

Fonteva exposes the render object. Render allows you to provide custom HTML templates for your lookup drop-down menus. The item object provided includes the field names within the types attribute in the code example above.

otherMethods: Render

render: {
   create : true
   searchField : ['sObjectLabel', 'Name', 'Email', 'OrderApi__Preferred_Email__c'],
   option: $A.getCallbackfunction(
       function()(function(item, escape) {
       if (item.type === 'OrderApi__Assignment__c') {
           return '';
       }
       if (item.type === 'EventApi_Waitlist_Entry__c') {
          return '';
       }
       var lowerText = '';
       if (!$A.util.isEmpty(fields)) {
          fieldList.forEach(function(element) {
              if (item.sObj.hasOwnProperty(element)
                  && !$A.util.isEmpty(item.sObj[element])
                  && element.toLowerCase() !== 'name') {
                  var elementToDisplay = item.sObj[element];
                  if (lowerText === '') {
                      if ($A.util.isObject(elementToDisplay)) {
                          lowerText = Object.values(elementToDisplay).join(', ');
                      }
                      else {
                         lowerText = elementToDisplay;
                      }
                  } else {
                     if ($A.util.isObject(elementToDisplay)) {
                         lowerText += '&nbsp;&nbsp;' + '&bull;' + '&nbsp;&nbsp;' + escape(Object.values(elementToDisplay).join(', '));
                     }
                     else {
                         lowerText += '&nbsp;&nbsp;' + '&bull;' + '&nbsp;&nbsp;' + escape(elementToDisplay);
                     }
                 }
             }
         });
     }
     return '<div class="slds-grid">' +
         '<div class="slds-p-right--xx-small slds-shrink-none" style="height: 0;">' +
         '<img src="' + $A.get('$Resource.Framework__SLDS_Icons') +
         '/icons/utility/user_60.png" width="12"/>' +
         '</div>'+
         '<div class="slds-grid slds-wrap slds-size--1-of-1">' +
         '<div class="slds-col slds-size--1-of-1 slds-align-middle">' +
         '<strong style="line-height: 1.4;">' + escape(item.sObj.Name) + '</strong>' +
         '</div>'+
         '<div class="slds-col slds-size--1-of-1 slds-text-body--small">' +
         lowerText +
         '</div>' +
         '</div>' +
         '</div>';
     },
}
JS

This option requires you to provide an item and an escape. The escape is used to escape any text to ensure there is no cross-site scripting. The option then allows you to create custom HTML templates to customize how the drop-down appears. You can also provide your own HTML templates to determine how items display once selected.

option_create

Another example is the option_create. This enables you to allow the user add their own picklist items in the drop-down menu.

In order to use option_create, you must set the create attribute to "true" in the render method above.

Lookup otherMethods option_create

option_create : 
$A.getCallback(function(){function (data, escape) {
    return '<div class="slds-grid slds-grid_vertical create" data-selectable="true">'+
    '<div class="slds-m-bottom_xx-small">'+ escape(data.input) +' is not in our system.</div>' +
    '<div><a href="javascript:void(0)">+ Add ' + escape(data.input) + '</a></div>' +
    '</div>';
    }
}}),
JS

create

An additional otherMethod function is create. Like the render method, create allows you to inject your own custom HTML. It also allows you to call your wrapping component. For example, if you have a component that instantiates a lookup component, the create function can call the original component automatically if you provide your reference component as in the component.find attribute in the code example below.

Lookup otherAttributes create

create : $A.getCallback(function(){function(input) {
    var firstName = input.substr(0, input.indexOf(' '));
    var lastName = input.substr(input.indexOf(' ') + 1);
    component.find('firstName').updateValue(firstName);
    component.find('lastName').updateValue(lastName);
    component.find('preferredEmail').updateValue('Personal');
    component.find('email').updateValue(null);
    if (!$A.util.isEmpty(component.find('matchingField'))) {
       component.find('matchingField').updateValue(null);
       }
    if (!$A.util.isEmpty(component.get('v.guestRegistrationFieldsGlobals'))) {
       component.get('v.guestRegistrationFieldsGlobals').forEach(function(element){
       $A.getComponent(element).updateValue(null);
       });
    }
    component.find('addAttendeeBtn').set('v.disable',component.get('v.eventObj.createContactForAttendees'));
    self.updateTicketModalBody(component);
    self.showPopover(component);
        return {
        id: component.getLocalId(),
        text: function() {
        input = firstName + ' ' + lastName;
        return input;
        }
    }})
}
JS

The component object of the initializing Lightning Component is accessible inside of the methods passed through your inputField. In the above example, the component is rendering the EventRegistrationController. Even though this component is executed in a completely different package, it can still modify things in the linked component. This is achievable because of the $A.getCallback attribute ensuring that Lightning Framework renders the wrapped component and process any queued actions correctly.

See Full Lookup Field Code for the complete code block. 

AdvancedSelectInputField

This component provides the user with a static picklist instead of a lookup field. You still have all the above configuration options as in lookup (e.g.: using custom HTML templates and grouping). However, instead of a true lookup field, this is a picklist. 

Any option selectize.js offers can be configured in your AdvancedInputField.