Why doesn't the Chatter Feed refresh when the model reloads?

Hello Peter -

It’s been a couple of years since I used the stock Chatter component, however at the time, I ran in to the same issues you are experiencing. Unfortunately, it doesn’t appear that they have been addressed. In short, you are encountering some Skuid bugs (limitations) with respect to the chatter component which to my knowledge, are still not documented anywhere.

You can fight with the Chatter component as much as you choose to you won’t get very far. At the time, I tried everything I could think of (e.g. forcing unrender/render) but nothing worked. After inspecting the code I found the following primary issues:

  1. In order to work properly, the Chatter component MUST execute on the server and a record MUST be in the model on initial page load. The Chatter component is NOT marked to be JS Createable. This is indicated via the component property isJSCreateable (not officially documented). You can see the effect of this by trying to put a Chatter component in a Popup or Drawer - you can’t :slight_smile: Additionally, it’s marked to “onlyRenderOnce” (onlyRenderOnce component property - not officially documented) which is another indication.

  2. When the page initially loads, if a record exists in the model, skuid will output a combination of javascript & html that will “load” the chatter component. If there is no record when the page loads on the server, “chatter” itself is not even available on the page (via window.chatter).

  3. Inside of the html/javascript that is emitted is the “hook” to maintain the feed. The way this is written the feed it’s subscribed to cannot be changed.

Short of Skuid resolving these issues, the only solution that I can think of to satisfy your use case is to use a template component with an iframe instead of the Chatter component. The downside to this is that using iframes is not fun due to height/width type of issues. Hopefully it will work in your case.

Even if the iframe solution works for you, I would encourage you to continue forward with this issue with the hope that Skuid will either address these bugs/limitations and/or at least document the Chatter component indicating it’s correct use.

Here’s the template that you’ll need (make sure to mark it “Allow HTML”:

<iframe frameborder="0" width="100%" height="800px" src="/apex/skuid__Social?id={{{Id}}}"/>

Here’s a full sample page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Account">    <models>
        <model id="AccountSummary" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="AccountDetails" limit="20" query="false" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">
            <fields>
                <field id="Name"/>
                <field id="Id"/>
                <field id="Description"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Id" state="filterableoff" inactive="true" name="Id"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="AccountSummary" uniqueid="sk-1spZ2J-87">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>
                <template>Home</template>
            </subtitle>
            <actions>
                <action type="savecancel"/>
            </actions>
        </pagetitle>
        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="AccountSummary" mode="read" allowcolumnreordering="true" uniqueid="sk-1spZ2J-88">
            <fields>
                <field id="Name" hideable="true" allowordering="true" uniqueid="fi-1spX6W-401"/>
                <field id="CreatedDate" hideable="true" allowordering="true" uniqueid="fi-1spX6W-402"/>
            </fields>
            <rowactions>
                <action type="multi" label="Show Details" icon="fa-search">
                    <actions>
                        <action type="setCondition" model="AccountDetails" condition="Id" value="{{Id}}"/>
                        <action type="requeryModels" behavior="standard">
                            <models>
                                <model>AccountDetails</model>
                            </models>
                            <onerroractions>
                                <action type="blockUI" message="There was an error" timeout="3000"/>
                            </onerroractions>
                        </action>
                    </actions>
                </action>
            </rowactions>
            <massactions usefirstitemasdefault="true"/>
            <views>
                <view type="standard"/>
            </views>
            <actions defaultlabel="Global Actions" defaulticon="sk-icon-magic" usefirstitemasdefault="true"/>
        </skootable>
        <grid uniqueid="sk-1sqKp3-192">
            <divisions>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <template multiple="false" uniqueid="sk-1swAHu-404" model="AccountDetails" allowhtml="true">
                            <contents>&amp;lt;iframe frameborder="0" width="100%" height="800px" src="/apex/skuid__Social?id={{{Id}}}"/&amp;gt;</contents>
                        </template>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="AccountDetails" buttonposition="" uniqueid="sk-1sqN6r-202" mode="read">
                            <columns>
                                <column width="100%">
                                    <sections>
                                        <section title="Section A">
                                            <fields>
                                                <field id="Name" valuehalign="" type=""/>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                            </columns>
                        </basicfieldeditor>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
            <renderconditions logictype="and">
                <rendercondition type="fieldvalue" enclosevalueinquotes="true" fieldmodel="AccountDetails" sourcetype="modelproperty" nosourcerowbehavior="deactivate" sourceproperty="hasRows"/>
            </renderconditions>
        </grid>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>