I have created a lightning component and wanted to know how to display section of field on button click.

Im new to lightning and I have created a lightning component and wanted to know how to display section of fields on button click. For example If I click the Length button then the fields, From Length, To Length, Enter a number and Calculate button should only display. Similarly, if I click Weight button then From Weight, To weight, Enter a number and Calculate button should display respectively.

Component code:

<aura:component implements="flexipage:availableForAllPageTypes">

 What would you like to convert today 

 
<lightning:button variant="brand" label="Volume" title="Volume" />
<lightning:button variant="brand" label="length" title="Length"/>
<lightning:button variant="brand" label="Weight" title="Weight"/>
<lightning:button variant="brand" label="Currency" title="Currency"/>

 
 

<lightning:select name="selectFromVolume" label="From Volume" >
<option value="">Select Unit</option>
<option value="Litre">Litre</option>
<option value="Millilitre">Millilitre</option>
</lightning:select>


<lightning:select name="selectToVolume" label="To Volume" >
<option value="">Select Unit</option>
<option value="Litre">Litre</option>
<option value="Millilitre">Millilitre</option>
</lightning:select>

<aura:attribute name="myNumber" type="integer" default="10"/>
 <ui:inputNumber label="Enter a number: " value="{!v.myNumber}" updateOn="keyup"/> 

<lightning:button variant="brand-outline" label="Calculate" title="Calculate" />


 
 

<lightning:select name="select1" label="From Length" >
<option value="">Select Unit</option>
<option value="Millimeter">Millimeter</option>
<option value="CentiMeter">CentiMeter</option>
<option value="Meter">Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Inch">Inch</option>
<option value="Feet">Feet</option>
<option value="Yard">Yard</option>
<option value="Mile">Mile</option>
<option value="Nautical Mile">Nautical Mile</option>
</lightning:select>

<lightning:select name="select1" label="To Length" >
<option value="">Select Unit</option>
<option value="Millimeter">Millimeter</option>
<option value="CentiMeter">CentiMeter</option>
<option value="Meter">Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Inch">Inch</option>
<option value="Feet">Feet</option>
<option value="Yard">Yard</option>
<option value="Mile">Mile</option>
<option value="Nautical Mile">Nautical Mile</option>
</lightning:select>

<aura:attribute name="myNumber1" type="integer" default="10"/>
 <ui:inputNumber label="Enter a number: " value="{!v.myNumber1}" updateOn="keyup"/> 

<lightning:button variant="brand-outline" label="Calculate" title="Calculate" />

 
 

<lightning:select name="select1" label="From Weight" >
<option value="">Select Unit</option>
<option value="Pound">Pound</option>
<option value="Kilogramm">Kilogramm</option>
 <option value="Pound">Pound</option>
<option value="Gramm">Gramm</option>
<option value="Milligram">Milligram</option>
</lightning:select>

<lightning:select name="select1" label="To Weight" >
<option value="">Select Unit</option>
<option value="Pound">Pound</option>
<option value="Kilogramm">Kilogramm</option>
 <option value="Pound">Pound</option>
<option value="Gramm">Gramm</option>
<option value="Milligram">Milligram</option>
</lightning:select>

<aura:attribute name="myNumber2" type="integer" default="10"/>
 <ui:inputNumber label="Enter a number: " value="{!v.myNumber2}" updateOn="keyup"/> 

<lightning:button variant="brand-outline" label="Calculate" title="Calculate" />


 
 

</aura:component>

JS:

({
 myAction : function(component, event, helper) {


 }
})

April 20, 2020
·
Like
0
·
Follow
1

Best Answer chosen by VPM 1

Shamsher Singh
In most simplest term i can think of is below:
1. Have an attribute

<aura:attribute name="show" type="boolean" default="false" />

2. Call a method on button click(place onclick on all the buttons)

<lightning:button variant="brand" label="Volume" title="Volume" onclick="{!c.showFields}"/>

3.On click of the button, set the attribute to true in js comtroller.

({
 showFields : function(component, event, helper) {
component.set("v.show",true);
 }
})
4. Check for the attibute and show the respective section(use aura:if).
<aura:if isTrue="{!v.show}">
<lightning:select name="selectFromVolume" label="From Volume" >
<option value="">Select Unit</option>
<option value="Litre">Litre</option>
<option value="Millilitre">Millilitre</option>
</lightning:select>


<lightning:select name="selectToVolume" label="To Volume" >
<option value="">Select Unit</option>
<option value="Litre">Litre</option>
<option value="Millilitre">Millilitre</option>
</lightning:select>

<aura:attribute name="myNumber" type="integer" default="10"/>
 <ui:inputNumber label="Enter a number: " value="{!v.myNumber}" updateOn="keyup"/> 

<lightning:button variant="brand-outline" label="Calculate" title="Calculate" />
</aura:if>
Place all the sections separately inside the <aura:if > .

Mark the answer as true if it solves your problem.

April 20, 2020
·
Like
1
·
Dislike
0

This was selected as the best answer

VPM 1
Im getting the following error: FIELD _INTEGRITY_EXCEPTION Failed to save ConversionComponent.cmp: c:ConversionComponent:34,66: Invalid attribute "name": Source

<aura:attribute name="myNumber" type="integer" default="10"/>

April 20, 2020
·
Like
0
·
Dislike
0

Shamsher Singh
Please keep all the attributes on the top.

April 20, 2020
·
Like
0
·
Dislike
0

Shamsher Singh
You will have to maintain separate boolean for each section.

April 20, 2020
·
Like
0
·
Dislike
0

Shamsher Singh
Please reach out to sham.rock143@gmail.com for complete solution.

There are couple of things missing in the component you are trying to build. I believe, after calculating the volume, length etc, you will have to show on the UI as well.

April 20, 2020
·
Like
0
·
Dislike
0

VPM 1
I have moved all the attributes to top and also added if for all the sections. However, I did not understand what you meant by maintaning seperate boolean for each section.

I have modified the code as below:

<aura:component implements="flexipage:availableForAllPageTypes">

<aura:attribute name="show" type="boolean" default="false" />
<aura:attribute name="myNumber" type="integer" default="10"/>
<aura:attribute name="myNumber1" type="integer" default="10"/>
<aura:attribute name="myNumber2" type="integer" default="10"/>

<div>

 What would you like to convert today 

</div>

 

<lightning:button variant="brand" label="Volume" title="Volume" onclick="{!c.showFields}"/>
<lightning:button variant="brand" label="length" title="Length" onclick="{!c.showFields}"/>
<lightning:button variant="brand" label="Weight" title="Weight" onclick="{!c.showFields}"/>
<lightning:button variant="brand" label="Currency" title="Currency" onclick="{!c.showFields}"/>

 
 

<aura:if isTrue="{!v.show}">
<lightning:select name="selectFromVolume" label="From Volume" >
<option value="">Select Unit</option>
<option value="Litre">Litre</option>
<option value="Millilitre">Millilitre</option>
</lightning:select>


<lightning:select name="selectToVolume" label="To Volume" >
<option value="">Select Unit</option>
<option value="Litre">Litre</option>
<option value="Millilitre">Millilitre</option>
</lightning:select>


<ui:inputNumber label="Enter a number: " value="{!v.myNumber}" updateOn="keyup"/> 

<lightning:button variant="brand-outline" label="Calculate" title="Calculate" />
</aura:if>

 
 
<aura:if isTrue="{!v.show}">
<lightning:select name="selectFromLength" label="From Length" >
<option value="">Select Unit</option>
<option value="Millimeter">Millimeter</option>
<option value="CentiMeter">CentiMeter</option>
<option value="Meter">Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Inch">Inch</option>
<option value="Feet">Feet</option>
<option value="Yard">Yard</option>
<option value="Mile">Mile</option>
<option value="Nautical Mile">Nautical Mile</option>
</lightning:select>

<lightning:select name="selectToLength" label="To Length" >
<option value="">Select Unit</option>
<option value="Millimeter">Millimeter</option>
<option value="CentiMeter">CentiMeter</option>
<option value="Meter">Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Inch">Inch</option>
<option value="Feet">Feet</option>
<option value="Yard">Yard</option>
<option value="Mile">Mile</option>
<option value="Nautical Mile">Nautical Mile</option>
</lightning:select>


 <ui:inputNumber label="Enter a number: " value="{!v.myNumber1}" updateOn="keyup"/> 

<lightning:button variant="brand-outline" label="Calculate" title="Calculate" />
</aura:if>
 
 
<aura:if isTrue="{!v.show}">
<lightning:select name="selectFromWeight" label="From Weight" >
<option value="">Select Unit</option>
<option value="Pound">Pound</option>
<option value="Kilogramm">Kilogramm</option>
 <option value="Pound">Pound</option>
<option value="Gramm">Gramm</option>
<option value="Milligram">Milligram</option>
</lightning:select>

<lightning:select name="selectToWeight" label="To Weight" >
<option value="">Select Unit</option>
<option value="Pound">Pound</option>
<option value="Kilogramm">Kilogramm</option>
 <option value="Pound">Pound</option>
<option value="Gramm">Gramm</option>
<option value="Milligram">Milligram</option>
</lightning:select>


 <ui:inputNumber label="Enter a number: " value="{!v.myNumber2}" updateOn="keyup"/> 

<lightning:button variant="brand-outline" label="Calculate" title="Calculate" />

</aura:if>
 
 

</aura:component>

April 20, 2020
·
Like
0
·
Dislike
0

VPM 1
Thanks that worked. Thank you for your help!!

April 20, 2020
·
Like
0
·
Dislike
0

VPM 1
I updated the code to

({
   calVolume : function(component, event, helper) {
component.set("v.calculateVolume",true);
component.set("v.calculateLength",false);
component.set("v.calculateWeight",false);
component.set("v.calculateCurrency",false);
   },
calLength : function(component, event, helper) {
component.set("v.calculateVolume",false);
component.set("v.calculateLength",true);
component.set("v.calculateWeight",false);
component.set("v.calculateCurrency",false);
   },
calWeight : function(component, event, helper) {
       component.set("v.calculateWeight",true);
component.set("v.calculateVolume",false);
component.set("v.calculateLength",false);
component.set("v.calculateCurrency",false);
   },
calculateCurrency : function(component, event, helper) {
component.set("v.calculateWeight",false);
component.set("v.calculateVolume",false);
component.set("v.calculateLength",false);
component.set("v.calculateCurrency",true);
   }
})

Which you gave

April 20, 2020
·
Like
0
·
Dislike
0

VPM 1
.

July 23, 2020
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

I have created a lightning component and wanted to know how to display section of field on button click.

All Answers

You need to sign in to do that.