0

I have potentially multiple lookup fields on an object. So I want to display my a lightning:card for each one with the related information on the Object's page that has that record in the lookup field.

My method in the helper is:

loadRelatedRecordId : function(cmp) {
    // Load all checklist items
    var action = cmp.get("c.getRelatedRecordId");
    action.setParams({ recordId : cmp.get("v.recordId") });
    action.setCallback(this, function(response) {
        var state = response.getState();
        var relatedRecordCards = [];
        if (state === "SUCCESS") {
            var idString = response.getReturnValue();

            for(var i = 0; i < 2; i++){
                console.log('Iteration #' + i);
            if (idString.length>=15) {
                $A.createComponent(
                    "force:recordView",
                    {
                        "aura:id": "dynamicId" + i,
                        "recordId": idString,
                    },
                    function(newRV, status, errorMessage){
                        //Add the new button to the body array
                        if (status === "SUCCESS") {
                            //var body = cmp.get("v.body");
                            //body.push(newRV);
                            //cmp.set("v.body", body);
                            relatedRecordCards.push(newRV);
                            console.log(relatedRecordCards.length);
                            if(relatedRecordCards.length == 2){
                                cmp.set('v.relatedRecords', relatedRecordCards);
                            }
                        }
                        else if (status === "INCOMPLETE") {
                            console.log("No response from the server .")
                            // Show offline error
                        }
                        else if (status === "ERROR") {
                            console.log("Error: " + errorMessage);
                            // Show error message
                        }
                    }
                );        
            }
            }
        } else {
            //toastEvent.setParams({
            //        "title": "Error!",
            //        "message": "Something has gone wrong."
            //});
            //toastEvent.fire();
        }

     });
     $A.enqueueAction(action);
}

In the status === SUCCESS if statement in the callback once the component is made in the loop, I was initially just mashing it into the main body of the component. But I want each created component in its own card, instead of all in one long one.

Then in my component, I am trying to do this:

<aura:iteration items="{!v.relatedRecords}" var="record">

<lightning:card >
    <aura:set attribute="title">
        Related Information
    </aura:set>        
    <p class="slds-p-horizontal_small">
        {!record}
    </p>
</lightning:card> 

</aura:iteration>

Where it was originally:

<lightning:card >
    <aura:set attribute="title">
        Related Information
    </aura:set>        
    <p class="slds-p-horizontal_small">
        {!v.body}
    </p>
</lightning:card> 

And multiple record information just all got put into one card.

Is it possible to create components, then iterate through the components making one lightning card for each component created in the helper?

  • I believe it would be better to create a sub-component with the card inside and the force:recordView component inside it - not creating it dynamically. it would be more organized and simple and off course it would work – Itai Shmida Jun 10 '18 at 6:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.