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.

  • 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. – Chetan Nandre Sep 24 '19 at 7:11
  • Hi @ChetanNandre , i have posted whatever i have tried so far. – Bhuvnisha Sep 24 '19 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. – Chris Johnson Sep 24 '19 at 12:51
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.

| improve this answer | |
  • Thanks @mohan. It worked..! – Bhuvnisha Sep 25 '19 at 9:03

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.