Bootstrapping the PHP Toolkit – Part 1

Img80_phpOne of the best things about being a Salesforce developer is that there’re lots of open-source projects and tools available. The bad thing though is that since there are so many of these, most of these aren’t updated regularly enough. The PHP Toolkit is one such framework which although is very powerful, but the user interface is completely dated as it’s not been updated since year 2010.

I decided to pick it up, enhance it and jazz it up a little bit to adopt to the modern times. Read on to find out more.

The existing PHP toolkit looks something like this – which is clearly not something very usable.

Screen Shot 2016-06-04 at 11.40.48 AM

Hence, began the quest to make it look a bit more polished and thanks to Bootstrap styling changes, it now looks like

Screen Shot 2016-06-04 at 11.42.44 AM

There are several enhancements such as

  • Ability to add new Contact records
  • Drill down into a detail view for a Contact record
  • Pagination
  • Filtering based on Contact Id, First Name, Last Name, Phone, Created Date etc.
  • Ability to export contact list data into a CSV file
  • Ability to import contact list data form a CSV file

Let’s begin with the contact list overhaul and we’ll gradually pick up each of these in the subsequent tutorials.

The original code fires the SOQL query to get the list of Contacts

Screen Shot 2016-06-04 at 12.38.00 PM

And then uses a simple HTML table styling as follows

Screen Shot 2016-06-04 at 12.37.11 PM

I modified it to use a bunch of libraries for styling changes including Bootstrap and jQuery DataTable.

Screen Shot 2016-06-04 at 12.39.42 PM

The table now uses jQuery data table and Bootstrap CSS

Screen Shot 2016-06-04 at 12.44.00 PM

There’s now simple pagination as well

Screen Shot 2016-06-04 at 12.46.33 PM

This allows choosing any number of records on each page and provides forward and backward navigation capabilities.

Screen Shot 2016-06-04 at 12.47.26 PM

This sums up this tutorial where we took the legacy PHP Toolkit and re-vamped the list UI using jQuery DataTable and Bootstrap. The code is available here (updated with some fixes).


In the next part, we’ll cover how to build a simple Contact detail page to further enhance this toolkit. See you soon!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s