December 12, 2018

Custom Lightning Template with adjustable width in percentage in Salesforce

Sample code:

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%">{!v.left}</td>  
  10.             <td width="1%"></td>  
  11.             <td width="45%">{!v.middle}</td>  
  12.             <td width="1%"></td>  
  13.             <td width="39%">{!v.right}</td>  
  14.         </tr>  
  15.     </table>  
  16.       
  17. </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