4

I have one scenario in which wrapper list is iterating using aura iteration. Inside iteration there is one text field and one dropdown ui:inputselect and ui:inputSelectOption options are also coming dynamically which contains fields. I want if one value in dropdown is changed, the text field gets changed.

For ex. If I select any date field from dropdown, the text field should be converted and one date picker should appear.

How to get which field is changed because we cannot have dynamic aura:id.

<aura:iteration items="{!v.wrapperList}" var="wrap" indexVar="i">
    <tr>
        <td>C:{!i+1}</td>                           

        <td>
            <ui:inputSelect multiple="false" value="{!wrap.fieldName}" class="form-control">
                <ui:inputSelectOption text="Select Field" label="Select Field" disabled="true" class="form-control"/>
                <aura:iteration items="{!v.objFieldsList}" var="fields">
                    <ui:inputSelectOption text="{!fields}" label="{!fields}" class="form-control"/>
                </aura:iteration>
            </ui:inputSelect>
        </td>

        <td>
            <ui:inputSelect multiple="false" value="{!wrap.opVal}" class="form-control">
                <ui:inputSelectOption value="=" text="EQUALS" label="EQUALS" class="form-control"/>
                <ui:inputSelectOption value="!=" text="NOT EQUALS" label="NOT EQUALS" class="form-control"/>
            </ui:inputSelect>
        </td>

        <td>
            <ui:inputText placeholder="Value" value="{!wrap.fieldVal}" class="form-control" required="true"/>
        </td>

    </tr>
</aura:iteration>
  • To deal with this I think you should go with child component and in the child component add the tr content. Does it make sense? – itzmukeshy7 Sep 5 '17 at 1:50
  • And can you share the possible options available for the first ui:inputSelect the objFieldsList value and the text field type mapping as well witht the objFieldsList values. – itzmukeshy7 Sep 5 '17 at 1:52
0

You can use the change attribute and invoke a function from your controller like this:

 <ui:inputSelect multiple="false" value="{!wrap.opVal}" class="form-control" change="selectChangeHandler">

Inside your controller, you can hide/display fields using their aura:id attribute

  • @prashanthkrYes, we can use change event. But how to set different id for different rows. In my case, rows are coming dynamically so how to know which row's picklitst is changed. As aura:id doesn't allow to be dynamic. – Mayank Jun 28 '16 at 6:16
  • You can use dynamic ids in aura:id like this: aura:id="{!'selectOption'+i}" – prashanthkr Jun 28 '16 at 15:54
  • Try this: Use html input instead of lightning one because they are made specifically for type of data they hold. In html input there is "type" attribute which accepts values like: date, datetime, text, number etc. Handle this type attribute value dynamically and then it should be rendered properly. Also html input can have dynamic ID's assigned so that's good for you. Have a try on it. – Jai Chaturvedi Nov 6 '16 at 22:03
  • 2
    @prashanthkr According to the documentation, you cannot use dynamic ids in an aura:id. aura:id doesn't support expressions. You can only assign literal string values to aura:id. ... developer.salesforce.com/docs/atlas.en-us.lightning.meta/… – Antonio Manente Jan 14 '17 at 5:33
0

We use a simple workaround when detecting change events on specific rows. Assign a data attribute with the id value you are interested in to the closest HTML element (in your case the td). Then, in your event handler walk through the event.path array until you get to your td and pull the id out of the dataset.

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.