Related List Of OpportunityLineItems shown in Case View - Answers - Salesforce Trailblazer Community
Trailblazer Community
Ask Search:
Peter SpinatoPeter Spinato 

Related List Of OpportunityLineItems shown in Case View

Hi All,

I was following a trailhead and some Salesforce answers to try to create a Lightning Component for showing OpportunityLineItems in a Case layout.  The Case has a lookup field to the Opportnity and I want to show what the customer bought with the Opportunity Products (Line Items)

I have the Component as:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" controller = "RelatedOpportunityItemsController" access="global" >
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:attribute name="productList" type="List" />
    <lightning:card title="Line Items">
        <p class="slds-p-horizontal_small">
        <aura:iteration items="{!v.productList}" var="product">            
            <lightning:recordViewForm recordId="{!product.Id}" objectApiName="OpportunityLineItem" > 
                <div class="slds-box slds=theme_default">
                <label for="Name">Name</label>
                <lightning:outputField aura:id="Name" fieldName="Name"/>
                <label for="StartDate">Check In Date</label>
                <lightning:outputField aura:id="StartDate" fieldName="Start_Date__c"/>
                </div>
            </lightning:recordViewForm>
            <br/>
            </aura:iteration>
            </p>
     </lightning:card>
</aura:component>

The Controller JS as:
({
  doInit : function(component, event, helper) {
    var sObj = component.get("v.sObjectName");
    if(sObj){
      helper.fetchProducts (component, sObj);
    }
  },
  //future code here
})

The Helper as:
({
    fetchProducts : function(component, sObj) {
        var action = component.get("c.getProduct");
        var caseId = component.get("v.recordId");
        action.setParams({
            caseIds: caseId
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            //State can be success, error or incomplete
            if(state == 'SUCCESS'){
                var productList = response.getReturnValue();
                console.log(productList);
                component.set("v.productList",productList);
            }
            else{
                alert('Error in getting data');
            }
        });
    
        $A.enqueueAction(action);
    }
   
})

and the APEX Controller as:
public class RelatedOpportunityItemsController {

    @AuraEnabled
    public static List<OpportunityLineItem> getProduct(List<Id> caseIds){
        Case cs = [Select Opportunity__c from Case where Id=:caseIds];
        List<OpportunityLineItem> productList = [SELECT Id, Start_Date__c
                                                  FROM OpportunityLineItem WHERE OpportunityId=:cs.Opportunity__c];
        return productList;
    }    
}

When I run it all I get is:
Line Items

as the output - I know there are opportunity product as I can run the SOQL query no problem.  What am I missing?  I'm new to Lightning components so any help is greatly appreciated!

 
Best Answer chosen by Peter Spinato
Keiji OtsuboKeiji Otsubo
Hi,

Controller JS
doInit : function(component, event, helper) {

            helper.fetchProducts (component);

    },

Helper JS
 
fetchProducts : function(component) {
        var action = component.get("c.getProduct");
        var caseId = component.get("v.recordId");
        action.setParams({
            caseIds: caseId
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            //State can be success, error or incomplete
            if(state == 'SUCCESS'){
                var productList = response.getReturnValue();
                console.log(productList);
                component.set("v.productList",productList);
            }
            else{
                alert('Error in getting data');
            }
        });
        
        $A.enqueueAction(action);
    },

 

All Answers

Keiji OtsuboKeiji Otsubo
Hi Peter,

I think sObjectName is not defined.
Always undefined and no helper running.

doInit : function(component, event, helper) {
        var sObj = component.get("v.sObjectName");
        if(sObj){
            helper.fetchProducts (component, sObj);
        }
    },
Keiji OtsuboKeiji Otsubo
Hi,

It worked when I removed sObj.

ユーザが追加した画像
Peter SpinatoPeter Spinato
Hi Keiji - can you show what the file looks like without the SObj? What does the fetchProduct call look like now? Thank you!!!!
Keiji OtsuboKeiji Otsubo
Hi,

Controller JS
doInit : function(component, event, helper) {

            helper.fetchProducts (component);

    },

Helper JS
 
fetchProducts : function(component) {
        var action = component.get("c.getProduct");
        var caseId = component.get("v.recordId");
        action.setParams({
            caseIds: caseId
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            //State can be success, error or incomplete
            if(state == 'SUCCESS'){
                var productList = response.getReturnValue();
                console.log(productList);
                component.set("v.productList",productList);
            }
            else{
                alert('Error in getting data');
            }
        });
        
        $A.enqueueAction(action);
    },

 
This was selected as the best answer
Peter SpinatoPeter Spinato
Awesome - it works! Thanks Keiji I appreciate the help!