Monthly Archives: October 2014

Rerendering Visualforce apex:sectionHeader

You would think you could rerender a sectionHeader component by referring to its id, just like other Visualforce components. Turns out this is not true as of V32

Here is a controller and VF page that tries to rerender an apex:sectionheader by inserting the selectedItem from an apex:selectlist.

public with sharing class FooController {
    // For demonstration of sectionHeader rerender issue
  public List<SelectOption> optionList {
        get { return new List<SelectOption> {
           new SelectOption('option1','option1'),
           new SelectOption('option2','option2')};}
        private set;                                                      
  public String selectedOption {get; set;}
<apex:page controller="FooController">
    <apex:sectionHeader title="My Title: {!selectedOption}" 
          description="sectionheaderNotInDiv." id="sectionHdrNoDiv"/>
    <apex:outputPanel  layout="block" id="sectionHdrInDiv">
        <apex:sectionHeader title="My Title: {!selectedOption}" 
            <apex:selectList label="choose something" 
                             value="{!selectedOption}" size="1">
               <apex:actionSupport event="onchange" 
               <apex:selectOptions value="{!optionList}"/>

Initial page state

Choose an option so onchange event occurs and rerender ensues

And the result
Only the sectionheader inside a div is rerendered even though both ids are specified in the rerender

Using Chrome Developer Tools, I inspected the HTML for the first apex:sectionHeader.

<div class="bPageTitle">
 <div class="ptBody secondaryPalette brandSecondaryBrd">
  <div class="content">
   <img src="/s.gif" class="pageTitleIcon" title="Home" alt="Home">
   <h1 class="pageType noSecondHeader">My Title: </h1>
   <div class="blank"></div>

And, what do you know, despite specifying an id on the first apex:sectionHeader, SFDC doesn’t add it to any generated HTML. No wonder it doesn’t rerender!