function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Amiya DasAmiya Das 

lightning components : stuck in trailhead

Hi,

I am trying to create a input form for Position object. My requirement is that, on submit button, the position records should be saved to the database and should also be displayed on the custom lightning page. For reference, i have used the same logic as given for the expense example in trailhead section :- https://trailhead.salesforce.com/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_forms(input form using components). 

Following is the component code:-

<aura:component implements="force:appHostable" controller="PositionInputController">
    <aura:attribute name="positions" type="Position__c[]"/>
    <aura:attribute name="newPosition" type="Position__c" default="{'sObjectType' : 'Position__c',
                                                                   'Name' : 'Senior Manager',
                                                                   'Apex__c' : true,
                                                                   'Close_Date__c' : '' ,
                                                                   'Days_Open__c' : 5,
                                                                   'Hire_By__c' : '',
                                                                   'Responsibilities__c' : '',
                                                                   'Max_Pay__c' : '',
                                                                   'Min_Pay__c' : ''}"/>
    
    <aura:attribute name="position" type="Position__c"/>
    
    <!-- Boxed Area -->
    <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="NewPositionForm" class="slds-text-heading--small slds-p-vertical--medium">
            My Position Form Entry Items
        </legend>
    
    
    
    <!-- Input form Components -->
    <div class="container">
        <form class="slds-form--stacked">
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <ui:inputText aura:id="name" label="Name" value="{!v.newPosition.Name}" class="slds-input" 
                                  labelClass="slds-form-element__label" required="true"/>
                </div>
            </div>
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <ui:inputCheckbox aura:id="apex" label="Apex" value="{!v.newPosition.Apex__c}" class="slds-checkbox" 
                                  labelClass="slds-form-element__label" required="true"/>
                </div>
            </div>
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <ui:inputDateTime aura:id="closedate" label="CloseDate" value="{!v.newPosition.Close_Date__c}" class="slds-input" 
                                  labelClass="slds-form-element__label" required="true" displayDatePicker="true"/>
                </div>
            </div>
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <ui:inputNumber aura:id="daysopen" label="DaysOpen" value="{!v.newPosition.Days_Open__c}" class="slds-input" 
                                  labelClass="slds-form-element__label" required="true"/>
                </div>
            </div>
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <ui:inputDateTime aura:id="hirebydate" label="HireByDate" value="{!v.newPosition.Hire_By__c}" class="slds-input" 
                                  labelClass="slds-form-element__label" required="true" displayDatePicker="true"/>
                </div>
            </div>
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <ui:inputText aura:id="responsibilities" label="Responsibilities" value="{!v.newPosition.Responsibilities__c}" class="slds-input" 
                                  labelClass="slds-form-element__label" required="true"/>
                </div>
            </div>
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <ui:inputCurrency aura:id="minpay" label="MinPay" value="{!v.newPosition.Min_Pay__c}" class="slds-input" 
                                  labelClass="slds-form-element__label" required="true"/>
                </div>
            </div>
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <ui:inputCurrency aura:id="maxpay" label="MaxPay" value="{!v.newPosition.Max_Pay__c}" class="slds-input" 
                                  labelClass="slds-form-element__label" required="true"/>
                </div>
            </div>
            <br/>
            <p>
                <ui:button label="Submit Position" press="{!c.submitPosition}" class="slds-button slds-button--brand"/>
            </p>
        </form>
    </div>
        </fieldset>
    <br/><br/>
    
    <!-- Displaying position form components -->
    <p>Name:
        <ui:outputText value="{!v.position.Name}" class="slds-output"/>
    </p>
    <p>Responsibilities:
        <ui:outputText value="{!v.position.Responsibilities__c}" class="slds-output"/>
    </p>
    <p>Minimum Pay:
        <ui:outputCurrency value="{!v.position.Min_Pay__c}" class="slds-output"/>
    </p>
    <p>Maximum Pay:
        <ui:outputCurrency value="{!v.position.Max_Pay__c}" class="slds-output"/>
    </p>
    <p>Hire By Date:
        <ui:outputDateTime value="{!v.position.Hire_By__c}" class="slds-output"/>
    </p>
    <p>Apex:
        <ui:outputCheckbox value="{!v.position.Apex__c}" class="slds-checkbox"/>
    </p>
    <p>Days Open:
        <ui:outputNumber value="{!v.position.Days_Open__c}" class="slds-output"/>
    </p>
    
    
    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small"> Positions </h3>
        </header>
        
        <section class="slds-card__body">
               <div id="list" class="row">
                <aura:iteration items="{!v.positions}" var="pos">
                <p> {!pos.Name}, {!pos.Hire_By__c}, {!pos.Responsibilities__c}, {!pos.Min_Pay__c}, {!pos.Max_Pay__c},
                {!pos.Days_Open__c}, {!pos.Apex__c}, {!pos.Close_Date__c} </p>
            </aura:iteration>
            </div>
        </section>
    </div>
    
    
    
</aura:component>

Following is the helper code:-

({
    createPosition : function(component, postn) {
        var thePosition = component.get("v.positions");
        
        var newPosition = JSON.parse(JSON.stringify(postn));
        
        thePosition.push(newPosition);
        component.set("v.positions", thePosition);
    }
})

Following is the controller code :-

({
    submitPosition : function(component, event, helper) {
        validPosition = true;
        
        //Name should not be blank
        var nameField = component.find("name");
        var posName = component.get("v.nameField");
        if($A.util.isEmpty(posName)){
            validPosition = false;
            nameField.set("v.errors", [{message:"name cant be blank"}]);
        }
        else
            nameField.set("v.errors", null);
        
        //responsibilities should not be blank
        var respField = component.find("responsibilities");
        var posResp = component.get("v.respField");
        if($A.util.isEmpty(posResp)){
            validPosition = false;
            respField.set("v.errors", [{message:"responsibilities cant be null"}]);
        }
        else
            respField.set("v.errors", null);
    
    
    //close Date cant be blank
    var closeDateField = component.find("closedate");
    var poscloseDate = component.get("v.closeDateField");
    if($A.util.isEmpty(poscloseDate)){
        validPosition = false;
    closeDateField.set("v.errors", [{message:"close date cant be blank"}]);
    }
    else
        closeDateField.set("v.errors", null);
        
        //Days Open should not be blank
        var daysOpenField = component.find("daysopen");
        var posdaysOpen = component.get("v.daysOpenField");
        if($A.util.isEmpty(posdaysOpen)){
            validPosition = false;
            daysOpenField.set("v.erros", [{message:"days open cant be blank"}]);
        }
        else
            daysOpenField.set("v.erros", null);
        
        //if error checking passed...excute the below code
        if(validPosition){
            //create new Position
            var newPosition = component.get("v.newPosition");
            console.log("create position : " +JSON.stringify(newPosition));
            helper.createPosition(component, newPosition);
        }
        
}
})

Following the is the apex class :- (for saving the position record)

public with sharing class PositionInputController {

@AuraEnabled
    public static list<Position__c> positionMethod1(){
        return [select Id, Name, Responsibilities__c, Apex__c, Close_Date__c, Days_Open__c, Hire_By__c, Max_Pay__c, Min_Pay__c from Position__c ];
    }

@AuraEnabled
    public static Position__c positionMethod2(Position__c pos){
        upsert pos;
        return pos;
    }
}

Following is the application code:-

<aura:application extends="force:slds">
    <div class="slds">
        <div class="slds-page-header">
            <div class="slds-grid">
                <p class="slds-text-heading--label"> Position Entry Form </p>
                <div class="slds-grid">
                    <p class="slds-text-heading--medium"> Position Items List </p>
                </div>
            </div>
        </div>
    </div>
    <c:PositionInputForm />
    
</aura:application>

the error on submit button is :
This page has an error. You might just need to refresh it. Action failed: c:PositionInputForm$controller$submitPosition [validPosition is not defined] Failing descriptor: {c:PositionInputForm$controller$submitPosition}

Any help will be appreciated. 
Thanks
Best Answer chosen by Amiya Das
sfdcMonkey.comsfdcMonkey.com
hi Amiya Das,
you have need to drclare variable validPosition in your js controller with var keyword 

({
    submitPosition : function(component, event, helper) {
        validPosition = true;
       var validPosition = true;
        more code here........

if it helps you, closed your query with choosing best answer so it make proper solution for others in future
thanks [sfdcmonkey.com]

 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi Amiya Das,
you have need to drclare variable validPosition in your js controller with var keyword 

({
    submitPosition : function(component, event, helper) {
        validPosition = true;
       var validPosition = true;
        more code here........

if it helps you, closed your query with choosing best answer so it make proper solution for others in future
thanks [sfdcmonkey.com]

 
This was selected as the best answer
Amiya DasAmiya Das
Hi Piyush,
Thanks a lot. It worked. But now, when I am submitting the form by entering the form values, it is still showing that respective fields like name, responsibilities..etc, cant be null. Values are already there in input box, yet this message? Snapshot is attached.
User-added image

Any suggestions?
Thanks in advance
sfdcMonkey.comsfdcMonkey.com
close your else block with { }  ,
({
    submitPosition : function(component, event, helper) {
        validPosition = true;
        
        //Name should not be blank
        var nameField = component.find("name");
        var posName = component.get("v.nameField");
        if($A.util.isEmpty(posName)){
            validPosition = false;
            nameField.set("v.errors", [{message:"name cant be blank"}]);
        }
        else{
            nameField.set("v.errors", null);
        }
        //responsibilities should not be blank
        var respField = component.find("responsibilities");
        var posResp = component.get("v.respField");
        if($A.util.isEmpty(posResp)){
            validPosition = false;
            respField.set("v.errors", [{message:"responsibilities cant be null"}]);
        }
        else{
            respField.set("v.errors", null);
       } 
    
    //close Date cant be blank
    var closeDateField = component.find("closedate");
    var poscloseDate = component.get("v.closeDateField");
    if($A.util.isEmpty(poscloseDate)){
        validPosition = false;
    closeDateField.set("v.errors", [{message:"close date cant be blank"}]);
    }
    else{ 
        closeDateField.set("v.errors", null);
    }
        //Days Open should not be blank
        var daysOpenField = component.find("daysopen");
        var posdaysOpen = component.get("v.daysOpenField");
        if($A.util.isEmpty(posdaysOpen)){
            validPosition = false;
            daysOpenField.set("v.erros", [{message:"days open cant be blank"}]);
        }
        else{
            daysOpenField.set("v.erros", null);
        }
        //if error checking passed...excute the below code
        if(validPosition){
            //create new Position
            var newPosition = component.get("v.newPosition");
            console.log("create position : " +JSON.stringify(newPosition));
            helper.createPosition(component, newPosition);
        }
        
}
})
it will be null when you click on the Submit Position button after fill these required fields
thanks Hopes it helps,
 
Amiya DasAmiya Das
Hi Piyush,
Thanks a lot fo your reply. Still i am getting the same error 'field cant be blank', as seen in the snapshot.Made changes you suggested. Below is controller code for reference :-

({
    submitPosition : function(component, event, helper) {
        var validPosition = true;
        
        //Name should not be blank
        var nameField = component.find("name");
        var posName = component.get("v.nameField");
        if($A.util.isEmpty(posName)){
            validPosition = false;
            nameField.set("v.errors", [{message:"name cant be blank"}]);
        }
        else{
            nameField.set("v.errors", null);
        }
        
        //responsibilities should not be blank
        var respField = component.find("responsibilities");
        var posResp = component.get("v.respField");
        if($A.util.isEmpty(posResp)){
            validPosition = false;
            respField.set("v.errors", [{message:"responsibilities cant be null"}]);
        }
        else{
            respField.set("v.errors", null);
        }
    
    
    //close Date cant be blank
    var closeDateField = component.find("closedate");
    var poscloseDate = component.get("v.closeDateField");
    if($A.util.isEmpty(poscloseDate)){
        validPosition = false;
    closeDateField.set("v.errors", [{message:"close date cant be blank"}]);
    }
        else{
        closeDateField.set("v.errors", null);
        }
        
        //Days Open should not be blank
        var daysOpenField = component.find("daysopen");
        var posdaysOpen = component.get("v.daysOpenField");
        if($A.util.isEmpty(posdaysOpen)){
            validPosition = false;
            daysOpenField.set("v.erros", [{message:"days open cant be blank"}]);
        }
        else{
            daysOpenField.set("v.erros", null);
        }
        
        //if error checking passed...excute the below code
        if(validPosition){
            //create new Position
            var newPosition = component.get("v.newPosition");
            console.log("create position : " +JSON.stringify(newPosition));
            helper.createPosition(component, newPosition);
        }
        
}
})

Any more suggestions?
Thanks