0

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: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>

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}

1

Since Lightning component runs in strict mode, you cannot have global variables/undeclared variables inside controller/helper in LC. To fix the issue you need to declare validPosition using the var keyword inside sumbitPosition helper method.

({
    submitPosition : function(component, event, helper) {
       var validPosition = true;
       ......
});
0

thanks a lot for your suggestion. It worked. But 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.enter image description here Any suggestions.. Thanks in advance

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.