0

I'm very new developer and I'm stuck. I'm trying to adapt an Aura Component that I found on internet to my needs, but I can't make it work (The original I found works fine).

Basically what I want is to be able to create a custom quick action to create a record of a custom object (Call_Report__c) in an Opportunity record page. I'm using a custom quick action because when I have it working, I want to add a multi select lookup Component to the quick action. I think I have an error in the saveCallReportWithOpportunity(), but I'm not sure and I can't find the solution.

A little context:

Call_Report__c has a Master-Detail relationship with Opportunity (Related_Opportunity__c).

Please, could somebody check the code to see where's my error?

Thank you so much in advance!!!

Aura Component

<aura:component controller="NewCallReportController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" access="global" >
 
    <aura:attribute name="opportunity" type="Opportunity" />
    <aura:attribute name="newCallReport" type="Call_Report__c"
                    default="{ 'sobjectType': 'Call_Report__c',
                                              'Name': '',
                                              'Date_of_Meeting__c': '',
                                              'Meeting_Details__c' : '',
                                              'Send_Email__c': true }"/> <!-- default to empty record -->
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 
    <!-- Display a header with details about the Opportunity -->
    <div class="slds-page-header" role="banner">
        <p class="slds-text-heading_label">{!v.opportunity.Name}</p>
        <h1 class="slds-page-header__title slds-m-right_small
            slds-truncate slds-align-left">Create New Call Report</h1>
    </div>
    
    <div class="Form">
 
        <!-- Display the new contact form -->
         <lightning:input aura:id="callReportField" name="Name" label="Call Report Name"
                          value="{!v.newCallReport.Name}" required="true"/>
      
        <lightning:input aura:id="callReportField" name="dateOfMeeting" label="Date of Meeting"
                         value="{!v.newCallReport.Date_of_Meeting__c}" type ="date" required="true"/>
                
        <lightning:input aura:id="callReportField" name="relatedOpportunity" label="Related Opportunity"
                         value="{!v.opportunity.Name}" />
        
        <lightning:input aura:id="callReportField" name="meetingDetails" label="Meeting details and Next Actions"
                         value="{!v.newCallReport.Meeting_Details__c}" required="true"/>
        
        <lightning:input aura:id="callReportField" type="checkbox" name="sendEmail" label="Send Email?"
                         checked="{!v.newCallReport.Send_Email__c}" />
            
        <lightning:button label="Cancel" onclick="{!c.handleCancel}" class="slds-m-top_medium" />
        <lightning:button label="Save" onclick="{!c.handleSaveCallReport}"
                   variant="brand" class="slds-m-top_medium"/>
        
    </div>
    
</aura:component>

JavaScript Controller

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

        // Prepare the action to load Opportunity record
        var action = component.get("c.getOpportunity");
        action.setParams({"opportunityId": component.get("v.recordId")});

        // Configure response handler
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS") {
                component.set("v.opportunity", response.getReturnValue());
            } else {
                console.log('Problem getting Opportunity, response state: ' + state);
            }
        });
        $A.enqueueAction(action);
    },

    handleSaveCallReport: function(component, event, helper) {
        if(helper.validateCallReportForm(component)) {
            
            // Prepare the action to create the new Call Report
            var saveCallReportAction = component.get("c.saveCallReportWithOpportunity");
            saveCallReportAction.setParams({
                "callReport": component.get("v.newCallReport"),
                "opportunityId": component.get("v.recordId")
            });

            // Configure the response handler for the action
            saveCallReportAction.setCallback(this, function(response) {
                var state = response.getState();
                if(state === "SUCCESS") {

                    // Prepare a toast UI message
                    var resultsToast = $A.get("e.force:showToast");
                    resultsToast.setParams({
                        "title": "Call Report Saved",
                        "message": "The New Call Report was created successfully."
                    });

                    // Update the UI: close panel, show toast, refresh Opportunity page
                    $A.get("e.force:closeQuickAction").fire();
                    resultsToast.fire();
                    $A.get("e.force:refreshView").fire();
                }
                else if (state === "ERROR") {
                    console.log('Problem saving Call Report, response state: ' + state);
                }
                else {
                    console.log('Unknown problem, response state: ' + state);
                }
            });

            // Send the request to create the new Call Report.
            $A.enqueueAction(saveCallReportAction);
        }
        
    },

    handleCancel: function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    },
})

JavaScript Helper

({
    validateCallReportForm: function(component) {
        var validCallReport = true;

        // Show error messages if required fields are blank
        var allValid = component.find('callReportField').reduce(function (validFields, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validFields && inputCmp.get('v.validity').valid;
        }, true);

        if (allValid) {
            // Verify we have an Opportunity to attach it to
            var opp = component.get("v.opportunity");
            if($A.util.isEmpty(opportunity)) {
                validCallReport = false;
                console.log("Quick action context doesn't have a valid Opportunity.");
            }
        }

        return(validCallReport);
    }
})

Apex Controller

public with sharing class NewCallReportController {
     

    @AuraEnabled
    public static Opportunity getOpportunity(Id opportunityId) {
        // Perform isAccessible() checks here
        return [SELECT Name FROM Opportunity WHERE Id = :opportunityId]; 
    }
    
    @AuraEnabled
    public static Call_Report__c saveCallReportWithOpportunity(Call_Report__c callReport, Id opportunityId) {
        // Perform isAccessible() and isUpdateable() checks here
        callReport.Related_Opportunity__c = opportunityId;
        upsert callReport;
        return callReport;
    }
}
2
  • If you are using this in a Community/Experience, then force:hasRecordId won't work, you won't get the opportunityId and the save will fail. Apr 14 at 7:05
  • Hello, I'm using a Developer Edition to test the component. Thanks for the help @CasparHarmer Apr 15 at 13:23
0

it seems you have a very small error in your JavaScript Helper. When I simply copy & paste your code into a dev org of mine, I get an error message in the UI, when I try to save the Call Report:

enter image description here Making use of the Debugger Tools of your browser (Chrome in my case) you can find the actual line in the javascript (see picture above)

And the it becomes pretty obvious - see my comments in your code (extract of the JavaScript Helper class)

if (allValid) {
        // Verify we have an Opportunity to attach it to
        //you have a variable declared and assigned called "opp"
        var opp = component.get("v.opportunity");
        //but here you are checking a non declared variable called "opportunity"
        // simple fix: either rename "opp" to "opportunity" or us "opp" in the line below
        if($A.util.isEmpty(opportunity)) {
            validCallReport = false;
            console.log("Quick action context doesn't have a valid Opportunity.");
        }
    }

So you either rename the variable "opp" to "opportunity" or you use "opp" in the if statement.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.