2

I am creating a filter row kind of thing which takes the field name as parameter and criteria to filter the record. I want to create one "Add Filter" button which basically creates new row with the "field name, condition, value, Remove row(hyperlink)" row. I tried few methods but did not worked

<ul class="slds-button-group slds-m-left--xx-small small oneActionsRibbon forceActionsContainer">
    <li class="slds-button slds-button--neutral slds-truncate">
        <a onclick="{!c.createFilterRow}" title="Add filter" class="forceActionLink">
            <div class="slds-truncate" title="Add filter">Add filter</div>
        </a>
    </li>
</ul>

Button code

<div class="slds-grid">
    <div class="slds-has" role="listitem" style=""> 
        <div class="uiInput">
            <label class="label inputLabel uiLabel-left form-element__label uiLabel">
                <span class="">Filter field</span>
            </label>
            <lightning:select aura:id="select-FilterOption" class="ltng-label-hide">
                <aura:iteration items="{!v.sObjectFilterOption}" var="item">
                    <option label="{!filter.Label}" value="{!filter.Value}" selected="{!filter.selected}"/>
                </aura:iteration>
            </lightning:select>
        </div>      
    </div>
    <div class="slds-has" role="listitem" style="">
        <div class="uiInput>
            <label class="label">
                <span class="">Operator</span>
            </label>
            <lightning:select aura:id="select-Operators" class="ltng-label-hide" >
                <aura:iteration items="{!v.sObjectOperators}" var="item">
                    <ui:inputSelectOption label="{!item.Label}" text="{!item.Value}"/>
                </aura:iteration>
            </lightning:select>
        </div>  
    </div>
    <div class="slds-has" role="listitem" style="">
        <div class="uiInput">
            <label class="label">
                <span class="">Value</span>
            </label>
            <ui:inputText class="input" aura:id="select-filterOption"/>                                    
        </div>
    </div>
    <div class="slds-has" role="listitem" style="">
        <div class="uiInput">
            <label class="label">
                <span class="" >Remove Row</span>
            </label>
        </div>
        <a class="ltng-label-hide" href="javascript:void(0)" onclick="{!c.removeFilterRow}">Remove</a>
    </div>
</div>

DIV part which i wanted to create on click of "Add Filter" button.

createFilterRow : function(component, event, helper) {
    var filterRowCount =  component.get('v.filterListCounter');
    filterRowCount++;
    component.set('v.filterListCounter',filterRowCount);
},
removeFilterRow : function(component, event, helper) {
}, 
rerender : function(component, event, helper) {
    this.superRerender();
    component.set('v.filterListCounter',filterRowCount);
}

Not sure what to write in controller function.

Can we use rerender option that we have in visualforce page?

  • apologies for my code formatting – Sagar Hinsu Nov 17 '17 at 10:57
2

In Lightning it's different than VF and all about components attributes which are smart enough to handle the rerendering on their own.

Conceptually I would create the filter rows as an attribute of type Object[] and use aura:iteration to render the rows.

Now if you set this attribute to a new value containing more or less or different filter rows, the framework will rerender the aura:iteration automatically. It will even rerender the iteration if you set the attribute to it's current and unchanged value.

In other words: cmp.set() triggers a rerendering of everything where the attribute is used in the markup. This is quite powerful. You don't need to tell the framework to rerender a certain div or panel. It knows already. Even if you used the attribute multiple times cluttered over the screen: each place gets updated in the DOM.

So using cmp.set() is the new rerender.

  • Thanks I just started using lightning so was not much aware of. I tried doing that but I was not able to.. can you help me little bit more on this? – Sagar Hinsu Nov 20 '17 at 5:06
  • I took an attribute with type as Object[] and on button click I am calling createRow function in my controller. Not sure what to do after that. Please help me – Sagar Hinsu Nov 20 '17 at 9:34

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.