function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Javier CastroJavier Castro 

limit aura iteration

Hi everyone.

I hope you can help me. I'm working with a lightning component which has an aura iteration with another component inside.

My code:
  
<aura:iteration var="event" items="{!v.events}">
       <c:LC_Events event="{!event}"/>                
 </aura:iteration>

I would like to know if there is any way to limit the number of records displayed and make a kind of button to load more or show more like in list views or related lists because when I have very few records I have no problem but when I have many records I get a very long vertical scroll and this is I want to avoid.

Regards
 
Best Answer chosen by Javier Castro
vijayabhaskarareddyvijayabhaskarareddy
Hi @Javier Castro,

Yes there is a way to limit the number of records to be displayed in aura:iteration.

Please find the below code:
  
<aura:component >
    <aura:attribute name="options" type="List" default="[
                                                        {'label': '5', 'value': 5},
                                                        {'label': '10', 'value': 10},
                                                        {'label': '20', 'value': 20},
                                                        ]"/>
    
    <aura:attribute name="size" type="Integer" default="2"/>
    <aura:attribute name="loadmoresize" type="Integer" default="5"/>
    <aura:attribute name="events" type="List" default="['1', '2', '3','4','5','6','7','8','9','10','11']" />
    <lightning:combobox name="progress" label="Size" value="listviewsize" placeholder="Select size" options="{! v.options }" onchange="{! c.handleChange }"/>
    <div class="slds-p-left_large">
        <aura:iteration var="event" items="{!v.events}" indexVar="index">
            <div class="{!index lt v.size ? 'slds-show':'slds-hide'}">
                <br/>
                {!event} <!-- replace this line with below commented line -->
                <!-- <c:LC_Events event="{!event}"/> -->
            </div>
        </aura:iteration>
    </div>
    <div class="{!v.events.length lt v.size ? 'slds-hide':'slds-show'}">
        <lightning:button variant="base" label="Load more" title="Load more" onclick="{! c.handleLoadMore }"/>
    </div>
    
</aura:component>
  
//controller.js

({
	handleLoadMore : function(component, event, helper) {
		var size=component.get("v.size");
         size=size+parseInt(component.get("v.loadmoresize"));
        component.set("v.size",size);
	},
    
    handleChange : function(component, event, helper){
        var selectedOptionValue = event.getParam("value");
        console.log(selectedOptionValue);
        component.set("v.loadmoresize",selectedOptionValue);
    }
})
User-added image

By default size is 2.

After clicking on load more button.

User-added image

Kindly let us know, if it helps you.

Thanks & Regards,
Vijay 
 

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Javier,

I trust you are doing splendidly and enjoying the season.

Please refer to the below blog by Sara Morgan which might help you with the above requirement.

https://saramorgan.net/2017/08/13/lightning-best-practice-adding-pagination-to-lists/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Javier CastroJavier Castro
Thank you Khan,

Thanks for the response

I dont have enough time to implement it now but it seems a great solution for my problem.
vijayabhaskarareddyvijayabhaskarareddy
Hi @Javier Castro,

Yes there is a way to limit the number of records to be displayed in aura:iteration.

Please find the below code:
  
<aura:component >
    <aura:attribute name="options" type="List" default="[
                                                        {'label': '5', 'value': 5},
                                                        {'label': '10', 'value': 10},
                                                        {'label': '20', 'value': 20},
                                                        ]"/>
    
    <aura:attribute name="size" type="Integer" default="2"/>
    <aura:attribute name="loadmoresize" type="Integer" default="5"/>
    <aura:attribute name="events" type="List" default="['1', '2', '3','4','5','6','7','8','9','10','11']" />
    <lightning:combobox name="progress" label="Size" value="listviewsize" placeholder="Select size" options="{! v.options }" onchange="{! c.handleChange }"/>
    <div class="slds-p-left_large">
        <aura:iteration var="event" items="{!v.events}" indexVar="index">
            <div class="{!index lt v.size ? 'slds-show':'slds-hide'}">
                <br/>
                {!event} <!-- replace this line with below commented line -->
                <!-- <c:LC_Events event="{!event}"/> -->
            </div>
        </aura:iteration>
    </div>
    <div class="{!v.events.length lt v.size ? 'slds-hide':'slds-show'}">
        <lightning:button variant="base" label="Load more" title="Load more" onclick="{! c.handleLoadMore }"/>
    </div>
    
</aura:component>
  
//controller.js

({
	handleLoadMore : function(component, event, helper) {
		var size=component.get("v.size");
         size=size+parseInt(component.get("v.loadmoresize"));
        component.set("v.size",size);
	},
    
    handleChange : function(component, event, helper){
        var selectedOptionValue = event.getParam("value");
        console.log(selectedOptionValue);
        component.set("v.loadmoresize",selectedOptionValue);
    }
})
User-added image

By default size is 2.

After clicking on load more button.

User-added image

Kindly let us know, if it helps you.

Thanks & Regards,
Vijay 
 
This was selected as the best answer
Javier CastroJavier Castro
Thanks @vijayabhaskarareddy it looks so good.

I will try to implement that later today and I will tell you later.

Regards