[SalesForce] Creating Generic Related List Lightning Component

I am trying to create a simple, reusable component that allows me to list related records in an easy to read way. I want to be able to use this component a few times on a single record, and I would like it to be able to be used for different target objects.

My basic thought is to pull the current record, define target parameters, do a server query, and then return the results through aura:iteration. I need to be able to create the server side controller in such a way that it can query for any object and return them the same way.

I have the code built, but right now I am getting a really generic Uncaught Error in $A.getCallback() [result is not defined] message. I've been googling what that could mean in my case and it seems to always be a typo or inconsistent variable names. If that is my problem, I am unable to find the issue.

I do wonder if the problem is the way I return the information from the server. Could the problem be the wrapper class being put into a list? That doesn't seem right….

Also, somewhat related. As you can tell from the name of the component, I had planned on iterating over lightning:tile because I thought that would look nice. But I can't seem to find an example of how that would be accomplished. Does anyone have any examples of iterating over lightning:tile?

Here is the code I have:

relRecordTiles.cmp

<aura:component controller="relRecordTilesController" access="global">
<!--<aura:attribute name="resultItems" type="Object" access="public"
                description="This attribute can be used by parent component to read selected records"/>   -->

<aura:attribute name="currentID" type="String" access="public" 
                description="ID of current record (which is the parent of the return values)"/>
<aura:attribute name="objectName" type="String" access="public" 
                description="Name of Object to be searched"/>
<aura:attribute name="lookupField" type="String" access="public" 
                description="Name of field that connects the child object to the parent (current record)"/>    

<aura:attribute name="field1" type="String" access="public" 
                description="API Name of the first field, to be used to show text"/>
<aura:attribute name="field1Label" type="String" access="public" 
                description="Label for the value returned"/>
<aura:attribute name="field2" type="String" access="public" 
                description="API Name of the second field, to be used to show text"/>
<aura:attribute name="field2Label" type="String" access="public" 
                description="Label for the value returned"/>
<aura:attribute name="field3" type="String" access="public" 
                description="API Name of the third field, to be used to show text"/>
<aura:attribute name="field3Label" type="String" access="public" 
                description="Label for the value returned"/>

<aura:attribute Name="serverResult" type="list" /> 

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />    

<br/>
relRecordTiles should go here:
<div class="salesforce slds">
    <ul class="slds-has-dividers--around-space">
        <aura:iteration items="{!v.serverResult}" var="item">
            <li class="slds-item">
                <div class="slds-tile slds-tile--board">
                    <h3 class="slds-truncate"><a href="{! '# ' + objectName + '/' + item.Id}"> {!objectName}: {!item.Name}</a>  </h3>
                    <div class="slds-tile__detail slds-text-body--small">
                        <aura:if isTrue="{!not(empty(v.field1))}">
                            <p>{!field1Label}: {!item.field1}</p> <br/>
                        </aura:if>
                        <aura:if isTrue="{!not(empty(v.field2))}">
                            <p>{!field2Label}: {!item.field2}</p> <br/>
                        </aura:if>
                        <aura:if isTrue="{!not(empty(v.field3))}">
                            <p>{!field3Label}: {!item.field3}</p> <br/>
                        </aura:if>
                    </div>
                </div>
            </li>
        </aura:iteration>
    </ul>
</div>

relRecordTiles.js

({
doInit : function(component, event, helper) {
    console.log("relRecordTiles is starting up...");

    //Pull values from component 
    //var currentID = component.get("v.currentID");
    //var objectName = component.get("v.objectName");
    //var lookupField = component.get("v.lookupField");
    //var field1 = component.get("v.field1");
    //var field2 = component.get("v.field2");
    //var field3 = component.get("v.field3");

    //call relRecordTilesController.getResults server side controller
    var action = component.get('c.getResults');

    //Set the variables for the server side controller
    action.setParams({
        currentID : component.get("v.currentID"),
        objectName : component.get("v.objectName"),
        lookupField : component.get("v.lookupField"),
        field1 : component.get("v.field1"),
        field2 : component.get("v.field2"),
        field3 : component.get("v.field3")
    });

    // Set up the callback
    action.setCallback(this, $A.getCallback(function (response) {
        var state = response.getState();
        var resultsToast = $A.get("e.force:showToast");
        if(state === "SUCCESS"){
            //if successful stores query results in serverResult
            component.set('v.serverResult', response.getReturnValue());
        } else if (state === "ERROR") {
            //otherwise write errors to console for debugging
            alert('Problem with connection. Please try again. Error Code: relRecordTiles.doInit.action.setCallback');
            resultsToast.setParams({
                "title": "Error",
                "message": "relRecordTiles failed to load due to: " + JSON.stringify(result.error)
            });
            resultsToast.fire();
            var errors = response.getError();
            console.error(errors);
        }
    }));

    $A.enqueueAction(action);
}

})

relRecordTilesController.apxc

public class relRecordTilesController {
@AuraEnabled
public static List<tileWrapper> getResults(id currentID, string objectName, string lookupField, string field1, string field2, string field3) {
    System.debug('getResults starting...');

    //add in query fields if they are not null
    string queryfields;
    if(field1 != null){queryfields = ', ' +field1;}
    if(field2 != null){queryfields = queryfields+ ', ' +field2;}
    if(field3 != null){queryfields = queryfields+ ', ' +field3;}

    //build the string we will query
    string queryString = 'SELECT id, name' +queryfields+ ' FROM ' +objectName+ ' WHERE ' +lookupField+ '=' +currentID;

    //get the data into a list
    List<sObject> queryOutput = new List<sObject>();
    queryOutput = database.query(queryString);
    system.debug('queryOutput = ' + queryOutput);

    //Iterate over the list and put the values into a wrapper class defined below
    List<tileWrapper> returnList = new List<tileWrapper>();
    for(sObject s: queryOutput){
        tileWrapper tile = new tileWrapper();
        tile.recID = String.valueOf(s.id);
        tile.recName = String.valueOf(s.get('name'));
        if(String.valueOf(s.get(field1)) != null ){tile.field1 = String.valueOf(s.get(field1));}
        if(String.valueOf(s.get(field2)) != null ){tile.field2 = String.valueOf(s.get(field2));}
        if(String.valueOf(s.get(field3)) != null ){tile.field3 = String.valueOf(s.get(field3));}
        returnList.add(tile);
    }

    system.debug('returnList = ' + returnList);
    return returnList;        
}


public class tileWrapper{
    public id recID{get;set;}
    public string recName{get;set;}
    public string field1{get;set;}
    public string field2{get;set;}
    public string field3{get;set;}
}

}

Calling component from parent Component

                    <lightning:formattedText value="Related Divisions" />
                    <c:relRecordTiles currentID="{!v.selItem}"
                                      objectName="Division2Contact__c"
                                      lookupField="Contact__c"
                                      field1="Full_Division_Name_Backward__c"
                                      field1Label="Division"
                                      field2="Division_Campus__c"
                                      field2Label="Campus"
                                      field3="Status__c"
                                      field3Label="Status"
                                      />

Best Answer

I recommend using the Developer Console to look at the apex debug logs when encountering errors with your apex actions in lightning.

In this particular instance I believe that you are receiving an error with your query at this line of your apex controller:

string queryString = 'SELECT id, name' +queryfields+ ' FROM ' +objectName+ ' WHERE ' +lookupField+ '=' +currentID;

The issue is with your WHERE clause. The ID should be surrounded by single quotes, so it will look like this

string queryString = 'SELECT id' +queryfields+ ' FROM ' +objectName+ ' WHERE ' +lookupField+ '=\'' +currentID+'\'';

In addition, as mentioned in the comments of your question, you are referencing result.error in your error toast code without ever declaring result as a variable. You most likely want to call response.getError() there instead, which is being passed into your callback function as a variable.

Related Solutions

[SalesForce] Making a Generic Lightning Modal Component

I have implemented something like this. Here is the code :

My modal component which will contain the other component. You will see that this modal take the name of another component as parameter. This is because it will load the other component within itself :

 <aura:component >
<!-- global/shared attributes definition -->
<aura:attribute name="recordId" type="string" description="The record id of the request" /> 
<aura:attribute name="windowTitle" type="string" description="The title to show on the modal window" />

<aura:attribute name="cmpName" type="string" description="The component name to encapsulate. e.g : c:LC19_GestionMembre" />    

<aura:attribute name="showModal" type="boolean" default="true" description="Control the modal view" />

<aura:attribute name="refreshOnClose" type="boolean" default="false" description="If this variable is set to true, then when this modal will close, it will send instruction to the caller component, so that it refresh itself. (The refresh is implemented by the calling component)" />

<aura:attribute name="refresh" type="boolean" default="false" description="tell the calling component that the component has finished execution and can now refresh the set of result" />

<aura:attribute name="showFooter" type="boolean" default="true" description="If set to false, the modal will not display the cancel and save button" />

<aura:attribute name="showHeader" type="boolean" default="true" description="If set to false, the modal will display the title header" />

<aura:attribute name="displayWith" type="boolean" default="true" description="If set to false, the modal will display the title header" />

<aura:attribute name="saveButtonText" type="string" default="{!$Label.c.VFP02Sauvegarder}" description="Component can replace the save text by another text. e.g Executer" />

<aura:attribute name="large" type="boolean" default="false" description="whether to display a 90% modal or 50%" />


<!-- local attributes definition -->
<aura:attribute name="saveTriggered" type="integer" default="0" description="This variable tell the component that the modal save button has been triggered" />

<aura:attribute name="closeTriggered" type="boolean" default="false" description="This variable tell the component to close the modal" />    

<aura:attribute name="disableSave" type="boolean" default="false" description="This variable control the state of the save button. It is disabled when action in progress" />

<!-- handlers definition -->
<aura:handler name="change" value="{!v.closeTriggered}" action="{!c.handleClose}" />
<aura:handler name="change" value="{!v.showModal}" action="{!c.loadCmp}" />

<div role="dialog" class="{!v.showModal ? (v.large ? 'slds-modal slds-modal--large slds-fade-in-open' : 'slds-modal slds-fade-in-open'): 'slds-hide'}">
    <div class="slds-modal__container">
        <div class="{!v.showHeader ? 'slds-modal__header': 'slds-modal__header slds-modal__header--empty'}">
            <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCancel}">
                <lightning:icon iconName="utility:close" size="small" />
                <span class="slds-assistive-text">Close</span>
            </button>
            <h2 class="{!v.showHeader ? 'slds-text-heading--medium': 'slds-hide'}">{!v.windowTitle}</h2>
        </div>            

        <div aura:id="xid-cmp-body" class="slds-modal__content slds-p-around--medium slds-is-relative xcs-fix-max-height">
            <lightning:spinner variant="brand" size="small"/>
            <!--####################################################### -->
            <!-- The component is dynamically loaded here -->
            <!--####################################################### -->                              
        </div>
        <div class="{!v.showFooter ? 'slds-modal__footer': 'slds-hide'}">
            <button class="slds-button slds-button--neutral" onclick="{!c.handleCancel}">{!$Label.c.GLO_Annuler}</button>
            <button class="slds-button slds-button--brand" disabled="{!v.disableSave}" onclick="{!c.sendActionSave}">{!v.saveButtonText}</button>
        </div>
    </div>
</div>
<aura:if isTrue="{!v.showModal}">
    <div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>   
</aura:component>

This component in fact share some variable with the other component which will load inside this one. And then when you click on the save button, from the modal, this will trigger an action on the child component which will execute.

Here is the controller :

 ({
    handleClose : function(component, event, helper) {
    var container = component.find("xid-cmp-body");
    container.set("v.body",[]);
    component.set("v.showModal",false);

    if(component.get("v.refreshOnClose")) component.set("v.refresh",true);      

},
handleCancel : function(component, event, helper) {
    var container = component.find("xid-cmp-body");
    container.set("v.body",[]);
    component.set("v.showModal",false);
},
sendActionSave : function(component, event, helper) {
    var i = component.get("v.saveTriggered");
    component.set("v.saveTriggered",(i + 1));
},
handleSaveButton: function(component, event, helper) {      
    component.set("v.disableSave",component.get("v.inProgress"));
},
loadCmp : function(component, event, helper) {
    var container = component.find("xid-cmp-body");
    //console.log("container :",container);

    if(component.get("v.showModal")){
        console.log("starting loading component");
        //determine which component to load             
        $A.createComponent(component.get("v.cmpName"),
                       {"recordId": component.getReference("v.recordId"),
                        "triggerSave": component.getReference("v.saveTriggered"),
                        "triggerClose" : component.getReference("v.closeTriggered"),
                        "triggerCloseInnerModal" : component.getReference("v.closeTriggered"),
                        "actionInProgress" : component.getReference("v.disableSave")},
                       function(cmp) {                               
                            container.set("v.body", cmp);
                       });
    }

},
  handlePress : function(cmp) {
    console.log("button pressed");
  }
})

Now the child component will have some shared attributes defined. Here is the code for the child component. You will have to readapt it :

 <aura:component controller="LC19_GestionDemandeAcces" >
<!-- global/shared attributes definition -->
<aura:attribute name="recordId" type="string" description="The account id of the request " />


<aura:attribute name="triggerSave" type="integer" default="0" description="This variable is used in the case the component is used in a modal which actually trigger the save action " />
<aura:attribute name="triggerClose" type="boolean" default="false" description="This component tell its modal window to close if this is set to true" />
<aura:attribute name="actionInProgress" type="boolean" default="false" description="This variable is set to true when the server is creating the request" />

<aura:attribute name="disableCustomSave" type="boolean" default="false" description="This variable control the state of the save button. It is disabled when action in progress" />


<!-- handlers definition -->

<aura:handler name="change" value="{!v.triggerSave}" action="{!c.handleSave}" />

<!-- ************************************************************* -->
<!-- ************************** THE BODY SECTION *****************-->
<!-- ************************************************************* -->


</aura:component>

I removed much of the thing. But which is important it to implement the handleSave action in your child component. To close the parent modal, just set the variable triggerClose to false.

[SalesForce] How to send List from Lightning component to Apex Controller

Fixed using this approach.

In Java script Callback,

var actSave = component.get("c.saveDataDML");
        actSave.setParams({
            "listToSaveString": JSON.stringify(itemList)
        });

and in Apex Controller, Deserialized an casted as below.

@AuraEnabled
public static List<Wrapperclass> saveDataDML(String listToSaveString){

List<Wrapperclass> listToSave = (List<Wrapperclass>)JSON.deserialize(listToSaveString, List<Wrapperclass>.class);

Best Answer

Related Solutions

[SalesForce] Making a Generic Lightning Modal Component

[SalesForce] How to send List from Lightning component to Apex Controller

Related Topic