0

I am creating home page lightning component where i am displaying the records in the .

I am trying to display the 3 records( each record in separate tile) using lightning:layout in a row. I should also have previous and next arrow buttons in place. When next arrow button is clicked, it should display next set of 3 records.

<lightning:layout> 

    <aura:iteration items="{!v.mydataLst}" var="records" >
      <lightning:layoutItem padding="around-small" size="2"> 
        <div id="Tilu" class="slds-box">
        <ul class="slds-list_horizontal slds-has-dividers_right slds-has-block-links_space">
            <lightning:tile> 
                <dl class="slds-dl_horizontal">
                    <dt class="slds-dl_horizontal_label" >
                        <p class="slds-wrap">{!records.Name}</p>
                    </dt>                    
                </dl>
            </lightning:tile> 
        </ul>
        </div>
       </lightning:layoutItem>
    </aura:iteration>

</lightning:layout>

Kindly help how to proceed further.

3
  • Hi and welcome to Salesforce Stack Exchange. You need to give more context information to get an answer from the community. Can you post, what you have tried so far? Also see How to Ask for more information on how to write a good question. Sep 24, 2019 at 7:11
  • Hi @ChetanNandre , i have posted whatever i have tried so far.
    – Bhuvnisha
    Sep 24, 2019 at 8:39
  • @Bhuvnisha, do you have controller/helper code that is populating mydataLst? Your markup is fine, but the Javascript will need to do the heavy lifting for determining which records to show.
    – user72164
    Sep 24, 2019 at 12:51

1 Answer 1

0

If i am not wrong what you are looking for is pagination. I have tweaked your component a little and added arrow buttons.

totalList: This will contain all the records.

tempList: this will contain 3 records which you want to display. Keep manipulating this tempList to display relevant records to the user.

How do we achieve pagination now ?? here is a reference: http://sfdcmonkey.com/2017/01/26/display-record-with-pager-buttons-lightning-component/

<aura:attribute name="totalList" type="String[]" default="['red', 'green', 'blue']" />
<aura:attribute name="tempList" type="String[]" default="['red', 'green', 'blue']" />

<lightning:layout multipleRows="true">         
    <lightning:layoutItem padding="around-small" size="1"> 
        <lightning:icon iconName="utility:back" alternativeText="back" />
    </lightning:layoutItem>        
    <aura:iteration items="{!v.tempList}" var="records" >
        <lightning:layoutItem padding="around-small" size="3"> 
            <div id="Tilu" class="slds-box">
                <ul class="slds-list_horizontal slds-has-dividers_right slds-has-block-links_space">
                    <lightning:tile> 
                        <dl class="slds-dl_horizontal">
                            <dt class="slds-dl_horizontal_label" >
                                <p class="slds-wrap">{!records}</p>
                            </dt>                    
                        </dl>
                    </lightning:tile> 
                </ul>
            </div>
        </lightning:layoutItem>           
    </aura:iteration>
    <lightning:layoutItem padding="around-small" size="1"> 
        <lightning:icon iconName="utility:forward" alternativeText="forward" />
    </lightning:layoutItem>                 
</lightning:layout> 

Add pagination to your component and you should be good with your requirement.

1
  • Thanks @mohan. It worked..!
    – Bhuvnisha
    Sep 25, 2019 at 9:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .