Using Apex:Variable in Visualforce to control rendering of HTML Markup

This post is for developers working on Visual Force. I came across an interesting way to control the rendering of HTML markup; previously, I was using “<apex:outputPanel .. />” for controlling the rendering of some HTML markup. This approach works well and has no such harm, but it introduces an additional “DIV” or “SPAN” depending on outputPanel’s layout attribute. Unless you use layout=”none” attribute.

So another alternative can be to use <apex:variable rendered=””/> for controlling the rendering of HTML markup. We mostly use apex:variable tag for declaring complex expressions or variables in visual force page. But the same can be used very easily to control the rendering too.

Apex Variable Code Snippet

For the sake of sample code, I have created a small Visualforce page that

• Renders some HTML markup using both <apex:outputPanel/> and <apex:variable/>

• Hides some HTML markup using Apex variable.

• Is connected to a simple controller with two Boolean variables to control visibility.

Here is the Visualforce code:

<apex:page controller="ApexVarController">

	<!--  

        This container div "mycontainer-div" will be used to track, the HTML differences between apex:outputPanel and apex:variable

     -->

	<div id="mycontainer-div">

	    <!-- apex:outputPanel tag to control the rendering for Markup -->

		<apex:outputPanel rendered="{!controllerBoolTrueVar}">

			<h1>This markup is rendered under control of &lt;apex:outputPanel

			/&gt; tag</h1> <br />

		</apex:outputPanel> 

		<!-- apex:variable tag to control the rendering for Markup --> 

	<apex:variable

			value="anything will go here" var="tempRenderingVar1"

			rendered="{!controllerBoolTrueVar}">

			<h1>This markup is rendered under control of &lt;apex:variable

			/&gt; tag</h1><br />

		</apex:variable> 

		<!-- apex:variable tag used to not render for a Markup --> 

		<apex:variable

			value="anything will go here" var="tempRenderingVar2"

			rendered="{!controllerBoolFalseVar}">

			<h1>This markup will not appear on the page</h1><br />

		</apex:variable>

	</div>

</apex:page>

The simple Controller attached to the above Visualforce page:

public class ApexVarController {
    public boolean controllerBoolTrueVar { get; set; }
    public boolean controllerBoolFalseVar { get; set; }
    
    public ApexVarController (){
        controllerBoolTrueVar = true;
        controllerBoolFalseVar = false;
    }
}

Please share any queries or ideas about better ways to control the rendering of HTML markup.