Introduction
If you have to use this horrid CRM, here is a hack to highlight fields based on their contents. THIS HACK MAY NOT WORK IF THE PLATFORM CHANGES!
Background
Let's say you have a page in Salesforce, like Accounts or something similar and you would like to change the background color of fields on that object based on their values. Salesforce has had this feature request outstanding for years and still no movement. Salesforce does not want you to do this, but here is how.
Basically, what we are going to be doing is the following:
- Creating a Visual Force page that will be used in an iFrame on the page we would like to set highlights.
- The Visual Force page will redirect to a standard HTML page found under resources - this code will also change the reference domain from visual.force.com to salesforce.com so we don't get cross-domain errors when accessing things outside of the iFrame.
- The standard HTML page under resources will call outside of the iFrame and highlight controls based on their contents.
Using the Code
- First, you are going to be creating a Visual Force Page. Call this page:
SampleObject - Inside of the
SampleObject Visual Force Page, put this code. Notice that where it says:
<<NAME OF OBJECT YOU ARE GOING TO BE HIGHLIGHTING>>
You are going to replace this with the name of the object you are going to be highlighting, in my case, the name of my object is Accounts. Notice also that this references a resource file:
<apex:page standardController="<
<NAME OF OBJECT YOU ARE GOING TO BE HIGHLIGHTING>>">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' />
<script>
$(document).ready(
function(){
try {
var path = "{!URLFOR($Resource.HighlightHacker,
'AccountHighlighter.html')}";
var newLoc = window.location.href.replace
('//c.', '//').replace('visual.', 'sales');
newLoc = newLoc.substring(0, newLoc.indexOf
('salesforce.com') + 14) + path;
window.location.href = newLoc;
} catch(e) { }
});
</script>
</apex:page>
- Now you are going to create the
static resource name HighlightHacker containing a file named AccountHighlighter.html with the following content. If you don't know how to create static resources, Google it - you really just zip up files and upload them under Setup, Develop, Static Resources. Notice the field name that I want to highlight is in bold. You can find the field name you want to highlight by right-clicking on a field on the object's page (e.g., Accounts) and selecting Inspect Element using Chrome. It may be something similar in Internet Explorer or Firefox. Basically, you want to get the name of the div that you are going to be setting the background on (see bold):
<html>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<script>
$(document).ready(
function(){
try{
if ($("#00F51100009b7Bs_ileinner",
window.parent.document).html().length > 0 &&
$("#00F51100009b7Bs_ileinner",
window.parent.document).html() != ' ') {
$("#00F51100009b7Bs_ileinner",
window.parent.document).css('background-color', 'yellow');
} else {
$("#00F50000009b7Bs_ileinner",
window.parent.document).css('background-color', 'white');
}
} catch(e) { alert('Error highlighting: ' + e); }
});
</script>
</html>
- Once you have your
static resource uploaded and your visual force page in place, then you will add the Visual Force page to the layout of the page you want to highlight. Do this by going to that page (e.g., Accounts), clicking Edit Layout, selecting Visualforce Pages, and then drag SampleObject to anywhere on the page. Finally, set the height of the page to 1 pixel. Save the layout and you should be good to go.
Points of Interest
What is interesting is that you cannot simply call outside of the iFrame that is created when adding a Visual Force page to a Visual Force Page. This is because of cross-platform issues. Instead, you must redirect to a static resource which then calls outside of the iFrame under the same domain.
One thing I noticed is that sometimes SalesForce uses the same ID for controls twice - probably so that you cannot hack their system like this. So, you must get a little creative in how you are finding the controls. Here is an example that finds the control by caption (this may or may not work with the new Lightening interface):
function fHighlightControlForZeroByCaption(caption) {
var highlightColor = '#FFFF8C';
try{
var foundControl = null;
$('.labelCol', window.parent.document).each(function(index) {
if ($(this).html().indexOf(caption) >= 0) {
foundControl = $(this).next().children()[0];
return false;
}
});
if ($(foundControl).html().length > 0 && $(foundControl).html() != '0' &&
$(foundControl).html() != ' ' && $(foundControl).html() != '0.00') {
$(foundControl).parent().css('background-color', highlightColor);
$(foundControl).parent().css({"border-color": "#C1E0FF",
"border-width":"1px",
"border-style":"solid"});
$(foundControl).parent().parent().find('.labelCol').first().css
('background-color', '#BCD9FF');
$(foundControl).parent().parent().find('.labelCol').first().css
({"border-color": "gray",
"border-width":"1px",
"border-style":"solid"});
}
} catch(e) { alert(e); }
}
History
This is the first and final draft of this tip. If you hate Salesforce, hack it. If you hate it most, ditch it.
NOTE: On 1/7/2016, the way Salesforce loads resources changed - there is no way to do the aforementioned tip without cross-domain errors. However, if you want and have an older organization, you can create an S-Control that will originate from salesforce.com and allow cross-domain access (does not allow JavaScript src; have to paste in jquery).
