Dear awesome readers,

Wont it be nice to create good looking pages, rather than the boring omnipresent standard salesforce stylesheet.

What you need to know before you go ahead:
1. Visualforce basics
2. CSS basics
3. jQuery basics

What we will do is to convert this: (lets call it image 1)

into this: (lets call it image 2)

First things first, add the following in the visualforce page:

<apex:page controller="pnc_v3" showHeader="false" title="Parent and Child creator" standardStylesheets="false">
    <head>
        <!-- Latest compiled and minified CSS -->
        		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
    </head>

What we’ve done here is disabled the boring salesforce header and told salesforce to keep your stylesheet with yourself. And then we’ve added the required CDNs for bootstrap CSS and jQuery.

I will now jump straight to the apex:inputfield part. In the image 1, if you open the inspect element in chrome you will see the following:

The VF side of this is (call it image 3):

That is to say that salesforce renders the apex:pageblocksection as an html table with tr td.

Now, if you visit http://www.w3schools.com/bootstrap/bootstrap_tables.asp page, you its a cake walk to use the relevant class in the

element and the work is done! In my case the classes are: “table table-hover table-condensed”
but wait, there isnt a table element in VF, what we are using is apex:pageblocksection . So where do we assign the class mentioned on the bootstrap documentation?

We use some jQuery to modify the DOM and assign the classes as follows:

j$ = jQuery.noConflict();
console.log("%% hi 1");
 function funcparentfieldtable() {  														j$( ".parentfieldtable table" ).each(function() {          												j$(this).addClass( "table table-hover table-condensed" );        											});};

and don’t forget to add this on the VF page:

oncomplete="funcparentfieldtable();

OR
use a

$j(document).ready(funtion(){......

Hope this was useful.
Cheers!

Advertisements