Custom Lightning Template with Scroll Options in Salesforce

Sample Code:

Lightning Component:

  1. <aura:component implements="lightning:recordHomeTemplate">    
  2.         
  3.     <aura:attribute name = "left" type = "Aura.Component[]" />    
  4.     <aura:attribute name = "middle" type = "Aura.Component[]" />    
  5.     <aura:attribute name = "right" type = "Aura.Component[]" />    
  6.         
  7.     <table>    
  8.         <tr cellpadding = "8" cellspacing = "8" style="vertical-align:top;">    
  9.             <td width="14%">    
  10.                 <div class="slds-scrollable" style="height:900px;">{!v.left}</div>    
  11.             </td>    
  12.             <td width="1%"></td>    
  13.             <td width="45%">    
  14.                 <div class="slds-scrollable" style="height:900px;">{!v.middle}</div>    
  15.             </td>    
  16.             <td width="1%"></td>    
  17.             <td width="39%">    
  18.                 <div class="slds-scrollable" style="height:900px;">{!v.right}</div>    
  19.             </td>    
  20.         </tr>    
  21.     </table>    
  22.         
  23. </aura:component>   

Design:


  1. <design:component>  
  2.       
  3.     <flexipage:template >  
  4.           
  5.         <flexipage:region name = "left" defaultwidth = "Medium"/>          
  6.         <flexipage:region name = "middle" defaultwidth = "Medium"/>          
  7.         <flexipage:region name = "right" defaultwidth = "Medium"/>  
  8.           
  9.     </flexipage:template>  
  10.       
  11. </design:component>  

Output:



No comments:

Post a Comment