I don't see sufficient documentation on this component to understand this functionality. Why does this component work differently from others? Why doesn't it refresh when its model refreshes? How do I get it to refresh declaratively on demand? Why does it fail to render properly unless a record exists when the page loads?

Peter Bender, Champion
-
6,276 Points
Posted 2 years ago
Peter Bender, Champion
-
6,276 Points
Bill McCullough, Champion
-
12,978 Points
Would a Skuid table work for your needs? You can build a model on the '__Feed' object for your custom object. Just set a condition where the ParentId of the '__Feed' object = your object Id. You can also set a condition for Type = 'TextPost' to see the comments only. Since your object is labeled 'Requirements', the 'Feed' object might be named 'Requirement__Feed'.
Thanks,
Bill
Peter Bender, Champion
-
6,276 Points
Barry Schnell, Champion
-
18,136 Points
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 :) 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><iframe frameborder="0" width="100%" height="800px" src="/apex/skuid__Social?id={{{Id}}}"/></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>
Peter Bender, Champion
-
6,276 Points
Barry Schnell, Champion
-
18,136 Points
Peter Bender, Champion
-
6,276 Points
Peter Bender, Champion
-
6,276 Points
Barry Schnell, Champion
-
18,136 Points
Skuid Team - Can you shed some light on whether or not current behavior of the Chatter component is intended or bugs?
Amy Dewaal, Official Rep
-
8,200 Points
For now, it is intended that the Chatter component doesn't refresh when the model refreshes. However, I agree that that's not really ideal, especially when compared with the functionality of our other components. I'll bring it up to the team as an enhancement and see if there's a reason why we wouldn't want to have it function that way.
Thanks!
Barry Schnell, Champion
-
18,136 Points
Amy Dewaal, Official Rep
-
8,200 Points
Barry Schnell, Champion
-
18,136 Points
Amy Dewaal, Official Rep
-
8,200 Points
Barry Schnell, Champion
-
18,136 Points
Amy Dewaal, Official Rep
-
8,200 Points
Peter Bender, Champion
-
6,276 Points
Shmuel Kamensky, Champion
-
4,482 Points
$ = skuid.$;
$("[data-value='Most Recent Activity']").click();
Related Categories
-
Chatter Component
- 25 Conversations
- 20 Followers
-
Javascript Snippets
- 59 Conversations
- 121 Followers
-
Skuid on Salesforce
- 2276 Conversations
- 181 Followers
Mark DeSimone, Official Rep
Barry Schnell, Champion
The reason it won't work out of the box is that Page Includes won't respond to model data changes (they don't have a "Model" property). Since the QueryString would need to be {{$Model.AccountDetails.data.0.Id}}, a change in the ID wouldn't be detected (compared to having a model property of "AccountDetails" and value of {{Id}}). That said, you can use javascript to force a (re)load of the page include component when the row is clicked in the table (in the existing action sequence).
As the last step of your action sequence, the javascript would be:
It would be ideal for components like Chatter, Page Includes, etc. to respond to model changes (or at least document that they won't) like most of the other components do but in the meantime, Mark's idea of a Page include should theoretically work with the javascript caveat.
Here's a sample based on the sample I provided below using the iframe. The left side of the grid is the iframe style, the right side of the grid is the page include style.
Main Page
IncludePage