Show and Hide Buttons on Page Layouts

01/31/2012

UPDATE: This is totally unsupported, a bit of a hack, and will most likely stop working after Summer 15.

Cloudspokes.com recently wrapped up a challenge titled “Magical Disappearing Salesforce Button with jQuery” and I couldn’t resist not entering. For starters it’s a pretty rad name for a challenge as anything with the words “magical” and “jQuery” in it get me excited. This challenge is now closed for new entries and I’d like to share my submission. Rather than the typical blog type post I’m going to vlog it! This is the first time I have posted something with this much detail so I’d love to get feedback. Are vlogs the way of the future or should I stick to the tried and true formula of written posts? Let me know.

The best way to watch these is to go full screen and the change the playback quality to 720p.

First up is a high level overview:



Next is a 15 minute deep dive that pulls back the covers and gets into all the juicy details.


Cool?!? Want to play with it? Make it better? No problem. Here is a unmanaged package install link to get this setup in your org: https://login.salesforce.com/packaging/installPackage.apexp?p0=04tE0000000HEjD

If you had trouble seeing the markup and script in the video above here is the sidebar html component that makes the magic happen:

<!-- We can locate this div with the script below, traverse up the DOM and then hide the entire sidebar component. -->
If you see this, something is broke with Dynamic Button functionality.
<!-- Import jQuery from google CDN, could also be static resource--><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
	/*Immediately create a unique alias for this version of jQuery to prevent conflicts with other js libraries*/
	var j$ = jQuery.noConflict();
 
	/*Determine what type of object is currently being displayed on the page. Only confident way to do this is get object prefix */
	var objectPefix = window.location.href.substring( window.location.href.indexOf('.com/') + 5, window.location.href.indexOf('.com/') + 8 );
 
	/*Query the records from Dynamic_Button__c object as soon as possible, don't wait for DOM ready event*/
	var result = sforce.connection.query("Select Button_Name__c, Field_Id__c, Field_Value__c from Dynamic_Button__c where Object_Prefix__c = '" + objectPefix + "'");
	var records = result.getArray("records");
 
	/*Execute this code block once page DOM has fully loaded*/
	j$(document).ready(function(){
		/*Hide the sidebar last as this is lowest priority. First priority is show/hiding the buttons.
		Find the sidebarComponentLocator, then find parent div with class 'sidebarModule' and the hide it*/
		j$("#sidebarComponentLocator").closest(".sidebarModule").hide().prev().hide(); 
 
		/*First loop through the dynamic button records and hide any that are on the layout. We must first hide all the buttons
		as the Dynamic Button records only contan the 'show' logic*/
		for (var i = 0; i< records.length; i++) {
			/*Hide buttons define in Dynamic_Button__c object*/
			j$("input[name='"+ records[i].Button_Name__c.toLowerCase() +"']").hide();
		}
 
		/*Now loop through the Dynamic_Button_Records and show button if field value matches that define in record*/
		for (var i = 0; i< records.length; i++) {
			/*Get the value from the field on the page layout*/
			var recordValue = j$("#"+records[i].Field_Id__c+"_ileinner").text();
			var showValue = records[i].Field_Value__c;
 
			/*Show the button if the value of the field on this record matchs the setting in the Dyamic_Button__c*/
			if(recordValue == showValue){
				j$("input[name='"+ records[i].Button_Name__c.toLowerCase() +"']").show();
			}
		}
 
		/*Everything above is cool and provides an easy to use interface for the logic but you could always hardcode the logic like so...
		First get value from the ninja field, this Id would need to be changed
		var ninjaSkillValue = j$("#00NE0000000d4hc_ileinner").text();
 
		/*Hide Ninja Attack button if Ninja Skill picklist value is not 'High'
		if(ninjaSkillValue != 'High'){
			j$("input[name='ninja_attack']").hide();
		}
		*/
	});
 
	/*If you are wondering why this file has multiline comments for one one...for some reason single line
	comments cause the script to break, something funky with salesforce and javascript in the sidebar.*/
// ]]></script>