function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Nevin O'Regan 3Nevin O'Regan 3 

3 Columns In A Section

Has anyone got simple examples of where they were able to add a 3rd column to a section in Lightning? 
 
Best Answer chosen by Nevin O'Regan 3
Naveen KNNaveen KN
Hi Nevin, 

There is a grid feature in the salesforce lightning design system. Make use of that for your requirement. 

If it is a standard component or layout then you cannot add the third one right beside as you highlighted above. You can add as a new component underneath the referral commission section. as per the standard functionality, you can make one or two column layouts in the lightning as shown below

User-added image

If you want to make three column layout then you can go for custom lightning component and use grid system to design as per your business requirement 
User-added image

More details on salesforce grid system at https://www.lightningdesignsystem.com/utilities/grid/#

Hope this information adds value to your development. 

Naveen
Team codengine.in 
 

All Answers

Meghna Vijay 7Meghna Vijay 7
Are you talking about using <lightning:layout> and <lightning:layoutItem>?
Nevin O'Regan 3Nevin O'Regan 3
I think so. I have a section in the page layout where I need to add a 3rd column. The other sections on the page layout are fine using the standard 2 columns but for this particular section I need a 3rd.
Meghna Vijay 7Meghna Vijay 7
Can you send screenshot of that section?
 
Nevin O'Regan 3Nevin O'Regan 3
Here is a screen shot of that section. The object is called Finance__c, and what I would like to do is add a 3rd column to selection which will show a picklist field "Status__c" opposite the currency field.

User-added image
Meghna Vijay 7Meghna Vijay 7
I think it's standard page layout and you want a 3rd column for a specific section. It can be done via two ways:-
1) Using VF page + SLDS and add it to the specific section of the page layout.
2) Use force:recordData with Mode="VIEW".
Thanks
 
Naveen KNNaveen KN
Hi Nevin, 

There is a grid feature in the salesforce lightning design system. Make use of that for your requirement. 

If it is a standard component or layout then you cannot add the third one right beside as you highlighted above. You can add as a new component underneath the referral commission section. as per the standard functionality, you can make one or two column layouts in the lightning as shown below

User-added image

If you want to make three column layout then you can go for custom lightning component and use grid system to design as per your business requirement 
User-added image

More details on salesforce grid system at https://www.lightningdesignsystem.com/utilities/grid/#

Hope this information adds value to your development. 

Naveen
Team codengine.in 
 
This was selected as the best answer
Nevin O'Regan 3Nevin O'Regan 3
Thanks Naveen,

The grid system using a custom lightning component sounds exactly what I am looking for. I will look into this further. 
Naveen KNNaveen KN
Great! Mark this thread as solved in case if any of solutions helped here. 

Happy coding! 
Naveen
Nevin O'Regan 3Nevin O'Regan 3
Hi Codengine.in

Do you mind me asking if the below code looks ok. Sorry I'm a novice at coding. I have gone to the Developer Console and selected Lightning Component. 

<aura:component >
    <div class="slds-grid slds-gutters">
  <div class="slds-col">
    <span>1</span>
  </div>
  <div class="slds-col">
    <span>2</span>
  </div>
  <div class="slds-col">
    <span>3</span>
  </div>
</div>
</aura:component>
Naveen KNNaveen KN
Yes, this looks good. It will give three column layout as per your need. 

Naveen
Nevin O'Regan 3Nevin O'Regan 3
Thank you. 
Nevin O'Regan 3Nevin O'Regan 3
Hi Codengine.in, shouldn't I be able to see this on the "Edit Page" in the custom component section? I don't see it there for some reason.

 
Naveen KNNaveen KN
add this one  
<aura:component implements="flexipage:availableForAllPageTypes">
    <div class="slds-grid slds-gutters">
        <div class="slds-col">
            <span>1</span>
        </div>
        <div class="slds-col">
            <span>2</span>
        </div>
        <div class="slds-col">
            <span>3</span>
        </div>
    </div>
</aura:component>

You need to implement interface to make it available <aura:component implements="flexipage:availableForAllPageTypes">

Naveen
Team codengine.in 
Nevin O'Regan 3Nevin O'Regan 3
Thanks Codengine.in,

How can I add input fields to this then? So I have created custom fields for this section on the object, is it possible to just add them to this code?
Naveen KNNaveen KN
It is not a direct addition. You need to work on lightning data service which displays values without any server-side apex and another approach is it build complete customization. go through the basics of showing fields in the lightning components. 

Naveen