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.
Here’s how I called the original Salesforce lookup field in my Visualforce page:
Here’s the Salesforce lookup field markup once rendered:
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:
