2

Here is what I was working to populate 3 image fields on one row as 3 columns on top of Opportunity Page layout- (using inline VF page)

<apex:page standardController="Opportunity" tabStyle="Opportunity">
            <apex:pageBlock >
                <apex:pageBlockSection columns="3">
                    <apex:outputField value="{!opportunity.Pricing__c}" label="Pricing"/>
                    <apex:outputField value="{!opportunity.Approved__c}" label="Approved"/>
                    <apex:outputField value="{!opportunity.Payment_Info__c}" label="Payment Info"/>
                </apex:pageBlockSection>

            </apex:pageBlock> 
</apex:page>

Here is what it looks like now - enter image description here

How can I adjust the spacing between Pricing image and Approved image ? Thank you.

3

Page Block Sections are typically used to host Page Block Section Items, which are generally used to represent fields on a detail page, they allow you to easily mimic the standard UI, and so it only really supports one or two columns like standard layouts.

If you want three columns you're probably better off using <apex:pageBlockTable>:

<apex:page standardController="Opportunity" tabStyle="Opportunity">
    <apex:pageBlock >
        <apex:pageBlockTable>
            <apex:column value="{!opportunity.Pricing__c}" label="Pricing"/>
            <apex:column value="{!opportunity.Approved__c}" label="Approved"/>
            <apex:column value="{!opportunity.Payment_Info__c}" label="Payment Info"/>
        </apex:pageBlockTable>
    </apex:pageBlock> 
</apex:page>

If you check the documentation linked above there are plenty of options for styling the table, and it's trivial to include a header row as well. That said, the table is still going to be the width of the page, so if things are a bit far apart you might want to add a fourth column that the end just to use up some space, and you can do some crude styling by setting the width attribute of each column, giving them % values:

<apex:page standardController="Opportunity" tabStyle="Opportunity">
    <apex:pageBlock >
        <apex:pageBlockTable>
            <apex:column value="{!opportunity.Pricing__c}" label="Pricing" width="20%"/>
            <apex:column value="{!opportunity.Approved__c}" label="Approved" width="20%"/>
            <apex:column value="{!opportunity.Payment_Info__c}" label="Payment Info" width="20%"/>
            <apex:column width="40%"/>
        </apex:pageBlockTable>
    </apex:pageBlock> 
</apex:page>

However, I'd strongly encourage you to see if there's any more useful information you might be able to put into that space.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.