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
Shekhar AgarwalShekhar Agarwal 

Would like to create voting criteria using Lightning Component Hi, I am trying to create simple voting criteria in Lightning. If age>=18. Alert = Congrats!! You can vote. Show button = Submit your vote else--- alert = 'Sorry you can't vote'.

My question is in voting criteria, whenever your component is loaded whether you entered age value or not, attribute 'Eligible for voting' will give you default value' false'(i.e. Congrats! You can vote. OR 'Sorry! you can't ' . But I want 'Eligible for voting' value should only be displayed when we enter the age field. else don't show anything. How will be achieve this?
Below is the code:
Component Code:
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="EligibleOrNot" type="boolean" default="true"></aura:attribute>
    
    <ui:inputText label="First name" aura:id="fname" placeholder="First Name"></ui:inputText>
    <ui:inputText label="Last name" aura:id="lname" placeholder="Last Name"></ui:inputText>
    <ui:inputText label="Age" aura:id="age" placeholder="Enter Age"></ui:inputText>
    <ui:button label="Check Eligibility" aura:id="checkeligibility" press="{!c.getEligibility}"></ui:button>
    
    <aura:if isTrue="{!v.EligibleOrNot}">
        Congrats! You can Vote.
        <ui:button label="Give Vote"></ui:button>
        
    <aura:set attribute="else">
         Sorry! You can not vote.
        <ui:button label="Cancel Vote"></ui:button>
        
    </aura:set>  
    
    </aura:if>
    
</aura:component>
Controller Code:
({
    getEligibility : function(component) {
        
        var vAge = component.find("age").get("v.value");
        
        if(vAge != null && vAge>=18){
            component.set("v.EligibleOrNot",true);
        }
        if(vAge!=null && vAge<18){
            component.set("v.EligibleOrNot",false);
        }
        
    }
})
Best Answer chosen by Shekhar Agarwal
ravi soniravi soni
Hi Shekhar,
Please apply following code. i did some changes in your code. 
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="EligibleOrNot" type="boolean" default="false"/>
    <aura:attribute name="checkEligibleForVote" type="boolean" default="false"/>
    
    <ui:inputText label="First name" aura:id="fname" placeholder="First Name"/>
    <ui:inputText label="Last name" aura:id="lname" placeholder="Last Name"/>
    <ui:inputText label="Age" aura:id="age" placeholder="Enter Age"/>
    <ui:button label="Check Eligibility" aura:id="checkeligibility" press="{!c.getEligibility}"/>
    
    <aura:if isTrue="{!v.checkEligibleForVote}">
        
        <aura:if isTrue="{!v.EligibleOrNot}">
            <!--Congrats! You can Vote.-->
            <ui:button label="Give Vote"></ui:button>
            
            <aura:set attribute="else">
                <!--Sorry! You can not vote.-->
                <ui:button label="Cancel Vote"></ui:button>
                
            </aura:set>
        </aura:if>
    </aura:if>
    
</aura:component>
({
    getEligibility : function(component) {
        
        var vAge = component.find("age").get("v.value");
        
        if(vAge == null || vAge == '' ){
           alert('please enter your age'); 
             component.set('v.checkEligibleForVote',false);
        return;
        }
        component.set('v.checkEligibleForVote',true);
        if(vAge != null && vAge>=18){
            alert('Congrats! You can Vote');
            component.set("v.EligibleOrNot",true);
        }
        if(vAge!=null && vAge<18){
             alert('Sorry! You can not vote');
            component.set("v.EligibleOrNot",false);
        }
        
    }
})

I think that's the good approach.
let me know if it helps you and mark it as best answer.
Thank you
 

All Answers

Suraj Tripathi 47Suraj Tripathi 47

Hi,

Please find the solution.

<aura:attribute name="Age" type="Integer" />
    <lightning:input type="Integer" name="Age" label="Age" value="{!v.Age}"  placeholder="Enter Age"/>
	
         <aura:if isTrue="{!v.Age >=18}">
         Congrats! You can Vote.
         <ui:button label="Give Vote"></ui:button>
                    <aura:set attribute="else">
					         Sorry! You can not vote.
                <ui:button label="Cancel Vote"></ui:button>
            </aura:set>
         </aura:if>


Please let me know it is working or not?

Please mark it as the Best Answer so that other people would take references from it.

Thank You
ravi soniravi soni
Hi Shekhar,
Please apply following code. i did some changes in your code. 
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="EligibleOrNot" type="boolean" default="false"/>
    <aura:attribute name="checkEligibleForVote" type="boolean" default="false"/>
    
    <ui:inputText label="First name" aura:id="fname" placeholder="First Name"/>
    <ui:inputText label="Last name" aura:id="lname" placeholder="Last Name"/>
    <ui:inputText label="Age" aura:id="age" placeholder="Enter Age"/>
    <ui:button label="Check Eligibility" aura:id="checkeligibility" press="{!c.getEligibility}"/>
    
    <aura:if isTrue="{!v.checkEligibleForVote}">
        
        <aura:if isTrue="{!v.EligibleOrNot}">
            <!--Congrats! You can Vote.-->
            <ui:button label="Give Vote"></ui:button>
            
            <aura:set attribute="else">
                <!--Sorry! You can not vote.-->
                <ui:button label="Cancel Vote"></ui:button>
                
            </aura:set>
        </aura:if>
    </aura:if>
    
</aura:component>
({
    getEligibility : function(component) {
        
        var vAge = component.find("age").get("v.value");
        
        if(vAge == null || vAge == '' ){
           alert('please enter your age'); 
             component.set('v.checkEligibleForVote',false);
        return;
        }
        component.set('v.checkEligibleForVote',true);
        if(vAge != null && vAge>=18){
            alert('Congrats! You can Vote');
            component.set("v.EligibleOrNot",true);
        }
        if(vAge!=null && vAge<18){
             alert('Sorry! You can not vote');
            component.set("v.EligibleOrNot",false);
        }
        
    }
})

I think that's the good approach.
let me know if it helps you and mark it as best answer.
Thank you
 
This was selected as the best answer
Shekhar AgarwalShekhar Agarwal
@Veer Soni: will you please explain me why we have used two boolean type attributes?
Suraj Tripathi 47Suraj Tripathi 47

You can try like this

Create one attribute

 

<aura:attribute name="Age" type="Integer" />

({
    getEligibility : function(component) {
        
        var vAge = component.find("age").get("v.value");
        
        if(vAge != null && vAge>=18){
            component.set("v.Age",vAge);
        }
        if(vAge!=null && vAge<18){
            component.set("v.EligibleOrNot",false);
        }
        
    }
})
<aura:attribute name="Age" type="Integer" />
 	
         <aura:if isTrue="{!v.Age >=18}">
         Congrats! You can Vote.
         <ui:button label="Give Vote"></ui:button>      
         </aura:if>

  <aura:if isTrue="{! AND ( (v.Age<18),(v.Age>=0))}">
                <!--Sorry! You can not vote.-->
                <ui:button label="Cancel Vote"></ui:button>
             
        </aura:if>

 
ravi soniravi soni
hi,
Yes, I can. First of all, we are checking age if user not put age into field than first we will alert  that 'Please enter your age' and then we will work furthure. From this attribute 'checkEligibleForVote'  we are checking age. if age is null then after alert we will return. And EligibleOrNot attribute is checking user is under 18 or above.

Thank you