Dynamically Display Button in Visualforce Page

Visualforce: Dynamically Display Button in Page

A reader recently asked me how to hide and display a button within the content of a Visualforce page. The person read another post from many years ago where I was displaying and hiding a button using an sControl. Feel free to review that post (Hiding & Displaying Buttons in the Page Layout) in order to familiarize yourself with the topic as it was initially introduced.

Let's assume that the requirement this time is to dynamically hide/display a button in a page layout based upon a status value. For the sake of simplicity, let’s assume further that the display of the button is based upon the standard Lead Status field. Our hypothetical business logic for this demo is to display a "Convert" button within the page layout when the lead is in any status except "Unqualified." When the lead is not qualified, as denoted by the status, then we will simply not display the button.

The first thing we need to do is write a Visualforce page that will contain the button. I will use an HTML input tag for the button rather than a commandButton Visualforce markup tag because I want to have greater control over the behavior of the Users interaction with the button. This is only my preference and you may decide to use Visualforce markup for this functionality. Please see my starting point below:

<apex:page standardController="Lead">
<!--
	Created by: Greg Hacic
	Last Update: 17 May 2012 by Greg Hacic
	Questions?: greg@interactiveties.com
-->
<style type="text/css">
.buttonDiv {
	padding-left: 115px; /*attempts to indent the button to better align within the standard page layout*/
}
</style>
<div class="buttonDiv">
	<input class="btn" name="demo_button" onclick="JavaScript: parent.location.href='{!URLFOR( $Action.Lead.Convert ,  Lead.Id, [retURL="/"+Lead.Id])}';" title="Convert Lead" type="button" value="Convert" />
</div>
</apex:page>

At this point we have a button within a Visualforce page that, when clicked, will navigate the user to the convert lead page. Add the visualforce page to your Lead page layout(s) so that you can see how this looks thus far.

The next thing we need to do is update the code to allow for displaying and hiding of the button when certain conditions exist on any given Lead record. In order to accomplish this we will use merge fields. Using the merge fields allows us the flexibility of using our Visualforce page without the need for a controller extension.

We will use CSS styling to control the display of the div tag, which holds the button. Remember, that this is simply one option for manipulating the display of the button within our Visualforce page. Please see the updated Visualforce page below:

<apex:page standardController="Lead">
<!--
	Created by: Greg Hacic
	Last Update: 17 May 2012 by Greg Hacic
	Questions?: greg@interactiveties.com
-->
<style type="text/css">
.buttonDiv {
	padding-left: 115px; /*attempts to indent the button to better align within the standard page layout*/
	display: {!IF( Lead.Status = 'Unqualified', 'none', '')}; /*controls whether the div tag is displayed*/
}
</style>
<div class="buttonDiv">
	<input class="btn" name="demo_button" onclick="JavaScript: parent.location.href='{!URLFOR( $Action.Lead.Convert ,  Lead.Id, [retURL="/"+Lead.Id])}';" title="Convert Lead" type="button" value="Convert" />
</div>
</apex:page>

The CSS "display" property allows for an element to either be visible or not within a page. Our merge expression is checking if the Lead.Status is equal to the string "Unqualified" or not. If the status is that value then set the display property to "none". Or, in this case, hide the content of the tag in which this property is being used.

Thank you very much for reading this post. I periodically receive feedback and questions about the topics I write about and I truly appreciate that this information is being utilized by the Salesforce & Force.com community. Feel free to reach out to me if you have an idea for another post, want to ask a question or just want to say hi.