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
kkaalkkaal 

Mimik SFDC style in a PageBlock

I thought, that would be easy:

I use a pageBlock this way:

 

<apex:pageBlock id="pb2" tabStyle="Account">
      <apex:pageBlockSection columns="1" id="pbs1">
             <apex:pageBlockSectionItem id="pbsi2">
                  <apex:pageBlockSection columns="2">
                          <apex:pageBlockSectionItem >
                                <apex:outputLabel id="ot1" value="Contact Name" for="ot2"/>
                                <apex:outputText id="ot2" value="javascript&colon;contactArr[0]['name']"/>
                          </apex:pageBlockSectionItem>
                    </apex:pageBlockSection>
              </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
</apex:pageBlock>

 

 

I would like to have these outputs formatted according to the detail block of SFDC with the font formatting and the grey lines under the datacell.

 

I tried various options and it did not format.

Edwin VijayEdwin Vijay

Hi,

 

I do not understand why you have a pageblock inside a pageblocksection... The usual hierarchy is

 

pageblock, pageblocksection, pageblocksectionitem...  If you have this hierarchy, then things hsould work fine...

 

Let me know if you still face issues...
kkaalkkaal

Sorry, that was a copy / paste error. But I rechecked my code and still have no clue why it does not work:

 

 

<apex:page standardController="Account" extensions="accountExtController" showHeader="false"
    tabStyle="Account" id="basis" standardStylesheets="true">

    <apex:tabPanel id="tabpan1">

        <apex:tab label="Formattest" id="tab2">
            <apex:pageBlock id="pb2" tabStyle="Account">
                <apex:pageBlockSection columns="2" id="pbs1" showHeader="true">
                    <apex:pageBlockSectionItem id="pbsi1">
                        <apex:form id="form" id="form1">
                            <apex:pageBlockTable value="{!account.Contacts}" var="contact"
                                cellPadding="4" border="1" rows="10">
                                <apex:column value="{!contact.Name}" headerValue="Name">
                                </apex:column>
                            </apex:pageBlockTable>
                        </apex:form>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem id="pbsi2">
                            <apex:pageBlockSection columns="2" title="Details">
                            <!------------> These outputs do not get the right style <------------------>
                                    <apex:outputLabel id="ot1" value="Contact Name" for="ot2"/>
                                    <apex:outputText id="ot2" value="javascript&colon;contactArr[0]['name']"/>
                                    <apex:outputLabel id="ot3" value="Contact Email" for="ot4" styleClass="labelText"/>
                                    <apex:outputText id="ot4" value="javascript&colon;contactArr[0]['email']"/>
                                    <apex:outputLabel id="ot5" value="Contact Phone" styleClass="labelText"/>
                                    <apex:outputText id="ot6" value="javascript&colon;contactArr[0]['phone']"/>
                                    <apex:outputLabel id="ot7" value="Contact Fax" styleClass="labelText"/>
                                    <apex:outputText id="ot8" value="javascript&colon;contactArr[0]['fax']"/>
                           <!-----------                                            -------------------->
                           </apex:pageBlockSection>
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:tab>

    </apex:tabPanel>

</apex:page>

 As you see, there is a tab tag which contains a pageBlock. This divides the tab into 2 sections (with pageBlockSection and pageBlocSectionitems). The section #2 contains a new pageBlockSection which is intended to do a division of id="psbi2" into 2 columns. And the output in these secitons is not formatted.

 
paul-lmipaul-lmi

you have a pageBlockSection inside a pageBlockSectionItem.  The previous poster noted the proper hierarchy.  A pageBlockSectionItem is supposed to be a direct parent of up to two pairs of labels and fields, or just two fields, or 4 labels, etc.  It's not supposed to contain larger elements.
kkaalkkaal

Thanks Paul-lmi, understood,

 

but what can I do when I want a pageBlockSectionItem to hold another structure like pageBlockSection/pageBlockSectionitem/textoutputs?

 

I checkt to use outputPanels. That works without errors or so, but I still do not get the formating in the SFDC style
paul-lmipaul-lmi

you can't, they only designed pageBlockSectionItem for labels and fields, not full structured hierarchies.  you'll have to do it with custom CSS overrides instead.