I am trying to create a VisualForce page, with a custom controller, that displays the feed items from the chatter feed of the record provided by the user.

The goal is to have the page start with just an input field (to take a Record Id) and a button to 'Filter Feeds'. The rest of the page should not render b/c, at this point, the filtRecs variable should be == null. I would like a user to be able to input a record Id, click 'Filter Feeds', and have the outputPanel reRender, displaying the feed. The feed displays correctly when I hard-code a record Id into the controller, I am just having trouble with the passing of the value from the VisualForce inputText field to the apex controller.

Here's the code I have so far:

The VisualForce:

<apex:page controller="DemoController" id="democontroller" sidebar="true" showHeader="true" standardStylesheets="true" >
<div id="feed-filters" style="border:1px solid black;margin-bottom: 20px;">
<h4 style="padding-left:10px">Feed Filters</h4>
<apex:form style="padding:0px 0px 10px;">
    <apex:outputLabel value="Record Id:" style="padding-left: 10px;"/>
    <apex:inputText id="filtRecs" value="{!filtRecs}"/>

    <apex:commandButton reRender="feed-display-panel" value="Filter Feed" />

<apex:outputPanel id="feed-display-panel" rendered="{!filtRecs != null}" >
  <div id="feed-display-div">
    <apex:repeat value="{!newsFeedForDisplay}" var="feedItemInfo">
      <div class="row" style="margin-bottom:5px;">
         <div style="display:inline-block;vertical-align:top;">
          <apex:image style="margin:4px;" width="25" url="{!feedItemInfo.feedItem.photoUrl}"/>

       <div style="display:inline-block;vertical-align:top;width:350px;">
       <apex:outputText value="{!feedItemInfo.formattedText}" escape="false"/>

       <apex:outputPanel layout="block" rendered="{!IF(feedItemInfo.linkUrl == null, false, true)}" >              
         <b><a href="{!feedItemInfo.linkUrl}">{!feedItemInfo.linkTitle}</a></b>             

     <apex:outputPanel layout="block" rendered="{!IF(feedItemInfo.contentDownloadUrl != null && feedItemInfo.imageUrl != null && feedItemInfo.hasImagePreview, true, false)}" >          
       <apex:image style="margin:4px" width="90" url="{!feedItemInfo.imageUrl}"/>
       <a href="{!feedItemInfo.contentDownLoadUrl}">{!feedItemInfo.contentTitle }</a>                 

   <apex:outputPanel rendered="{!IF(feedItemInfo.commentCount > 0, true, false)}">
     <div style="width:85%;padding:4px;font-size:0.95em;position:relative;left:3em;" >
       <apex:repeat value="{!feedItemInfo.comments}" var="commentInfo">
         <div style="margin:4px;padding:4px;width:100%;">
           <div style="display:inline-block;vertical-align:top;">
             <apex:image style="margin:4px" width="25" url="{!commentInfo.comment.user.photo.smallPhotoUrl}"/>

           <div style="display:inline-block;vertical-align:top;width:250px">
             <apex:outputText value="{!commentInfo.formattedText}" escape="false"/>

           <apex:outputPanel rendered="{!IF(commentInfo.imageUrl == null, false, true)}" >
             <div style="display:inline-block;vertical-align:top;float:right;position:relative;right:1em" >
               <apex:image style="margin:4px" width="100" url="{!commentInfo.imageUrl}"/>

             <div style="clear: both;"/>

The Controller:

global class DemoController {
public String filtRecs {get; set;}

// get first page of news feed
global ConnectApi.FeedItemPage getNewsFeed() {
    return ConnectApi.ChatterFeeds.getFeedItemsFromFeed(null, ConnectApi.FeedType.Record, filtRecs);

// build list of wrapped feed items for display in VisualForce
global List<FeedItemInfo> getNewsFeedForDisplay() {
    ConnectApi.FeedItemPage feed = getNewsFeed();      
    List<FeedItemInfo> result = new List<FeedItemInfo>();
    for (ConnectApi.FeedItem item : feed.items) {
        result.add(new FeedItemInfo(item));

    return result;

If anyone has a different/better way to do this, while I appreciate the advice, my primary goal here is to learn the basic skills, so I would like to take this step by step. That being said, this does use helper-classes to format the feedItems, which can be found here. Thanks in advance for any help/guidance that you can offer!

  • Is the problem that the output panel doesnt rerender when you hit the button? Feb 19, 2013 at 19:27
  • Yes, that seems to be the problem now. I've added an outputText field to display {!filtRecs}, which correctly updates when the inputText field is changed AND 'Enter' is hit. I would like to not have to hit 'Enter', but even so, when I do hit 'Enter', the outputText field accurately shows the record Id that I gave to the inputText field, but clicking the 'Filter Feed' button does nothing (so to answer your question in one word: 'Yes'). Thanks! Feb 19, 2013 at 19:32

1 Answer 1

<apex:outputPanel id="feed-display-panel" rendered="{!filtRecs != null}" >

is not rendered when the page loads, because filtRecs is null

You cannot reRender something that didn't render at page load. Here's that blog post I mentioned in my previous reply, which explains this quite well.

So on button click reRender a parent container, so move the rendered to the apex:repeat and reRender the outputPanel

<apex:outputPanel id="feed-display-panel" >
  <div id="feed-display-div">
    <apex:repeat value="{!newsFeedForDisplay}" rendered="{!filtRecs != null}"  var="feedItemInfo">
  • Thanks, I've made this change, but it is still not rendering on the button-click. Any other possible explanation? Feb 19, 2013 at 19:42
  • 1
    Nevermind, one stupid error on my part, it's working now! Thanks again for the help! Feb 19, 2013 at 19:43
  • Awesome, well done :) Feb 19, 2013 at 19:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .