0

The requirement I have is to display a list of items in card style panels with three on a row and 30px borders between them. Here is the basic code:

<aura:iteration items="{!v.paginatedList}" var="actApp" indexVar="itemNum">
    <div class="slds-col" style="border: 1px solid black;">
        <!-- actApp stuff here -->
    </div>
</aura:iteration>

What I want to do is something like

<aura:iteration items="{!v.paginatedList}" var="actApp" indexVar="itemNum">
    if(mod(itemNum+3,3) == 0){
        <div class="slds-grid slds-wrap">
            <div class="slds-col" style="border: 1px solid black; margin-right: 30px;">
                <!-- this would be col 1 -->
            </div>
    } else if(mod(itemNum+3,3) != 0 && mod(itemNum+1,3) != 0) {
            <div class="slds-col" style="border: 1px solid black; margin-right: 30px;">
                <!-- this would be col 2 -->
            </div>
    } else if(mod(itemNum+1,3) == 0){
            <div class="slds-col" style="border: 1px solid black;">
                <!-- this would be col 3 -->
            </div>
        </div>
    }
</aura:iteration>

I tried doing the if statements in but SF won't let you separate the start and end tags that way. I tried doing the if statements as part of but when I put the start tag in SF added the end tag to go with it immediately after the start tag. I may be going about this in the complete wrong way. Here is what I am trying to duplicate if it wasn't in a list

<div class="slds-grid slds-wrap">
    <div class="slds-col" style="border: 1px solid black; margin-right: 30px;">
        1
    </div>
    <div class="slds-col" style="border: 1px solid black; margin-right: 30px;">
        2
    </div>
    <div class="slds-col" style="border: 1px solid black;">
        3
    </div>
</div>
<div class="slds-grid slds-wrap">
    <div class="slds-col" style="border: 1px solid black; margin-right: 30px;">
        1
    </div>
    <div class="slds-col" style="border: 1px solid black; margin-right: 30px;">
        2
    </div>
    <div class="slds-col" style="border: 1px solid black;">
        3
    </div>
</div>

thanks for any suggestions.

0

Based on your example of the result you are looking for, what you should be doing is pulling out the specific fields from the actApp variable you are generating with your iteration and then displaying that in the 3 columns. This is what your code might look l be:

<aura:iteration items="{!v.paginatedList}" var="actApp">
    <div class="slds-grid slds-wrap">
        <div class="slds-col" style="border: 1px solid black;">
            {!actApp.field1Here}
        </div>
        <div class="slds-col" style="border: 1px solid black;">
            {!actApp.field2Here}
        </div>
        <div class="slds-col" style="border: 1px solid black;">
            {!actApp.field3Here}
        </div>
    </div>
</aura:iteration>

Note that you should probably pull out the CSS you have in style and put it in a css class instead

EDIT:

If what you want to do is to display each object as a column but have columns only 3 across you can use a combination of column sizes and slds-wrap to achieve what you want. Something like:

<div class="slds-grid slds-wrap slds-gutters_medium">
    <aura:iteration items="{!v.paginatedList}" var="actApp">
        <div class="slds-col slds-size_1-of-3" style="border: 1px solid black;">
            {!actApp.fieldHere}
        </div>
    </aura:iteration>
</div>
  • Each column would be a different {!actApp} object. so the columns actually have something like {!actApp.name} {!actApp.email} {!actApp.phone} – Travis Apr 5 '18 at 19:14
  • I'm not sure I follow what the problem is. I am assuming that paginatedList is a list of objects that you are iterating over and you want to display a grid for each object. Is that not the case? – Kyle Apr 5 '18 at 20:56
  • not a gird per object but one grid for 3 objects. a column for each object. – Travis Apr 5 '18 at 20:59
  • Okay, I was demonstrating how to replicate the grids you were trying to duplicate. If what you are looking for is to iterate through a list of objects, but show three of them at a time on a row, then what you could do is use the column sizing mentioned here along with the slds-wrap tag you are using to get the effect you want. I will update my answer to reflect this – Kyle Apr 5 '18 at 21:08
  • I tried using slds-size_1-of-3 but couldn't put the margins in between the 3 columns. I end up with all three piled together or if I add the margin it does two on each row instead of three. Thanks for the help Kyle I appreciate you giving me ideas. – Travis Apr 5 '18 at 21:10
0

Well I found a work around. On the controller I took three SF account objects and put them into a single javascript object. Then I could use one object per row just using the javascript object for each row.

-1

Display lightning card using aura:iteration:enter image description here

  • 1
    Welcome to SFSE! This answer is what we call a "code dump", where you provide some code without any explanation of what it does, or how it addresses the question. Such answers are usually low-quality, and tend to generate a lot of "that didn't work" and "try this instead" back-and-forth in the comments. High-quality answers tend to explain what the problem is, why it is a problem, how to fix it, and why the fix works. Doing this helps other people, with similar issues, understand their own problem and how they can apply it to their own situation. – Eduard Sep 4 '18 at 9:04

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.