Mustache triple braces results in components not updating when data changes

  • 1
  • Idea
  • Updated 2 years ago
  • Planned
Hello -

In the Brooklyn release, a number of issues were resolved related to ensuring that model data was correctly updated on components as data in the model changed.  As an example, Field Editor Section labels, Queue labels, Field editor labels, etc.

Unfortunately, when triple mustache syntax is used on those same elements, model data is not updating when it changes.  For example, if {{{Name}}} is used instead of {{Name}}, as the "Name" of an account changes, the other components that display that value do not update.  Note that if a standard template component is used, the template component updates regardless of triple or double syntax which would be the expected behavior.

The related community posts are:
  1. Queue labels do not update when model data changes
  2. Field Editor Section Title does not update when model data changes
  3. Field Editor labels built using merge syntax do not update when model changes occur
Steps to reproduce:
1) Create page using sample XML below
2) Preview page
3) Expand drawer in table for first row
4) Change account name in first row of table to something other than current value

Expected Behavior
1) Triple Brace Queue Label - Corresponding account name should change
2) Double Brace Queue Label - Corresponding account name should change
3) Triple Brace Field Editor Section Label - Corresponding account name should change
4) Double Brace Field Editor Section Label - Corresponding account name should change
5) Triple Brace Field Label - Corresponding account name should change
6) Double Brace Field Editor Section Label - Corresponding account name should change
7) Triple Brace Template Field Value - Corresponding account name should change
8) Double Trace Template Field Value - Corresponding account name should change

Actual Behavior
1) Triple Brace Queue Label - Did not change
2) Double Brace Queue Label - Changed
3) Triple Brace Field Editor Section Label - Did not change
4) Double Brace Field Editor Section Label - Changed
5) Triple Brace Field Label - Did not change
6) Double Brace Field Editor Section Label - Changed
7) Triple Brace Template Field Value - Changed
8) Double Trace Template Field Value - Changed

Screenshot


Sample Page XML
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">    <models>
        <model id="Account" limit="100" query="true" createrowifnonefound="false" sobject="Account">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Account" uniqueid="sk-1_HBaC-68">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>
                <template>Home</template>
            </subtitle>
            <actions>
                <action type="savecancel"/>
            </actions>
        </pagetitle>
        <panelset type="standard" uniqueid="sk-13duHD-200" scroll="">
            <panels>
                <panel type="left" width="225px">
                    <components/>
                </panel>
                <panel>
                    <components/>
                </panel>
            </panels>
        </panelset>
        <panelset type="standard" uniqueid="sk-13WLcq-83" scroll="">
            <panels>
                <panel type="left" width="225px">
                    <components>
                        <queue tagrendertype="template" querystring="id={{Id}}" defaultitemparameter="id" searchbox="true" tokenizesearch="true" uniqueid="sk-1_HD7X-81" model="Account" title="Triple Brace Queue">
                            <rendertemplate>{{{Name}}}</rendertemplate>
                            <searchfields/>
                        </queue>
                    </components>
                </panel>
                <panel>
                    <components>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" buttonposition="" mode="edit" uniqueid="sk-13WJxL-70">
                            <fields>
                                <field id="Name" uniqueid="fi-13WpJv-100" valuehalign="" type=""/>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                                <action type="multi" label="Open Drawer" icon="fa-arrow-down">
                                    <actions>
                                        <action type="drawer" openicon="fa-arrow-up">
                                            <drawer title="Drawer Area" width="90%" closehandle="true">
                                                <components>
                                                    <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-13ayiz-123" mode="read">
                                                        <columns>
                                                            <column width="50%">
                                                                <sections>
                                                                    <section title="{{{Name}}} - Triple Brace Field Editor Section" collapsible="no">
                                                                        <fields>
                                                                            <field id="Name" uniqueid="fi-13e72R-241" valuehalign="" type="">
                                                                                <label>{{{Name}}} - Field Label</label>
                                                                            </field>
                                                                            <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                                                <label>Triple Brace Template Field</label>
                                                                                <template>{{{Name}}}</template>
                                                                            </field>
                                                                        </fields>
                                                                    </section>
                                                                </sections>
                                                            </column>
                                                            <column width="50%">
                                                                <sections>
                                                                    <section title="{{Name}} - Double Brace Field Editor Section" collapsible="no">
                                                                        <fields>
                                                                            <field id="Name" uniqueid="fi-13e72R-242" valuehalign="" type="">
                                                                                <label>{{Name}} - Field Label</label>
                                                                            </field>
                                                                            <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                                                <label>Double Brace Template Field</label>
                                                                                <template>{{Name}}</template>
                                                                            </field>
                                                                        </fields>
                                                                    </section>
                                                                </sections>
                                                            </column>
                                                        </columns>
                                                        <conditions>
                                                            <condition type="contextrow" field="Id" mergefield="Id" operator="="/>
                                                        </conditions>
                                                    </basicfieldeditor>
                                                </components>
                                            </drawer>
                                        </action>
                                    </actions>
                                </action>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                        </skootable>
                    </components>
                </panel>
                <panel type="left" width="225px">
                    <components>
                        <queue tagrendertype="template" searchbox="true" tokenizesearch="true" showsearchbydefault="false" uniqueid="sk-13dx71-210" model="Account" title="Double Trace Queue">
                            <rendertemplate>{{Name}}</rendertemplate>
                            <interactions>
                                <interaction type="tap">
                                    <action type="updateIncludePanel" querystring="id={{Id}}"/>
                                </interaction>
                            </interactions>
                            <searchfields/>
                        </queue>
                    </components>
                </panel>
            </panels>
        </panelset>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Can someone from the Skuid team please acknowledge/confirm/reject/comment on this?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Skuid Team - Any insight on this?
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Everything that is happening here is expected behavior.

If you use triple brackets, you'll only pull the text.
If you use double brackets, you'll include the renderer, which is why you see what you do.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Stephen -

While this issue is still under investigation, can its status be changed to "InProgress" or "Acknowledged" since there are issues to resolve, just not sure how that will be done yet.  

Thank you!
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
I changed it to Idea and Under Consideration because that is the best filter for the design team to find it quickly. The devs have it in a separate format
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
I updated it to "Planned" for greater visibility and importance
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Thanks Stephen!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Came across another post in the community that led to posting https://community.skuid.com/skuid/topics/queue-search-text-containing-merge-syntax-does-not-update-a....

This is a perfect use case where using triple braces for "display" is most appropriate while still having the need (and expectation) that using triple braces should keep the data updated.

In this case, it does not make sense in a header/search text to wrap the value of the field in an "nx-field".  Instead, just the number should be displayed but continually updated.