This blog is long overdue. It includes a trick that I discovered while we were developing Chatter apps that I promised to write about it, but never got to it. It falls into the category of capabilities that you want to enable in your app without writing a single line of code by utilizing the power of the platform. Quinton Wall talked about this during one of our meetups as he was very happy to learn this trick as well. I used this trick in the Meeting Tracker app in Chatter.

The Problem:

You have an app. You wrote a nice Visual Force page (or a set of them) for a specific object. However, you also Chatter enabled your object and display the feed. Now what? You would like to display the feed in your page, but you are not using the standard built in page which would automatically display the feed…How can you put these together?

The First Thought:

The first thing that comes to mind is to enhance the VF page somehow ala Chatter Bubbles, or some other look and feel to include the feed for the object in the same page. There is nothing wrong with this approach, but then you will have to deal with the display, formatting, as well as "follow button", etc. etc. It provides you a lot of leverage but all you wanted to do was to enable the page with Chatter. This approach is akin to using an IaaS, you develop everything from scratch. Yep, you have  a lof of flexibility on display, page content, look and feel, but also it is heck of a lot of programming just to replicate what the platform gives you as a built in in the first place.

A Simpler Approach:

1. Create a VF page as before. There is no difference here. However, do not start coding how to display the feed yet. That will be provided by the platform.

Chatter Enable your desired object. In our example, I will use the Meeting app as an example, and there is a Meeting custom object.

2. For the object in question, create a custom layout page. Something like this:

Picture 8

3. Now, you probably do not want the standard buttons, etc as you probably have some other means to deal with interactions in your VF page. So, just get rid of the content of the buttons by dragging them out to the palette. 

In addition, you need to set up your page to display your VF page in the layout. In the Fields section below,  use the setup icon on the top right corner and change the layout properties for the fields to be a single column as shown below. 

Picture 9

4. Now, click on VisualForce Pages on your layout palette. Drag the appropriate VF that you desire to be displayed to the layout page. The result should look something like this:

Picture 10

Note that we dragged the desired VF page within the Fields section. This results the VF page being managed by the Force.com layout, and consequently, we are inheriting what the layout manager provides for us by the platform.

This means Chatter Feed being displayed on the page automatically, thanks to Force.com platform.

5. Have a look at the resulting page now.
Picture 11

Note the standard Chatter buttons, the capability to show the Feed, etc. The Visual Force page in this case displays a bunch of custom elements just as we intended. However, we got the Chatter enablement for free as we embedded the VF page within a layout, using the layout manager. Viola, we have both Chatter and the custom VF page.

All of this, with the exception of creating the VF page, is handled without writing a single piece of code! Our page is Chatter enabled, thanks to the built in features of Force.com. Yes, it is like having the cake and eating it, too.

Enjoy.

Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.

Add to Slack Subscribe to RSS