function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Kaylee GrayKaylee Gray 

Lightning record page component - button/handler seemingly not working

I am attempting to create a lightning component, that is to be used on the quote record page. It's purpose is to calculate a margin percentage ((Total Sales Price - Total Cost)/Total Sales Price)*100. The component should pull in total cost and sales price, but allow the user to adjust the total sales price and/add an amount to the cost (in the case of special order items which do not have a set cost). I have completed the Lightning Comonents and Quick Start: Lightning Component trailheads; I attempted to use pieces I thought I understood from each to create a simple solution that could be used while I apply better-practice/functionality/formatting over-time. My main issue that's got me stumped at this point, is the button doesn't seem to be successfully calling the handler/controller at all, I'm not even getting logs when clicking . As far as getting the values, I know an apex controller can be used to pull data from records, but thought force:recordData would work for what I'm attempting to do (take values, do a calculation, and display from and on current quote record). I also tried assigning my "Margin" a static value via the handler, just to make sure the button was firing, with no success. Clicking the button does nothing regardless of my handler/controller, as far as I can see anyway. Am I missing something or do I just have to take the long road now with the apex controller and more complex setup in the handler/helper etc.?
I have custom fields rolling up the amounts from the line items for Total Sales and Cost.
Code below 
MarginCalc.cmp Code
<aura:component implements="force:hasRecordId,force:hasSObjectName,flexipage:availableForRecordHome">
   <!-- <aura:handler name="init" action="{!c.getValues}" value="{!this}"/> -->
    <aura:attribute name="currentQuote" type="Quote"/>
    <aura:attribute name="totalCost" type="Integer" default="{! v.currentQuote.Item_Cost_Total__c}"/>
    <aura:attribute name="margin" type="Integer"/>
    <aura:attribute name="totalCustomerPrice" type="Integer" default="{! v.currentQuote.TotalPrice_Rollup_no_FRT_INS__c}"/>
    <force:recordData aura:id="quoteRecord"
                  recordId="{!v.recordId}"
                  targetFields="{!v.currentQuote}"
                  layoutType="FULL"
                  />

    
    <lightning:card iconName="custom:custom90" title="Margin Calculator" class="slds-text-title_caps">
        <div class="slds-p-left--medium slds-p-right--medium">
        <lightning:layout verticalAlign="stretch" horizontalAlign="start" multipleRows="true" pullToBoundary="small">
            
                <lightning:layoutItem size="11" padding="horizontal-small">
                   <form class="slds-form--stacked">  
                   		<lightning:input aura:id="nsspCostInput" label="Total of Special Order Items Cost"
                             name="nsspCost"
                             value="0"
                             required="false"/> 
                    	<lightning:input aura:id="custPriceTotal" label="Customer's Price Total - Products Only"
                             name="custTotal"
                             value="{! v.currentQuote.TotalPrice_Rollup_no_FRT_INS__c}"/> 
                    </form>
                       
                 <lightning:layoutItem size="11" padding="horizontal-small">
                      <div> 
                          <p>
                            Total Cost: {! v.totalCost}
                           </p>
                      </div>
                  </lightning:layoutItem>
                  <lightning:layoutItem size="11" padding="horizontal-small">
                      <div>
                          <p>
                              Margin: {! v.margin}%
                    	  </p> 
                      </div>
                   </lightning:layoutItem>
                  <lightning:button label="Calculate" onClick="{! c.calculateMargin}"/>
                    
                 </lightning:layoutItem>
            
        </lightning:layout>
        </div>
    </lightning:card>
</aura:component>

Controller/Handler
({    
    calculateMargin : function(component,event,helper){
        var cost = component.get("v.custTotal");
        var addedCost = component.get("v.nsspCost");
        var totalCost = cost+addedCost;
        var price = component.get("v.custPriceTotal");
        var margin = ((price-totalCost)/price)*100;
        component.set("v.totalCost", totalCost);
        component.set("v.margin", margin);
        console.log(cost);
    }
})
Thank you
Best Answer chosen by Kaylee Gray
Alain CabonAlain Cabon
Hi Kaylee,

I don't understand all your logic clearly and if you want to update values in currentQuote.
  
<aura:attribute name="currentQuote" type="Quote"/>    
<aura:attribute name="newQuote" type="Quote"/>
<aura:attribute name="newQuoteError" type="String"/>
    <force:recordData aura:id="quoteRecord"
                      recordId="{!v.recordId}"
                      targetRecord="{!v.newQuote}"
                      targetError="{!v.newQuoteError}"
                      targetFields="{!v.currentQuote}"
                      layoutType="FULL"
                      mode="EDIT"
                      recordUpdated="{!c.recordUpdated}"
                      />


<aura:attribute name="custPriceTotal" type="Decimal" default="{! v.currentQuote.TotalPrice_Rollup_no_FRT_INS__c}"/>
<aura:attribute name="totalCost" type="Decimal" default="{! v.currentQuote.Item_Cost_Total__c}"/>
<aura:attribute name="nsspCostInput" type="Decimal" default="0"/>

<form class="slds-form--stacked"> 
   <lightning:input aura:id="nsspCostInput"
      label="Total of Special Order Items Cost" 
      name="nsspCost" 
      value="{! v.nsspCostInput}"
      required="false" 
      type="Decimal"
   />
   <lightning:input aura:id="custPriceTotal" 
       label="Customer's Price Total - Products Only" 
       name="custTotal" 
       value="{! v.custPriceTotal}" 
       type="Decimal"
   /> 
</form> 



({    
    calculateMargin : function(component,event,helper){
        var cost = parseFloat(component.get("v.totalCost"));
        console.log(cost);
        var addedCost = parseFloat(component.get("v.nsspCostInput"));
        console.log(addedCost);
        var totalCost = parseFloat(cost+addedCost);
        console.log(totalCost);
        var price = parseFloat(component.get("v.custPriceTotal"));
        console.log(price);
        var margin = parseFloat( ((price-totalCost)/price)*100);
        console.log(margin);
        //var margin = "100";
        component.set("v.totalCost", totalCost);
        component.set("v.margin", margin);
        
    },
    recordUpdated : function(component, event, helper) {       
        var changeType = event.getParams().changeType;      
        if (changeType === "ERROR") { /* handle error; do this first! */ }
        else if (changeType === "LOADED") { /* handle record load */ }
            else if (changeType === "REMOVED") { /* handle record removal */ }
                else if (changeType === "CHANGED") { 
/* handle record change; reloadRecord will cause you to lose your current record, including any changes you’ve made */ 
                    component.find("quoteRecord").reloadRecord();}
    },
})

You can also write:  find an aura:id and get the value of the associated field like below :

var addedCost = component.find("nsspCostInput").get("v.value");     //  lightning:input aura:id="nsspCostInput"
var price = parseFloat(component.find("custPriceTotal").get("v.value"));   //  lightning:input aura:id="custPriceTotal"

  <lightning:input aura:id="custPriceTotal"
  label="Customer's Price Total - Products Only"
  name="custTotal"
  value="{! v.currentQuote.TotalPrice_Rollup_no_FRT_INS__c}"
  type="Decimal"
  />

Alain

All Answers

Alain CabonAlain Cabon
Hi Kaylee,

1) Javascript is case sensitive.
Apex is case insensitive.

<lightning:button label="Calculate" onclick="{! c.calculateMargin}"/>

2) All the attributes must be declared.

<aura:attribute name="custTotal" type="Decimal" default="0"/>
<aura:attribute name="nsspCost" type="Decimal" default="0"/>
<aura:attribute name="custPriceTotal" type="Decimal" default="0"/>

 var cost = component.get("v.custTotal");
 var addedCost = component.get("v.nsspCost");
 var price = component.get("v.custPriceTotal");

 
Kaylee GrayKaylee Gray
Thank you Alain!

I fixed the casing for onclick, and the button now fires hooray!

I also created attributes that match the aura:id of my input fields "custTotalPrice" and"nsspCostInput".

However, now I am encountering issues with my inputs and calculation. Entering a value for my nsspCostInput is not being logged or affecting the controller's var totalCost = cost+addedCost; I cannot overwrite my custTotalPrice input, when I click the field and attempt to manually type a value, it shoots the cursor to the end of the default value. Upon clicking "calculate", margin is coming back as NA. I've attached the updated code and image capture of logs and fields. Any idea or insight as to what's going wrong? Thanks again for your help!
event logs and fields 
Component:
<aura:component implements="force:hasRecordId,force:hasSObjectName,flexipage:availableForRecordHome">
   <!-- <aura:handler name="init" action="{!c.getValues}" value="{!this}"/> -->
    <aura:attribute name="currentQuote" type="Quote"/>
    <aura:attribute name="totalCost" type="Decimal" default="{! v.currentQuote.Item_Cost_Total__c}"/>
    <aura:attribute name="margin" type="Decimal" default="0"/>
   <!-- <aura:attribute name="addedCost" type="Decimal" default="v.nsspCostInput"/>-->
    <aura:attribute name="totalCustomerPrice" type="Decimal" default="{! v.currentQuote.TotalPrice_Rollup_no_FRT_INS__c}"/>
    <aura:attribute name="custPriceTotal" type="Decimal"/>
    <aura:attribute name="nsspCostInput" type="Decimal"/>
    <force:recordData aura:id="quoteRecord"
                  recordId="{!v.recordId}"
                  targetFields="{!v.currentQuote}"
                  layoutType="FULL"
                  />

    
    <lightning:card iconName="custom:custom90" title="Margin Calculator" class="slds-text-title_caps">
        <div class="slds-p-left--medium slds-p-right--medium">
        <lightning:layout verticalAlign="stretch" horizontalAlign="start" multipleRows="true" pullToBoundary="small">
            
                <lightning:layoutItem size="11" padding="horizontal-small">
                   <form class="slds-form--stacked">  
                   		<lightning:input aura:id="nsspCostInput" label="Total of Special Order Items Cost"
                             name="nsspCost"
                             value="0"
                             required="false"
                                         type="Decimal"/> 
                    	<lightning:input aura:id="custPriceTotal" label="Customer's Price Total - Products Only"
                             name="custTotal"
                             value="{! v.currentQuote.TotalPrice_Rollup_no_FRT_INS__c}"
                                         type="Decimal"/> 
                    </form>
                       
                 <lightning:layoutItem size="11" padding="horizontal-small">
                      <div> 
                          <p>
                            Total Cost: {! v.totalCost}
                           </p>
                      </div>
                  </lightning:layoutItem>
                  <lightning:layoutItem size="11" padding="horizontal-small">
                      <div>
                          <p>
                              Margin: {! v.margin}%
                    	  </p> 
                      </div>
                   </lightning:layoutItem>
                  <lightning:button label="Calculate" onclick="{! c.calculateMargin}"/>
                    
                 </lightning:layoutItem>
            
        </lightning:layout>
        </div>
    </lightning:card>
</aura:component>

Handler/Controller:

({    
    calculateMargin : function(component,event,helper){
        var cost = component.get("v.totalCost");
        console.log(cost);
        var addedCost = component.get("v.nsspCostInput");
        console.log(addedCost);
        var totalCost = cost+addedCost;
        console.log(totalCost);
        var price = component.get("v.custPriceTotal");
        console.log(price);
        var margin = ((price-totalCost)/price)*100;
        console.log(margin);
        //var margin = "100";
        component.set("v.totalCost", totalCost);
        component.set("v.margin", margin);
        
    }
})

 
Alain CabonAlain Cabon
Hi Kaylee,

I don't understand all your logic clearly and if you want to update values in currentQuote.
  
<aura:attribute name="currentQuote" type="Quote"/>    
<aura:attribute name="newQuote" type="Quote"/>
<aura:attribute name="newQuoteError" type="String"/>
    <force:recordData aura:id="quoteRecord"
                      recordId="{!v.recordId}"
                      targetRecord="{!v.newQuote}"
                      targetError="{!v.newQuoteError}"
                      targetFields="{!v.currentQuote}"
                      layoutType="FULL"
                      mode="EDIT"
                      recordUpdated="{!c.recordUpdated}"
                      />


<aura:attribute name="custPriceTotal" type="Decimal" default="{! v.currentQuote.TotalPrice_Rollup_no_FRT_INS__c}"/>
<aura:attribute name="totalCost" type="Decimal" default="{! v.currentQuote.Item_Cost_Total__c}"/>
<aura:attribute name="nsspCostInput" type="Decimal" default="0"/>

<form class="slds-form--stacked"> 
   <lightning:input aura:id="nsspCostInput"
      label="Total of Special Order Items Cost" 
      name="nsspCost" 
      value="{! v.nsspCostInput}"
      required="false" 
      type="Decimal"
   />
   <lightning:input aura:id="custPriceTotal" 
       label="Customer's Price Total - Products Only" 
       name="custTotal" 
       value="{! v.custPriceTotal}" 
       type="Decimal"
   /> 
</form> 



({    
    calculateMargin : function(component,event,helper){
        var cost = parseFloat(component.get("v.totalCost"));
        console.log(cost);
        var addedCost = parseFloat(component.get("v.nsspCostInput"));
        console.log(addedCost);
        var totalCost = parseFloat(cost+addedCost);
        console.log(totalCost);
        var price = parseFloat(component.get("v.custPriceTotal"));
        console.log(price);
        var margin = parseFloat( ((price-totalCost)/price)*100);
        console.log(margin);
        //var margin = "100";
        component.set("v.totalCost", totalCost);
        component.set("v.margin", margin);
        
    },
    recordUpdated : function(component, event, helper) {       
        var changeType = event.getParams().changeType;      
        if (changeType === "ERROR") { /* handle error; do this first! */ }
        else if (changeType === "LOADED") { /* handle record load */ }
            else if (changeType === "REMOVED") { /* handle record removal */ }
                else if (changeType === "CHANGED") { 
/* handle record change; reloadRecord will cause you to lose your current record, including any changes you’ve made */ 
                    component.find("quoteRecord").reloadRecord();}
    },
})

You can also write:  find an aura:id and get the value of the associated field like below :

var addedCost = component.find("nsspCostInput").get("v.value");     //  lightning:input aura:id="nsspCostInput"
var price = parseFloat(component.find("custPriceTotal").get("v.value"));   //  lightning:input aura:id="custPriceTotal"

  <lightning:input aura:id="custPriceTotal"
  label="Customer's Price Total - Products Only"
  name="custTotal"
  value="{! v.currentQuote.TotalPrice_Rollup_no_FRT_INS__c}"
  type="Decimal"
  />

Alain
This was selected as the best answer
Kaylee GrayKaylee Gray
Thank you so much for your help Alain, I very much appreciate it!