Apex Code Development You need to sign in to do that
Don't have an account?
Matyas 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.
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>
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.
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>
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 :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
<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>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 :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
Very useful help from you again
I will close the ticket