+ Start a Discussion
Rohit Singh 136Rohit Singh 136 

Add 3 fields in single colume in standard account page layout

Hi Experts,
<apex:page standardController="Account">  <apex:form >
<apex:pageBlock >

<apex:pageBlockSection columns="3">
 
<apex:inputField value="{!Account.customer_type__c}" required="false"/> 
<apex:inputField value="{!Account.A__c}" required="false"/>
<apex:inputField value="{!Potential__c}" required="false"/>
 

</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>


I have a requirement to show 3 fields in a column in page section. As per standard Salesforce page permission it’s allow us only 2 field in a single column. I wrote Visualforce page and imbedded in Standard page layout but it looks edit page.
Please help me, my primary objective is to show 3 field in Single column and I can see them in edit and detail page both.
jigarshahjigarshah
Rohit,

As per the documentation (snapshot below) the Salesforce stylesheets are optimized for 1 or 2 columns but does not mandate it be so. Also, if you are using an inputField 1 row accounts for 2 cells i.e. input field label and its value.
Pageblock Columns attribute

In order to display the fields in one column, just change the columns attribute value for your pageBlockSection to 1 as per the code below.
<apex:pageBlockSection columns="1">
	<apex:inputField value="{!Account.customer_type__c}" required="false"/>
	<apex:inputField value="{!Account.A__c}" required="false"/>
	<apex:inputField value="{!Potential__c}" required="false"/>
</apex:pageBlockSection>

Moreover, you can add a new section to your Page Layout and configure the section as shown in the screenshot below. Add your Visualforce Page to this section.
PageBlock Section Properties
 
Rohit Singh 136Rohit Singh 136
User-added image

Hi Jigar,
I want fields should be look like above.
Sunil Chandel 2Sunil Chandel 2
section with one coloumn 
then take output panel 
<apex:inputField value="{!Account.customer_type__c}" required="false"/>
<apex:inputField value="{!Account.A__c}" required="false"/>
<apex:inputField value="{!Potential__c}" required="false"/>
close output panel
you should know to align these leaft right and middle
 
jigarshahjigarshah
Rohit,

All you need to do is use is wrap the inputFields within an <apex:pageBlockSectionItem>. When input fields are wrapped inside an <apex:pageBlockSectionItem> they do not display the field labels by default and require the labels to be manually specified.

Use this code below to achieve the desired layout.
<apex:page standardController="Account"> 
    
    <apex:form >
        <apex:pageBlock >
            
            <apex:pageBlockSection columns="3">
                
                <apex:pageBlockSectionItem>
                    <apex:inputField value="{!Account.customer_type__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem>
                    <apex:inputField value="{!Account.A__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem>
                    <apex:inputField value="{!Potential__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
            </apex:pageBlockSection>
            
        </apex:pageBlock>
    </apex:form>
</apex:page>
Rohit Singh 136Rohit Singh 136
I'm so sorry guys. I think you misunderstood my requirements. Using the code, I can see fields in single column but it looks like editable form. I want it should be work like standard page section when I clicked on edit page this section shows in editable form and when I clicked on save it should be shown as details page.
Right now using the apex:inputField value it showing only in input form I can’t save it and show values in detail page.
 
Sunil Chandel 2Sunil Chandel 2
use two section first for edit and second for noneditable on click edit button in class  use bolean for true render outputfield  on false and input field on the bases of true 
 
jigarshahjigarshah
Rohit,

Not sure if this is resolved for you but you can use the below approach to fulfill your requirements.

1. Create a Custom Url Button Edit and View button for Account.

2. The url for View and Edit buttons should be as follows

View Custom Button Url
/{!Account.Id}?ed=0

Edit Custom Button Url
/{!Account.Id}/e?ed=1
3.  Override the standard Edit and View buttons for Account with the newly created buttons.

4.  Modify the code I have shared above as follows.
<apex:page standardController="Account"> 
    
    <apex:form >
        <apex:pageBlock >
            
			<!-- Renders if the page is in Edit mode -->
            <apex:pageBlockSection id="pbEdit" columns="3" rendered="{!$CurrentPage.parameters.ed == '1'}">
                
                <apex:pageBlockSectionItem>
                    <apex:inputField value="{!Account.customer_type__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem>
                    <apex:inputField value="{!Account.A__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem>
                    <apex:inputField value="{!Potential__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
            </apex:pageBlockSection>
			
			<!-- Renders if the page is in ReadOnly mode -->
			<apex:pageBlockSection id="pbRead" columns="3" rendered="{!$CurrentPage.parameters.ed == '0'}">
                
                <apex:pageBlockSectionItem>
					<apex:outputField value="{!Account.customer_type__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem>
					<apex:outputField value="{!Account.A__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
                <apex:pageBlockSectionItem>
					<apex:outputField value="{!Potential__c}" required="false"/>
                </apex:pageBlockSectionItem>
                
            </apex:pageBlockSection>
            
        </apex:pageBlock>
    </apex:form>
</apex:page>
jigarshahjigarshah
Rohit,

Has your issue been addressed?