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 »

19 comments:

Ashok Kumar said...

Hi aslam,

its really a very good project and indeed a great efforts put by you. I really appreciate you work and idea.

I will definitely give a try to this project...

Francis Pindar said...

Cool, if you could just add a type called "Visual Force Page" it will get around the issue of not having, report, chart & detail portlet types at the moment.

Aslam - The Alexendra said...

@Francis: Thanks for you idea. I will surely add this.

Lokesh said...

Hi Aslam,

you are a time Saviour. This is such a worth project. no doubt it helps user to touch their requirement in efficient and less efforts.

many appreciations !!

Abdul Vahid said...

Hi, Its very good project. It will be useful to us in many projects.

Keep posting such a helpful post!!!

Unknown said...

Excellent work this is simply too good. Thanks for this.

Nandini

Anonymous said...

nicely done, aslam. i will give it a try

Abhay said...

Awesome work ......... Keep it up

Unknown said...

Hi,I had tried this project.

Its really a good project.Great effort!!

Anonymous said...

Nice Job. Like you already have in your to-do list. To make this really usable in the short term is to make the Query'ed items linkable to the detail record.

Amit Goyal said...

Hello aslam,
It's really useful, i have tried it before give this comment.

hope for this project will expand soon.

A lot thanx for this.

Anonymous said...

Aslam,

Is there any way to limit the records displayed based on the ID of the portal user?

kshama said...

Hello sir..
Really u r site...
good & nice.......

Anonymous said...

Is there a way we can save the location of the portlets for each user?

Aslam - The Alexendra said...

Yes mike. You can enhance to save the location by using some cookie way.

davcondev said...

I get an error selecting the portlet home tab. Below is the config I have done after install into a developer org. Is there something else I need to do?

Error:

Unknown property 'BytecodeApexObject.portletRecord'
Error is in expression '{!Portlet.portletRecord.Type__c = 'Query'}' in component in component c:portlet

Portlet Config:

Portlet Config Name PC-00000
Show Header/Sidebar Not Checked
Show Section Bar Checked
Theme Default
Section Title test title
Columns 3
Section Subtitle test subtitle
Portlet Width 300

Portlet:

Title test portlet 1
Type Text
Data this is a test portlet
Portlet Config PC-00000
Active Checked

Image:

Related To PC-00000
Private Not Checked
File Name generic.jpg
Description
Size 4KB

Anonymous said...

I am also getting the same error as above. Any update on the issue? Much appreciated for the above.

Anonymous said...

I am also getting the same error as above.

ER SONU SAINi said...

After Install Package Get Error and please give me Solution

Unknown property 'BytecodeApexObject.portletRecord'
Error is in expression '{!Portlet.portletRecord.Type__c = 'Query'}' in component in component c:portlet

where in change in component

Post a Comment