2

I am currently writing a lightning component made of a table of elements that can be selected (or not) using a ui:inputCheckbox.

So the way I do is fetching the data from APEX controller during the onInit() method call and store them in a aura:attribute:

<aura:attribute name="products" type="Object[]" default="[]" />

Every product is an object with an array of options inside it:

product: { selected: false, options: [] }

My component is made of an iteration over the products to store them in a <table> but also of an inner iteration product's options.

<aura:iteration items="{!v.products}" var="product">

  <ui:inputCheckbox value="{! product.selected }" 
                    updateOn="change,click" 
                    change="{! c.productSelected }" />

  <aura:iteration items="{!product.options}" var="option">

    <ui:inputCheckbox value="{! option.selected }" 
                      updateOn="change,click" 
                      change="{! c.optionSelected}" />

  </aura:iteration>
</aura:iteration>

My problem is that I have an handler on option that should check the parent product when selected and an handler on product that should uncheck its options when unchecked.

({
  optionSelected: function(component, event, helper) {},
  productSelected: function(component, event, helper) {
    const products = component.get('v.products');
    // find options or product the way you want
    // product.selected = true;
    // product.options.forEach(option => option.selected = false);
    component.set('v.products', products);
  }
})

But doing this way, my ui:inputCheckbox are not updated depending on the selected attribute even if the v.products object is well updated.

Any idea the way I can trigger the UI to refresh depending on those values ?

Thank you.

  • Does your browser support ES6? If not, your arrow function might be the problem. – sfdcfox Nov 6 '16 at 16:34
  • Yep, I tried with few browser it is support. Anyway, the component are transpiled into an ES5 build by Salesforce using Google Closure Compiler. developer.salesforce.com/docs/atlas.en-us.lightning.meta/… – Simon Placentino Nov 6 '16 at 16:40
  • Can you try using "keyup" attribute on checkboxes? <ui:inputCheckbox value="{! product.selected }" updateOn="change,click" change="{! c.productSelected }" keyup="change" /> – Jai Chaturvedi Nov 6 '16 at 20:56
  • 1
    Is options of a inner class type? Inner class won't work for lightning components – Lance Shi Nov 7 '16 at 3:27
  • 1
    @LanceShi : Inner Class does not work in Lightning components agreed .. however i have seen instance where <aura:attribute type="ParentClass.Object" name="Single" /> or <aura:attribute type="ParentClass.Object []" name="Collection" /> work .. ideally its substituting the innerClass name with Object ( javascript object ) .. worth giving it a try.. – StormBr34ker Nov 7 '16 at 4:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.