Easy SF Portlets With jQuery (Project)

Tuesday, October 12, 2010 by Aslam - The Alexendra
Hi All,
With my previous experience with many projects it seems "one special" kind of requirement comes always and that always needs me and my team to build every time from scratch and takes time to complete. Yes, this is "Portlets Home" page for clients with a drag and drop boxes on a single page, each box contains different information section bla bla. Yes, requirements for different clients always differ from each other, but the BASIC building blocks are same for all. All needed a Home page with 3 or 4 column boxes with title and information. All boxes must be draggable etc. These building blocks every time needs attest 30-50 hours to complete. Some people uses ExtJs to build it, some uses jQuery and other JS Framework.



So, here i have come up with a "SF Portlets" project. The beauty of this project is , it is configurable , easy to install/setup, and you don't need to think about BASIC BUILDING BLOCKS, all is created and ready to use for you, you just need to concentrate on client extra requirement From that point where this project Ends.


I have shared this project on Code Share here:-
http://developer.force.com/codeshare/project/sf-portlets

You can also directly install the App from the below link:-
https://login.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t90000000Pl0v


Portlet Configuration Screen:-

You need to create at least one Portlet Config record with all given flags and fields. Also create your portlets and one Attachment for your portlet logo as shown below in this screen.


You can choose multiple themes from the Portlet Config picklist as below:



Default Theme



Redmond Theme



Black-Tie Theme



Create Different Types of Portlets as per your need
HTML
Will render whatever html you provided here as it is.



Text
Will show your text simply on screen.



URL
Will load the external data from given url (It must be Public accessible url). If you give WAP url then it must be good because that is perfect for a small porlet screen.



Query
Will run your SOQL query and show your data in tabular format (Please provide optimized and limit in your query for better load data). Query example:-

SELECT Name, Email, Phone FROM Contact ORDER BY LastModifiedDate DESC LIMIT 10



Activate/Deactivate Portlets
You can also set Activate or De-Activate any portlet which is you want or not to show on the Portlet Home using "Active" field flag(checkbox)



Here is the working demo for your view, it is hosted on Salesforce Public Sites.
http://labsprojects-developer-edition.ap1.force.com/

Future of the Project

Save Portlets State
Right now I am not storing user's drag and drop of the portlet on particular position. Right now all portlets comes as per last modified date desc order. I am planning to store their states also.


More Portlet Types
In my view, it must be very useful for basic portlets implementation with given options. I am thinking to extend it in terms of many aspects like support for more Portlet Types like:

Report
Will accept Report link and will show report details in portlet

Chart
Will accept Report link and will show its chart in portlet

Dashboard
Will accept Dashboard name and its component, and it will show that component in Portlet

Image
Will accept one Resource, Document name or link and will show that image

Attachment
Will accept one link of the attachment and will show in Portlet

Detail
Will accept a Id of the Record (Account, contact or opportunity), and will show that detail in this area

YouTube
Will accept a YouTube url and show that video in this portlet.

Feeds
Will accept any RSS Feed and show the details here.

And Much Much More…

View/Download complete documentation here:-

SF Portlets

So, give it a try, install and test it. Let me know for any feedback so that i can enhance it.



Thanks
Aslam Bari
Posted in | 19 Comments »