I have an overwritten edit page for my custom object, which have different record types with different fields.

The simplified desktop version of this VF page looks like this:

<apex:page standardController="CustomObject__c" extensions="CustomObjectCtrlExt" >



            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!save}"/>
                <apex:commandButton value="Cancel" action="{!cancel}"/>                

            <!-- Record Type 1 -->
            <apex:pageBlockSection rendered="{!recordtypename == 'RecordTypeName1'}" >

            <!-- Record Type 2 -->
            <apex:pageBlockSection rendered="{!recordtypename == 'RecordTypeName2'}" >

            <!-- Record Type 3 -->
            <apex:pageBlockSection rendered="{!recordtypename == 'RecordTypeName3}" >




Now I want to create a second VF page for my mobile users with HTML 5.

How do I implement the conditional rendering with HTML 5 ?

Of course, something like <div rendered="{!recordtypename == Name1}"> doesn't work.

1 Answer 1


Update (2017)

The trick below is good for 90% of cases, especially if you need a placeholder to which rerender might eventually have to inject something. But it can cause problems if you render VF as PDF and you're using this conditional rendering to hide table rows; inside <apex:repeat> for example. (Of course best would be to filter the data in a controller but sometimes you need to make-do without involving Apex)

Recently outputPanel started to inject <span> tags, even with layout="none"; and they break the table into separate rows with renderAs="pdf" Knowledge Base link.

So... what's another VF tag that contains rendered attribute but for sure doesn't generate any HTML so tables don't break...

    <apex:repeat value="{!acc.Opportunities}" var="opp">
        <apex:variable var="renderingHack" value="whatever" rendered="{!opp.Probability > 0}">
            <tr><td><apex:outputField value="{!opp.Name}" /></td></tr>

Original answer (2014)

<apex:outputPanel layout="block" rendered="{!recordTypeName = 'foobar'}">
    plain html here

Will render into a <div>. Experiment with different values for layout param. apex:outputText can be used in similar way but somehow I prefer the panel, feels, cleaner that way.

  • Isn't layout="none" a better choice?
    – Keith C
    Jul 28, 2014 at 14:31
  • The original page has apex:form which is evil in S1 context, yadda yadda... and we don't know if the mobile version will use it or say jQuery mobile's AJAX calls. Generally I'd indeed go with "none" unless there's need for standard VF rerender to work on these.
    – eyescream
    Jul 28, 2014 at 14:34
  • Relating to the layout discussion, I have found a great explanation in the docs: salesforce.com/us/developer/docs/pages/Content/…
    – David Renz
    Jul 29, 2014 at 8:22

You must log in to answer this question.

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