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
Hugo_BHugo_B 

How to create more than two columns in a page layout.

This may seem a simple question but I would like to make a custom page layout on a custom object that has more than two columns and would like to have the fields show up in edit and view mode.

 

I assume this is done with visual force pages but are there any examples I can use to get me started?

shruthishruthi

If you are using VF Pages, check here

 

<apex:pageBlockSection columns = "3"> if you want to include 3 columns in a row while displaying anything within <apex:pageBlockSection> </apex:pageBlockSection>

 

Over-ride the Edit & View buttons if you want the VF page to appear when clicked on these buttons.

 

Hope this helps!
Jake GmerekJake Gmerek

I have found that even setting the columns attribute to 3 is not enough for a good looking page.  The rightmost column tends to get smashed (for lack of a better word) against the right hand side of the table.  I solved this by playing with the css width settings a bit.  Here is an example of what I did.  It still was not perfect but was nice enough to roll out.

 

 <apex:pageBlockSection title="Labor Breakdown" columns="3">
              
<apex:pageBlockSectionItem dataStyle="width:10%" labelStyle="width:23%" >
<apex:outputLabel >Estimate1</apex:outputLabel>
<apex:inputField value="{!obj__c.Estimate__c}" style="width:80px"/>
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem dataStyle="width:10%" labelStyle="width:23%" >
<apex:outputLabel >Hours1</apex:outputLabel>
<apex:inputField value="{!obj__c.Hours__c}" style="width:80px"/>
</apex:pageBlockSectionItem>
          
<apex:pageBlockSectionItem dataStyle="width:10%" labelStyle="width:23%" >
<apex:outputLabel >Rate1</apex:outputLabel>
<apex:inputField value="{!obj__c.Rate__c}" style="width:80px"/>
</apex:pageBlockSectionItem>

...etc

 
Hugo_BHugo_B

Great information Jake!

 

I did use the EasyPage to modify a layout, however, how do I get the layout to be selectable in my custom object?  When I go to layouts, I just have my original layout there - not the one I changed.  I do see the custom layout in the Visual Force Pages in the Page layout editor, but that just embeds my layout inside of a standard layout.  Is that how it's done? or is there a way to use a completely custom layout instead of one built from within the Custom Object GUI?

 

Hugo
Jake GmerekJake Gmerek

As a disclaimer, I have never used EasyPage.  I did look at the description and I would say that the answer is to override the View/Edit buttons on your object.  Go to your object, scroll down to Custom Buttons and Links, and click edit next to the appropiate buttons and you should be able to select your visualforce page.  So in essence you do not change the page layout, you bypass the default one and tell SF to load your custom page instead.
Karen Brown 39Karen Brown 39
Hi,

Does anyone have any code I can use as a baseline for a 3 column visualforce page that leaves equal spacing between columns

I need a Header per section and a header per coumn then rows of output fields per coloumn like the below;

Section Header
Column Header 1                Column Header 2             Column Header 3
Field 1                                   Field 1                               Field 1
Field 2                                   Field 2                               Field 2
Field 3                                   Field 3                               Field 3
Field 4                                   Field 4                               Field 4

Thanks