You need to sign in to do that
Don't have an account?
Caleb Kuester
Alright, I Give Up
I am working with a Lightning Component Trailhead example: https://trailhead.salesforce.com/lex_dev_lc_basics/lex_dev_lc_basics_forms
Don't worry about providing a free "passing grade," this is just the copy/pasted provided example. I wish to understand this prior to moving to the challenge.
The components and controller and helper are as follows:
expenseApp.app (provides the styles correctly):
expenses.cmp:
expensesController.js:
expensesHelper.js:
expenseItem.cmp:
expensesList.cmp:
The screen:
the error (when adding an item):
The console:
So it looks like there is a well-defined object that is intended to be pushed into the array. I tried to remove the JSON.stringify, prior to the push, but that created the same error.
Any assistance would be helpful.
Don't worry about providing a free "passing grade," this is just the copy/pasted provided example. I wish to understand this prior to moving to the challenge.
The components and controller and helper are as follows:
expenseApp.app (provides the styles correctly):
<aura:application > <ltng:require styles="{!$Resource.SLDS + '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/> <div class="slds"> <c:expenses /> </div> </aura:application>
expenses.cmp:
<aura:component > <aura:attribute name="newExpense" type="Expense__c" default="{ 'sobjectType': 'Expense__c', 'Name': '', 'Amount__c': 0, 'Client__c': '', 'Date__c': '', 'Reimbursed__c': false }"/> <div class="slds-page-header" role="banner"> <div class="slds-grid"> <div class="slds-col"> <p class="slds-text-heading--label">Expenses</p> <h1 class="slds-text-heading--medium">My Expenses</h1> </div> </div> </div> <!-- / PAGE HEADER --> <!-- NEW EXPENSE FORM --> <div class="slds-col slds-col--padded slds-p-top--large"> <!-- [[ expense form goes here ]] --> </div> <div class="slds-col slds-col--padded slds-p-top--large"> <div aria-labelledby="newexpenseform"> <!-- BOXED AREA --> <fieldset class="slds-box slds-theme--default slds-container--small"> <legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium"> Add Expense </legend> <!-- CREATE NEW EXPENSE FORM --> <form class="slds-form--stacked"> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <ui:inputText aura:id="expname" label="Expense Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Name}" required="true"/> </div> </div> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <ui:inputNumber aura:id="amount" label="Amount" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Amount__c}" required="true"/> </div> </div> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputText aura:id="client" label="Client" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Client__c}" placeholder="ABC Co."/> </div> </div> <div class="slds-form-element"> <div class="slds-form-element__control"> <ui:inputDate aura:id="expdate" label="Expense Date" class="slds-input" labelClass="slds-form-element__label" value="{!v.newExpense.Date__c}" displayDatePicker="true"/> </div> </div> <div class="slds-form-element"> <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?" class="slds-checkbox" labelClass="slds-form-element__label" value="{!v.newExpense.Reimbursed__c}"/> </div> <div class="slds-form-element"> <ui:button label="Create Expense" class="slds-button slds-button--brand" press="{!c.clickCreateExpense}"/> </div> </form> <!-- / CREATE NEW EXPENSE FORM --> </fieldset> <!-- / BOXED AREA --> </div> <!-- / CREATE NEW EXPENSE --> </div> <!-- / NEW EXPENSE FORM --> <br/> <c:expensesList expenses="{!v.expenses}"/> </aura:component>
expensesController.js:
({ clickCreateExpense: function(component, event, helper) { // Simplistic error checking var validExpense = true; // Name must not be blank var nameField = component.find("expname"); var expname = nameField.get("v.value"); if ($A.util.isEmpty(expname)){ validExpense = false; nameField.set("v.errors", [{message:"Expense name can't be blank."}]); } else { nameField.set("v.errors", null); } // ... hint: more error checking here ... // If we pass error checking, do some real work if(validExpense){ // Create the new expense var newExpense = component.get("v.newExpense"); console.log("Create expense: " + JSON.stringify(newExpense)); helper.createExpense(component, newExpense); } } })
expensesHelper.js:
({ createExpense: function(component, expense) { var theExpenses = component.get("v.expenses"); // Copy the expense to a new object // THIS IS A DISGUSTING, TEMPORARY HACK var newExpense = JSON.parse(JSON.stringify(expense)); console.log("Create expense is defined: " +JSON.stringify(newExpense)); theExpenses.push(expense); component.set("v.expenses", theExpenses); } })
expenseItem.cmp:
<aura:component > <aura:attribute name="expense" type="Expense__c"/> <p>Amount: <ui:outputCurrency value="{!v.expense.Amount__c}"/> </p> <p>Client: <ui:outputText value="{!v.expense.Client__c}"/> </p> <p>Date: <ui:outputDate value="{!v.expense.Date__c}"/> </p> <p>Reimbursed?: <ui:outputCheckbox value="{!v.expense.Reimbursed__c}"/> </p> </aura:component>
expensesList.cmp:
<aura:component > <aura:attribute name="expenses" type="Expense__c[]" default ="{[v.firstExpense, v.firstExpense, v.firstExpense]}"/> <div class="slds-card slds-p-top--medium"> <header class="slds-card__header"> <h3 class="slds-text-heading--small">Expenses</h3> </header> <section class="slds-card__body"> <div id="list" class="row"> <aura:iteration items="{!v.expenses}" var="expense"> <c:expenseItem expense="{!expense}"/> </aura:iteration> </div> </section> </div> </aura:component>
The screen:
the error (when adding an item):
The console:
So it looks like there is a well-defined object that is intended to be pushed into the array. I tried to remove the JSON.stringify, prior to the push, but that created the same error.
Any assistance would be helpful.
you got this error because your component are not connect with apex class that save your data in salesforce object
go to below link and add apex controller in your component
https://trailhead.salesforce.com/lex_dev_lc_basics/lex_dev_lc_basics_server
Thanks
mark it best answer if it helps you :)