Chatter Feed Body textarea displaying tags not formatting

  • 1
  • Problem
  • Updated 1 year ago
  • Solved
  • (Edited)
Hello,

I am trying to display the body from a chatter feed in a card - this is a textarea. Whenever the user has formatted the text then I get the tags displayed not the formatted text e.g. 

" 1) Making a difference/sustainability impact: 4.1

2) Creativity and interest: 4.1

3) Commercial value: 4.4

4)Quality of client deliverables: 3.6

"

I have tried using a rich text field, a template with allow hmtl, #urldecode (this hangs the page) but no luck. 

Surely this is simple - any help very much appreciated. 

Ben.
Photo of Ben Murray

Ben Murray

  • 1,084 Points 1k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi Ben,

The tricky aspect of this is that the Chatter feed entries have html code mixed into the raw text. Since this is stored by Salesforce just as a text string, Skuid treats it as such and dutifully includes the html tags as though they're text. In short, out of the box, Skuid doesn't have a way of knowing this textarea has some special needs. 

I spent some time looking for a way to get around this, and it looks like a custom field renderer is needed on the actual Body field. Below is XML for a simple page on the Accounts object that demonstrates how this might be accomplished. 

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">
    <models>
        <model id="acc" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">
            <fields>
                <field id="Id"/>
                <field id="Name"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="Feed" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="AccountFeed">
            <fields>
                <field id="Body"/>
                <field id="CreatedDate"/>
                <field id="Title"/>
            </fields>
            <conditions>
                <condition type="modelmerge" value="" field="ParentId" fieldtargetobjects="Account" operator="=" model="acc" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <grid uniqueid="sk-dY8zf-128">
            <divisions>
                <division behavior="flex" minwidth="100px" ratio="1">
                    <components>
                        <basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="acc" buttonposition="" uniqueid="sk-dX_7I-102" mode="read">
                            <columns>
                                <column width="100%">
                                    <sections>
                                        <section title="Account Info" collapsible="no" showheader="true">
                                            <fields>
                                                <field uniqueid="sk-dY3Dv-114" id="Name"/>
                                                <field uniqueid="sk-dY3Dw-115" id="Id"/>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                            </columns>
                        </basicfieldeditor>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="Feed" buttonposition="" uniqueid="sk-dZHgP-191" mode="read" layout="above">
                            <columns>
                                <column width="50%">
                                    <sections>
                                        <section title="Chatter Feed Info" collapsible="no" showheader="true">
                                            <fields>
                                                <field uniqueid="sk-dZKmz-203" id="Title" valuehalign="" type=""/>
                                                <field uniqueid="sk-dZKm_-204" id="CreatedDate" valuehalign="" type=""/>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                                <column width="50%">
                                    <sections>
                                        <section title="Chatter Body" collapsible="no" showheader="true">
                                            <fields>
                                                <field uniqueid="sk-dZLu9-210" id="Body" valuehalign="" type="CUSTOM" snippet="ChatterBodyRenderer">
                                                    <renderconditions logictype="and" onhidedatabehavior="keep"/>
                                                    <enableconditions/>
                                                </field>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                            </columns>
                        </basicfieldeditor>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inlinesnippet" name="ChatterBodyRenderer" cachelocation="false">var field = arguments[0],
    value = arguments[1],
    $ = skuid.$;
function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}
var output = decodeHtml(value);
switch ( field.mode )
{
    case "edit":
        // For EDIT mode, use the standard String edit-mode renderer
        skuid.ui.fieldRenderers.STRING.edit( field, value );
        break;
    default:
        // For all other modes, render the decoded output
        $( '&lt;div&gt;&lt;p&gt;' + output + '&lt;/p&gt;&lt;/div&gt;' )
            .appendTo( field.element );
        break;
}</jsitem>
        </javascript>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>