0

I have a form in lightning component. Here are the two fields on the form

 <lightning:select aura:id="whoRequestedTheEvent" required="true" label="Is 
      this event being requested by XYZ">

      <option value="1">No</option>
      <option value="2">Yes</option>

  </lightning:select>


  <lightning:input aura:id="eventform" label="Which Element?"
                   name="eventname" value=" 
   {!v.case.Which__Element__c}" required="true"/>

The above picklist with the label="Is this event being requested by XYZ" has two values: Yes/No. The default picklist value displayed on the page is 'No' and the field with the label "Which Element" should be hidden. As soon as the user selects the value 'Yes' in the picklist, the field "Which element" should display asking user to enter something, but otherwise it should be hidden as long as the picklist value is No. I am a freshbie and need help with Javascript function that does this. Basically need help in completing the following code

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

    }
 })
  • 1
    While you can do this with JavaScript, I'd encourage you to explore the <aura:if> component instead, which is a bit more idiomatic. – David Reed Nov 21 '18 at 0:44
  • Thanks for the reply. Can you provide me the code for that? Also, I don't know where can I add <aura:if> conditions? This is my first time writing lightning component. – Student Nov 21 '18 at 0:46
  • If you are completely new to Lightning component development, you really should begin with Lightning Component Basics on Trailhead. SFSE is great for help with specific problems, but if you don't know how to start writing the code, the format here is not great for those questions. Luckily, Trailhead has really good intro material for Lightning. – David Reed Nov 21 '18 at 0:48
  • I will add an example of using <aura:if> however, with the hope it may be useful in your experiments. – David Reed Nov 21 '18 at 0:49
  • yes if you could provide me the if:aura code to achieve the above functionality, that would be great. I will find out where it needs to be added. Thanks. – Student Nov 21 '18 at 0:55
4

While you can certainly show and hide fields using JavaScript, it's usually more idiomatic in Lightning to allow the framework to handle conditional rendering using <aura:if> expressions built around the values of your attributes.

Here's a quick example of how to show and hide fields idiomatically in a Lightning component. This is an abbreviated example that's meant to show the structure, not a working component! I'd encourage adapting this type of structure to your specific needs.

<aura:component>
    <aura:attribute name="industry" type="String" default="Education" />
    <aura:attribute name="otherIndustry" type="String" />

    <lightning:select name="select1" label="What industry?" value="{! v.industry }">
        <option value="Education">Education</option>
        <option value="Finance">Financial Services</option>
        <option value="Sports">Sports and Recreation</option>
        <option value="Other">Other</option>
    </lightning:select>

    <aura:if isTrue="{! v.industry == 'Other' }">
        <lightning:input label="Other Industry" value="{! v.otherIndustry }" />
    </aura:if>
</aura:component>

What we do here is establish an attribute, industry, to hold the value of the <lightning:select> component, bound via its value attribute.

Then, we wrap another <lightning:input>, which we want to show conditionally, in an <aura:if> component. The <aura:if> includes a bound expression referring to the same attribute to which the select's value is bound. The framework then ensures that updates to these values are recalculated in all of the bound locations and rerenders elements appropriately.

Upshot? If you run this component, you'll find that when you select "Other", the "Other Industry" field appears immediately, no JavaScript client code required, and disappears again when you choose any other option. Let the framework do the work for you.

You can apply exactly the same pattern to your problem.

Further Reading

  • The above code and explanation is perfect. It cleared out all my doubts. I translated that into my use case and it worked!! Thank you so much :) – Student Nov 21 '18 at 1:42
  • I am very glad to be able to help! – David Reed Nov 21 '18 at 1:42

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.