Getting Reference FieldsI(Lookup or Master detail) through dynamic apex

Hi ,

We  had a scenario

If  we get a parameter "id" in the  url  then we should  be  able to find out    object reference is present in  the object which we are  trying  to insert then we have to make it  child record for  the object  related  to id.

For eg :

On my vf page i am trying  to insert  a contact and  i got  a parameter id related to Account

through the below code  i can find out  the  field which is  reference  to  Account  and  then fill that with parameter id to get contact inserted  under account.
The following code useful getting  reference fields  under  an object not  whole  example.



Eg: Code for  getting  reference

Map<String,Schema.SObjectField>  sobjecFieldMap = schema.getGlobalDescribe().get('Contact').getDescribe().fields.getMap();
for(String fieldName:sobjecFieldMap.keyset()){ 
    if(sobjecFieldMap.get(fieldName).getDescribe().getType()== Schema.DisplayType.REFERENCE){
       System.debug(sobjecFieldMap.get(fieldName).getDescribe().getReferenceTo());
    }
   
}


Output:
---------
Contact
Account
User

Custom Lookup Creation and Example in Lightning

Hi ,

Lets how to prepare custom lookup component


Here in this example i am using "svg" component for icons but you can use lightning:icon tag instead


1)Create LC_svg component:

<aura:component >
    <aura:attribute name="class" type="String" description="CSS classname for the SVG element" />
    <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#account" />
    <aura:attribute name="aria-hidden" type="String" default="true" description="aria-hidden true or false. defaults to true" />
</aura:component>

Renderer:
({
render: function(component, helper) {
//grab attributes from the component markup
var classname = component.get("v.class");
var xlinkhref = component.get("v.xlinkHref");
var ariaHidden = component.get("v.aria-hidden");

//return an svg element w/ the attributes
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('class', classname);
svg.setAttribute('aria-hidden', ariaHidden);
svg.innerHTML = '<use xlink:href="'+xlinkhref+'"></use>';
return svg;
}
})

2)Create SelectedObject event and  Custom Lookup Result component for getting the list of accounts based  search keyword

SelectedObject.evt:

<aura:event type="COMPONENT" description="by this event we are passing the selected Record in the Obeerving Component">

    <aura:attribute name="RecordByEvent" type="sObject"/>

</aura:event>

CustomLookupResult.cmp

<aura:component >

    <aura:attribute name="Obj" type="sObject" />

  <!--Register the component level event-->

    <aura:registerEvent name="oSelectedObjectEvent" type="c:SelectedObject"/>

    

    <li role="presentation">

        <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-350" role="option">

         <div class="slds-media__body">

          <div class="slds-input-has-icon slds-input-has-icon--right">

            <c:LC_svg class="slds-input__icon" xlinkHref="{!$Resource.SLDS092 + '/assets/icons/standard-sprite/svg/symbols.svg#account'}" />                   

          

<div class="slds-lookup__result-text"><a onclick="{!c.selectRecord}">{!v.Obj.Name}</a></div>

          </div>

        </div>    

        </span>

    </li>

</aura:component>

CustomLookupResultController.js:

----------------------------------------------------

({

selectRecord : function(component, event, helper){      

    // get the selected Account from list  

      var getSelectRecord = component.get("v.Obj");

    // call the event   

      var compEvent = component.getEvent("oSelectedObjectEvent");

    // set the Selected Object to the event attribute.  

     compEvent.setParams({"RecordByEvent" : getSelectRecord });  

    // fire the event  

     compEvent.fire();

    },

})

3)Create PickListEvt.evt and CustomLookup.cmp component:

PickListEvt.evt:

---------------------

<aura:event type="Component" description="Event fire when some one selects a value in picklist" >

    <aura:attribute name="SelectedValue" type="string" description="The result of the Selection"/>

</aura:event>

CustomLookup.cmp

---------------------------

/*

 This is the Controller Class for the Custom Lookup component.

 */

public class LookUpController {

  @AuraEnabled

 public static List <sObject> fetchRecords(String searchKeyWord, String ObjName, string count) {

  String searchKey = searchKeyWord + '%';

  List < Sobject > lstOfObj =  Database.query('SELECT id, Name '+' FROM '+ObjName+' WHERE Name LIKE \''+searchKey+'\' limit ' + count);

 

  return lstOfObj ;

 }

}

<aura:component controller="LookUpController" >    

   <aura:registerEvent name="RecordSelected" type="c:PickListEvt" description="This will Fire when the records has reached in it"/>

   <aura:attribute name="selectedRecord" type="sObject" default="{}" description="Use,for store SELECTED sObject Record"/>

   <aura:attribute name="listOfSearchRecords" type="sObject[]" description="Use,for store the list of search records which returns from apex class"/>

   <aura:attribute name="SearchKeyWord" type="string"/>

   <aura:attribute name="FieldLabel" type="String"/>

   <aura:attribute name="ObjName" type="string" default="Account"/>

   <aura:attribute name="RecordCount" type="string" default="10"/>

   <aura:attribute name="Message" type="String" default="Search Result.."/>

    

   <!--declare events handlers-->  

   <aura:handler name="oSelectedObjectEvent" event="c:SelectedObject" action="{!c.handleComponentEvent}"/>

   <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>

   <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

   <div class="slds-m-around">

      <div aura:id="searchRes" class="slds-form-element slds-lookup slds-is-close" data-select="single">

          <aura:if isTrue="{!!empty(v.FieldLabel)}">

         <label class="slds-form-element__label" for="lookup-348"> {!v.FieldLabel}</label>

          </aura:if>

         <!--This part is for display search bar for lookup-->  

         <div class="slds-form-element__control">

            <div class="slds-input-has-icon slds-input-has-icon--right">

               <c:LC_svg class="slds-input__icon slds-show" xlinkHref="{!$Resource.SLDS092 + '/assets/icons/utility-sprite/svg/symbols.svg#search'}" />

               <!-- This markup is for when an record is selected -->

               <div aura:id="lookup-pill" class="slds-pill-container slds-hide">

                  <span class="slds-pill">

                     <span class="slds-pill__label">

                       {!v.selectedRecord.Name} 

                     </span>

                     <span class="slds-button slds-button--icon slds-pill__remove deleteIcon" onclick="{!c.clear}">

                        <c:LC_svg class="slds-button__icon" xlinkHref="{!$Resource.SLDS092 + '/assets/icons/utility-sprite/svg/symbols.svg#close'}" />

                        <span class="slds-assistive-text">Remove</span>

                     </span>

                  </span>

               </div>

              <div aura:id="lookupField" class="slds-show">

               <ui:inputText updateOn="keyup" keyup="{!c.keyPressController}" aura:id="LookupGeneral"

                             class="slds-lookup__search-input slds-input " 

                             value="{!v.SearchKeyWord}" placeholder="search.." />

              </div>   

            </div>

         </div>

         <!--This part is for Display typehead lookup result List-->  

         <div class="slds-lookup__menu slds" id="lookup-348">

            <div class="slds-lookup__item--label slds-text-body--small">{!v.Message}</div>

            <center> <ui:spinner aura:id="spinner"/> </center>

            <ul class="slds-lookup__list" role="listbox">

               <aura:iteration items="{!v.listOfSearchRecords}" var="singleRec">

                  <c:CustomLookupResult Obj="{!singleRec}" />

               </aura:iteration>

            </ul>

         </div>

      </div>

   </div>

</aura:component>

CustomLookupController.js:

({

  

keyPressController : function(component, event, helper) {

      // get the search Input keyword   

var getInputkeyWord = component.get("v.SearchKeyWord");

        var getObjName = component.get("v.ObjName");

        var getRecordCount = component.get("v.RecordCount");

      // check if getInputKeyWord size id more then 0 then open the lookup result List and 

      // call the helper 

      // else close the lookup result List part.   

        if( getInputkeyWord.length > 0 ){

             var forOpen = component.find("searchRes");

               $A.util.addClass(forOpen, 'slds-is-open');

               $A.util.removeClass(forOpen, 'slds-is-close');

            helper.searchHelper(component,event,getInputkeyWord, getObjName, getRecordCount);

        }

        else{  

            component.set("v.listOfSearchRecords", null ); 

             var forclose = component.find("searchRes");

               $A.util.addClass(forclose, 'slds-is-close');

               $A.util.removeClass(forclose, 'slds-is-open');

          }

         

},

  

  // function for clear the Record Selaction 

    clear :function(component,event,heplper){

      

         var pillTarget = component.find("lookup-pill");

         var lookUpTarget = component.find("lookupField"); 

         $A.util.addClass(pillTarget, 'slds-hide');

         $A.util.removeClass(pillTarget, 'slds-show');

        

         $A.util.addClass(lookUpTarget, 'slds-show');

         $A.util.removeClass(lookUpTarget, 'slds-hide');

      

         component.set("v.SearchKeyWord",null);

         component.set("v.listOfSearchRecords", null );

         

    },

    

  // This function call when the end User Select any record from the result list.   

    handleComponentEvent : function(component, event, helper) {

    // get the selected Account record from the COMPONETN event  

       var selectedRecordGetFromEvent = event.getParam("RecordByEvent");

       var RecordSelected = component.getEvent("RecordSelected");     

         RecordSelected.setParams({

            SelectedValue: selectedRecordGetFromEvent.Id

        }).fire();

       component.set("v.selectedRecord" , selectedRecordGetFromEvent); 

       

        var forclose = component.find("lookup-pill");

           $A.util.addClass(forclose, 'slds-show');

           $A.util.removeClass(forclose, 'slds-hide');

        

        var forclose = component.find("searchRes");

           $A.util.addClass(forclose, 'slds-is-close');

           $A.util.removeClass(forclose, 'slds-is-open');

         

        var lookUpTarget = component.find("lookupField");

            $A.util.addClass(lookUpTarget, 'slds-hide');

            $A.util.removeClass(lookUpTarget, 'slds-show'); 

           

      

},

  // automatically call when the component is done waiting for a response to a server request.  

    hideSpinner : function (component, event, helper) {

        var spinner = component.find('spinner');

        var evt = spinner.get("e.toggle");

        evt.setParams({ isVisible : false });

        evt.fire();    

    },

 // automatically call when the component is waiting for a response to a server request.

    showSpinner : function (component, event, helper) {

        var spinner = component.find('spinner');

        var evt = spinner.get("e.toggle");

        evt.setParams({ isVisible : true });

        evt.fire();    

    },

    

})

CustomLookupHelper.js

-----------------------------------

({

searchHelper : function(component,event,getInputkeyWord, getObjName, getRecordCount) {

  // call the apex class method 

     var action = component.get("c.fetchRecords");

      // set param to method  

        action.setParams({

            'searchKeyWord': getInputkeyWord,

            'ObjName' : getObjName,

            'count' : getRecordCount

          });

      // set a callBack    

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                var storeResponse = response.getReturnValue();

              // if storeResponse size is equal 0 ,display No Result Found... message on screen.

                if (storeResponse.length == 0) {

                    component.set("v.Message", 'No Result Found...');

                } else {

                    component.set("v.Message", 'Search Result...');

                }

                

                // set searchResult list with return value from server.

                component.set("v.listOfSearchRecords", storeResponse);

            }

 

        });

      // enqueue the Action  

        $A.enqueueAction(action);

    

},

})

Custom Lookup Example: (Usage):

CustomLookupExample.cmp:

---------------------------------------

<aura:component controller="ContactSavecls">

    <aura:attribute name="contactObj" type="Contact" default="{'sobjectType':'Contact',

                                                              'AccountId':'','FirstName':'',

                                                               'LastName':''}"/>

    <div>

    <div class="slds-form-element__control">

        <ui:inputText class="slds-input" label="Last Name" value="{!v.contactObj.LastName}"/>

        <c:CustomLookup ObjName="Account" FieldLabel="Related Account"

            RecordCount="5" 

            RecordSelected="{!c.handleRecordSelection}" />

       </div>    

        <ui:button press="{!c.contactSave}">Save Contact</ui:button>

    </div>

</aura:component>

CustomLookupExample.js:

-------------------------------------

({

handleRecordSelection : function(component, event, helper) {

        alert('hi'+event.getParam("SelectedValue"));

component.set("v.contactObj.AccountId", event.getParam("SelectedValue"));

},

    contactSave:function(component, event, helper){

        var action = component.get("c.saveContact");

        var contRec = component.get("v.contactObj");

        action.setParams({"contObj":contRec});

        action.setCallback(this,function(data){

            var result = data.getReturnValue();

            alert(result);

        });

        $A.enqueueAction(action);

        

    }

})

ApexController:

--------------------

public class ContactSavecls{

    @Auraenabled

    public static String saveContact(Contact contObj){

        insert contObj;

        return contObj.Id;

    }

}

output:

------------

References:

------------------

https://developer.salesforce.com/blogs/developer-relations/2015/06/salesforce-lightning-inputlookup-missing-component.html

http://sfdcmonkey.com/2017/07/17/re-usable-custom-lookup/

http://sfdcmonkey.com/2017/01/07/custom-lookup-lightning-component/

https://teamforcesite.wordpress.com/2017/09/20/how-to-build-custom-lookup-in-lightning/

https://github.com/enreeco/inputlookup

https://www.jitendrazaa.com/blog/salesforce/lookup-component-in-salesforce-lightning/

https://www.lightningdesignsystem.com/components/lookups/

lightning:icon (No svg component creation needed now)

Hi,

To show icons in lightning component  we don't  need to create svg component. We can use "lightning:icon"

directly.

It represents a visual element that provides context and enhances usability.

A lightning:icon is a visual element that provides context and enhances usability. Icons can be used inside the body of another component or on their own.

Component:IconComponent: ( created  reusable component you can use tag directly also)

<aura:component description="IconComp">
    <aura:attribute name="iconName" type="String" default="action:more"/>
    <aura:attribute name="size" type="String" default="small"/>
    <aura:attribute name="iconSize" type="String" default="small"/>
    <aura:attribute name="alternativeText" type="String" default="Indicates More"/>
    <aura:attribute name="className"    type="String" default=""/>
    <aura:attribute name="title" type="String" default=""/>
    <aura:attribute name="variantName" type="String" default=""/>
    <lightning:icon iconName="{!v.iconName}" size="{!v.iconSize}" alternativeText="{!v.alternativeText}" title="{!v.title}"
                    class="{!v.className}" variant="{!v.variantName}"/>
</aura:component>

IconComponentApp :

<aura:application  extends="force:slds">

    Icons:<br/>

    <c:IconComponent iconName="action:add_photo_video" alternativeText="video" size="small"/> 

    <br/> <br/>

    <c:IconComponent iconName="action:follow" alternativeText="follow" size="small"/> <br/> <br/>

    <c:IconComponent iconName="action:edit_groups" alternativeText="edit_groups" size="small"/> <br/> <br/>

    <c:IconComponent iconName="custom:custom1" alternativeText="custom1" size="large"/> <br/> <br/>

    <c:IconComponent iconName="doctype:attachment" alternativeText="Attachment" size="large"

                      variantName ="warning"/> <br/> <br/>

    <c:IconComponent iconName="standard:account" alternativeText="Account" size="large"/> <br/> <br/>

     <c:IconComponent iconName="utility:activity" alternativeText="Activity" size="large"/> <br/> <br/>

</aura:application>

References:

------------

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_icon.htm

https://lightningdesignsystem.com/icons/