FPO-Case-Featured-Image

In addition to contributing to the formal User Experience process at CodeScience, I have regularly built prototypes for our developers to implement. My prototypes have lived both on a normal web server and within my Salesforce development org. The more seasoned I become with Visualforce, the more I recommend prototyping directly in Salesforce when possible. If you’ve developed HTML and CSS that lives on the Salesforce platform, you’re probably familiar with the potential conflicts in styles. While I’m still honing my skills within this entire cycle of Salesforce prototyping, I can tell you it can be frustrating to see beautiful markup and styles skewed due to conflicting Salesforce styles. There are ways around this, of course, by telling your opening Visualforce page tag to not pull in standard styles. In addition, you can pull in Static Resources in Salesforce to pull in styles, images, and script files. This is fairly straightforward, though I’ve . Once you get Bootstrap in, you’re hoping your Visualforce page looks modern and great because you know what to expect when it comes to Bootstrap styles and components, right? Not always the case. Firstly, it would be wise to namespace your block of HTML. You can use Bootstrap’s LESS file and import Bootstrap within a namespace wrapper, such as explained in this Salesforce Stack Exchange post. When prototyping, it’s no guarantee that bootstrap inputs will always map perfectly to the output of Salesforce component-driven inputs. One such surprise for me was the “lookup” field. I didn’t realize on my first go for this Salesforce input type that it would output such different markup. My challenge was to help that lookup fit in to the rest of the Bootstrapped form elements being used.

The difference between what the standard output of a Salesforce Lookup Field, versus my final Bootstrap version.

Here’s how I called the original Salesforce lookup field in my Visualforce page:

Calling a Lookup Field within my Visualforce page

Here’s the Salesforce lookup field markup once rendered:

Standard Salesforce Lookup Field output – (javascript and such has been obfuscated for brevity)

Here’s the Salesforce lookup field in the browser:

Here’s a simple fix to render a similar yet more Bootstrappy version of this handy lookup input:

[Add styleClass=”form-control” to your apex tag. This will tell Bootstrap, “Yes! I’m a Bootstrap input!”
These styles will override those provided by Salesforce.
And you’ll end up with a lovely Bootstrapped lookup input field!
[Since writing this post, I ran across this App Exchange product called Visualstrap. I’ve not yet tried this out, but it very well could solve for the issue this post addresses.]