VF page as Sub-Tabs on Chatter Profile Page

Chatter is a very strong collaborative tool providing a lot of features one of them is Chatter Sub-tabs which gives extra information about the user.

Below screen shows you the chatter page where you can perform plenty of actions as highlighted:

Image 1

There is more to this – you can even create global action and can include in the Chatter layout (Global Publisher layout). I am not going into detail on the global action as I will explain this with an example in my next blog…

Here is what on which I am writing my first blog (Chatter Sub-tabs):

Image 2

Before jumping into Sub-Tabs, let us see the permission needed to customize sub-tabs and from where you can control the visibility for the same:

Permission:

“Enable customization of Chatter User Profile Pages” in the UI settings:

Image 3

Sub-Tab Apps: This is also a collection of tabs similar to Apps but appears only on Chatter Profile Page.

Let us take a scenario and add another sub-tab to the Chatter Profile page.

Business Scenario: On a Sub-tab, I want to view the count of open cases along with Priority owned by the user.

Solution: Below is the snapshot of the code:


public class CaseController {
/*
* gives you the count of open cases for a priority
*/
public static List<aggregateResult> getOpenCasesCount(){

return [Select count(Id) cnt, Priority from Case where
ownerid =: apexpages.currentpage().getparameters().get('u')
and isClosed =: false Group by Priority];
}
}

 

Yes, with just a single line of code (performing SOQL) will fulfill the business requirement where in the url “u” holds the user id:


https://playwithsf-dev-ed.my.salesforce.com/_ui/core/userprofile/UserProfilePage?u=<span style="color: #000000;">00500000001ABcD</span>&tab=singhcloud.OpenCases

 

And below is the VF code:


<apex:page sidebar="false" showHeader="false" controller="CaseController">
<apex:pageBlock title="Count of Open Cases">
<apex:pageBlockTable value="{!OpenCasesCount}" var="oCases">
<apex:column >
<apex:facet name="header">Count</apex:facet>
{!oCases['cnt']}
</apex:column>
<apex:column >
<apex:facet name="header">Priority</apex:facet>
{!oCases['Priority']}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

 

But here is a problem in Apex Controller Class, the getParameters.get(‘u’) will give null as the VF is going to be a sub-tab which cannot read the parent url parameters.

Instead, chatter profile page passes the user id to all the child sub-tabs in the form of ‘sfdc.userid’.

Now, if we replace the “u” with “sfdc.userid” in the controller – will solve the problem:


public class CaseController {
/*
* gives you the count of open cases for a priority
*/
public static List<aggregateResult> getOpenCasesCount(){

return [Select count(Id) cnt, Priority from Case where
ownerid =: apexpages.currentpage().getparameters().get('sfdc.userid')
and isClosed =: false Group by Priority];
}
}

 

Now, finally our page is ready displaying the open cases count. We just need to include this as a sub-tab on chatter profile page.

As I stated sub-tab app is also a collection of tabs. This supports both VF and web tabs not the custom tabs. Create a VF tab for the page which we just created (Setup -> Create -> Tabs):

Image 8

Managing Sub-Tab Apps:

Setup -> Create -> Apps:

Image 9

No need to explain what each sub-tab apps does, the description is itself self-explanatory 🙂

Edit the respective apps as required and include the VF tab in it, in this case am showing you for “profile (self)” – do this for “Profile (others)”:

Image 10

Once the tab accessibility is given to both “self” and “other” profile apps. Visit any User Profile page as below and you can see an extra sub-tab for “Open Cases”:

Image 11

Here is the end of my first blog, do comment your thoughts on this.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s