Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Matyas CsabaMatyas Csaba 

lightning:tile in 2 columns

Hello Helpers

I  am playign with component Lightning:tile  and trying to  display  some records(retrieved  from Opportunities  and related Account) in tiles
I am able  to  do  this but the tiles  are in 1  column
I would like  to  have 2  columns

This is  what I  have now.
User-added image

The information  I want to  display  are stored  in a  2  dimensional strign array  (v.mydataLst in my  code)
The  columns  are in  a separate  string array
I am using a  couple of  aura:iteration to  fetch  the array data items  and the  column headers  but it  does not looks as I  would like  to  look

Any  advice?

Thanks in advance
Csaba

            <aura:iteration items="{!v.mydataLst}" var="records" >
            <div id="Tilu" class="slds-size_1-of-2 slds-box">
                <lightning:tile label="{!records[0]}">
                    <aura:set attribute="media">
                        <lightning:icon iconName="standard:groups"/>
                    </aura:set>
                        <aura:iteration items="{!v.mycolumnsLst}" var="col" indexVar="colCount">
                        <aura:if isTrue="{!(colCount > 0)}">
                                      <aura:iteration items="{!records}" var="recItem" indexVar="rowcount">
                                        <aura:if isTrue="{!(rowcount == colCount)}">
                                        <dl class="slds-dl_horizontal" >
                                            <dt class="slds-dl_horizontal__label">
                                                <p class="slds-truncate" >{!col.label}:</p>
                                            </dt>
                                            <dd class="slds-dl_horizontal__detail slds-tile__meta">
                                                <p class="slds-truncate" >{!recItem}</p>
                                            </dd>
                                        </dl>
                                        </aura:if>
                                      </aura:iteration>
                        </aura:if>
                       </aura:iteration>
                </lightning:tile>
            </div> 
Best Answer chosen by Matyas Csaba
sfdcMonkey.comsfdcMonkey.com
Hi Csaba,
use lighting:layout and lightning:layoutItem tags for it, here is sample example :

apex : 
public with sharing class controllerTest{
    @AuraEnabled
    public static List<opportunity> getopportynity() {
        return [SELECT Id, Name, Type FROM opportunity LIMIT 10];
    }
}
Lightning component : 
<aura:component  controller="controllerTest">
	<aura:attribute name="mydataLst" type="Object"/>
     <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
  <lightning:layout multipleRows="true">  
    <aura:iteration items="{!v.mydataLst}" var="records" >
      <lightning:layoutItem padding="around-small" size="6">  
        <div id="Tilu" class="slds-box">
            <lightning:tile label="{!records.Name}">
                <aura:set attribute="media">
                    <lightning:icon iconName="standard:groups"/>
                </aura:set>
                <dl class="slds-dl_horizontal">
                    <dt class="slds-dl_horizontal__label">
                        <p class="slds-truncate">{!records.Name}</p>
                    </dt>
                    <dd class="slds-dl_horizontal__detail slds-tile__meta">
                        <p class="slds-truncate">{!records.Type}</p>
                    </dd>
                </dl>
            </lightning:tile>
        </div> 
       </lightning:layoutItem>
    </aura:iteration>
 </lightning:layout>
    
    
</aura:component>

js : 
({
    init: function (cmp, event, helper) {
        var action=cmp.get('c.getopportynity');
        action.setCallback(this,$A.getCallback(function(response){
            var state=response.getState();
            if(state==="SUCCESS"){
                var oResponse=response.getReturnValue();
                cmp.set("v.mydataLst",oResponse);
            }else if(state==="ERROR"){
                var errors=response.getError();console.error(errors);
            }
        }
         ));
        $A.enqueueAction(action);
    },
})
output :
User-added image

Kindly let us know if it helps you, & close this query by selecting best answer if you got your solution, so this will helps other in future

sfdcMonkey.com

 

All Answers

Raj VakatiRaj Vakati
I haven't tested it . after seeing the code i feel it should be like below 
  
<aura:iteration items="{!v.mydataLst}" var="records" >
            <div id="Tilu" class="slds-size_1-of-2 slds-box">
                
                        <aura:iteration items="{!v.mycolumnsLst}" var="col" indexVar="colCount">
                        <aura:if isTrue="{!(colCount > 0)}">
                                      <aura:iteration items="{!records}" var="recItem" indexVar="rowcount">
									  <lightning:tile label="{!records[0]}">
                    <aura:set attribute="media">
                        <lightning:icon iconName="standard:groups"/>
                    </aura:set>
					
									  
                                        <aura:if isTrue="{!(rowcount == colCount)}">
                                        <dl class="slds-dl_horizontal" >
                                            <dt class="slds-dl_horizontal__label">
                                                <p class="slds-truncate" >{!col.label}:</p>
                                            </dt>
                                            <dd class="slds-dl_horizontal__detail slds-tile__meta">
                                                <p class="slds-truncate" >{!recItem}</p>
                                            </dd>
                                        </dl>
                                        </aura:if>
                                      </aura:iteration>
									  
									   </lightning:tile>
                        </aura:if>
                       </aura:iteration>
               
            </div>




 
sfdcMonkey.comsfdcMonkey.com
Hi Csaba,
use lighting:layout and lightning:layoutItem tags for it, here is sample example :

apex : 
public with sharing class controllerTest{
    @AuraEnabled
    public static List<opportunity> getopportynity() {
        return [SELECT Id, Name, Type FROM opportunity LIMIT 10];
    }
}
Lightning component : 
<aura:component  controller="controllerTest">
	<aura:attribute name="mydataLst" type="Object"/>
     <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
  <lightning:layout multipleRows="true">  
    <aura:iteration items="{!v.mydataLst}" var="records" >
      <lightning:layoutItem padding="around-small" size="6">  
        <div id="Tilu" class="slds-box">
            <lightning:tile label="{!records.Name}">
                <aura:set attribute="media">
                    <lightning:icon iconName="standard:groups"/>
                </aura:set>
                <dl class="slds-dl_horizontal">
                    <dt class="slds-dl_horizontal__label">
                        <p class="slds-truncate">{!records.Name}</p>
                    </dt>
                    <dd class="slds-dl_horizontal__detail slds-tile__meta">
                        <p class="slds-truncate">{!records.Type}</p>
                    </dd>
                </dl>
            </lightning:tile>
        </div> 
       </lightning:layoutItem>
    </aura:iteration>
 </lightning:layout>
    
    
</aura:component>

js : 
({
    init: function (cmp, event, helper) {
        var action=cmp.get('c.getopportynity');
        action.setCallback(this,$A.getCallback(function(response){
            var state=response.getState();
            if(state==="SUCCESS"){
                var oResponse=response.getReturnValue();
                cmp.set("v.mydataLst",oResponse);
            }else if(state==="ERROR"){
                var errors=response.getError();console.error(errors);
            }
        }
         ));
        $A.enqueueAction(action);
    },
})
output :
User-added image

Kindly let us know if it helps you, & close this query by selecting best answer if you got your solution, so this will helps other in future

sfdcMonkey.com

 
This was selected as the best answer
Matyas CsabaMatyas Csaba
Thanks Piyush

Very  useful help  from you again
I will close the ticket
Matyas CsabaMatyas Csaba
I thought I altready mrked it
sfdcMonkey.comsfdcMonkey.com
yep, now it's good,
DoondiDoondi
How to achieve the same in LWC? 
Nisha M 24Nisha M 24
I wanna display 4 records in single row, What changes I nee to do?