0

Is it possible to show a Visualforce PageBlock in a grid? I am looking to have 3 pageblocks horizontally on the page like below:

PageBlock Example

Improve this question
1
  • Is the screenshot from a current version of the code? What are you looking to change exactly?
    – sfdcfox ♦
    Commented Jun 30, 2021 at 14:44

2 Answers 2

Reset to default
2

Yes, you can have apex:pageBlock elements in a grid.

Option 1: apex:panelGrid

This creates a table element and stuffs the page block elements into it. This is a non-responsive design that may not work well on mobile devices.

<apex:panelGrid columns="3">
    <apex:pageBlock tabStyle="Account" title="Demo Section 1">
        <apex:pageBlockSection title="Demo Subsection 1" collapsible="false">
            <apex:pageBlockSectionItem>
                <apex:outputText>Demo 1</apex:outputText>
                <apex:outputText>Value 1</apex:outputText>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock tabStyle="Contact" title="Demo Section 2">
        <apex:pageBlockSection title="Demo Subsection 2" collapsible="false">
            <apex:pageBlockSectionItem>
                <apex:outputText>Demo 2</apex:outputText>
                <apex:outputText>Value 2</apex:outputText>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock tabStyle="Case" title="Demo Section 3">
        <apex:pageBlockSection title="Demo Subsection 3" collapsible="false">
            <apex:pageBlockSectionItem>
                <apex:outputText>Demo 3</apex:outputText>
                <apex:outputText>Value 3</apex:outputText>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:panelGrid>

Option 2: SLDS (Salesforce Lightning Design System)

This is a potentially responsive design if you specify additional options for the slds-col divs. See the Grid system for more information.

<apex:slds />
<div class="slds-grid">
    <div class="slds-col">
        <apex:pageBlock tabStyle="Account" title="Demo Section 1">
            <apex:pageBlockSection title="Demo Subsection 1" collapsible="false">
                <apex:pageBlockSectionItem>
                    <apex:outputText>Demo 1</apex:outputText>
                    <apex:outputText>Value 1</apex:outputText>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </div>
    <div class="slds-col">
        <apex:pageBlock tabStyle="Contact" title="Demo Section 2">
            <apex:pageBlockSection title="Demo Subsection 2" collapsible="false">
                <apex:pageBlockSectionItem>
                    <apex:outputText>Demo 2</apex:outputText>
                    <apex:outputText>Value 2</apex:outputText>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </div>
    <div class="slds-col">
        <apex:pageBlock tabStyle="Case" title="Demo Section 3">
            <apex:pageBlockSection title="Demo Subsection 3" collapsible="false">
                <apex:pageBlockSectionItem>
                    <apex:outputText>Demo 3</apex:outputText>
                    <apex:outputText>Value 3</apex:outputText>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </div>
</div>
Improve this answer
1

The screenshot you provided, with the collapsible header, is what you get from an <apex:pageBlockSection> rather than an <apex:pageBlock>.

Through some quick fiddling, it's quite easy to nest pageBlockSection inside of another pageBlockSection to create something resembling your screenshot.

<apex:page>
    <apex:pageBlock>
        <apex:pageBlockSection columns="3">
            <apex:pageBlockSection title="test1">
                <apex:pageBlockSectionItem>some content</apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="test2"></apex:pageBlockSection>
            <apex:pageBlockSection title="test3"></apex:pageBlockSection>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

The outermost pageBlockSection is what gives you 3 columns, which appears to apply to whatever elements are put inside of the pageBlockSection. You could easily swap out the inner pageBlockSections for pageBlocks instead, if you really wanted to.

Improve this answer
3
  • 1
    +1 but N.B. using more than two columns in a pbs is not technically supported, and the third column "may" end up looking weird in some cases (e.g. smaller than the other two, or the table overflows the device width, etc). Some testing should be done on various devices to make sure it looks okay.
    – sfdcfox ♦
    Commented Jun 30, 2021 at 14:57
  • @sfdcfox Is there documentation for that somewhere? Having tried to do 3 column layouts with html/css before my Salesforce days, it certainly sounds reasonable. The docs on PBS offer a less strongly worded "optimized for either 1 or 2 columns".
    – Derek F
    Commented Jun 30, 2021 at 15:01
  • That's all they have to say about it, really. I just remember having trouble with it in a project from a long time ago. YMMV depending on various factors like the content of each column and the size of the device. There's no optimization for more than 2 columns, so there's no guarantee that columns past the second one will work correctly.
    – sfdcfox ♦
    Commented Jun 30, 2021 at 15:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .