Mustache triple braces results in components not updating when data changes

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>

Can someone from the Skuid team please acknowledge/confirm/reject/comment on this?

Skuid Team - Any insight on this?

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.

Hi Stephen -

Thanks for getting back to me on this.

I agree that seeing “text” when using triple braces and a field when using double braces is expected.

What I was indicating was unexpected was that when using triple braces, the “text” is not updated as data in the model changes.  Regardless of whether double or triple braces are used, as the data in the model changes, the “text” (triple) or “field” (double) that is emitted should be updated to reflect the change in data.

This is demonstrated with a simple template component.  If you use triple braces in a template component, as data in the model changes, the text emitted via the template changes.

Regardless of double/triple braces, the rendering process occurs.  What’s missing that is leading to the unexpected behavior is that the events are not being subscribed to handle changes to the data when triple braces are used.

Does that clarify what I’m targeting here?

Yes it does. Let me ask around and see what our design team is expecting to happen. I’ll try and get back to you on it by the end of the day.

When you use triple brackets, there is nothing more passed through than basic text. There are no hooks, rendering, etc. passed through. The triple brackets don’t update in real time because they are not designed to be. They aren’t “listening” for anything.

In order to have a triple bracket be updated, you’d need to Query the model again (see the XML below for clarification).

This is by design. If you want it updated, it would need to be double brackets. If you did not want it updated, it would need to be triple brackets.

However, we are flexible here at Skuid. We aim to make you happy. If you have a use case for this, we’d be more than willing to put in an enhancement request for you. 














{{Model.labelPlural}}


Home



















{{{Name}}}

























{{{Name}}} - Field Label


Triple Brace Template Field
{{{Name}}}










{{Name}} - Field Label


Double Brace Template Field
{{Name}}





























{{Name}}




















Hi Stephan -

Thanks for looking in to this.

The number of braces, triple or double, should control “what” is output, not “when” it is output. There are numerous instances where the data updates as it changes even when triple braces are used (e.g. Page Title, Template control, etc.).

The design of Skuid is to make it very simple to display data. Tell Skuid what you want displayed and how you want it displayed and it will display it and keep it in sync with the backing model as that backing model changes. Very similar to Angular and other frameworks out there. It’s one of the reasons it makes it so awesome and easy to use.

Merge syntax is specific to formatting what is output not when - Use double and you get a field, use triple and you just get text.

In the sample below, you’ll see several instances of applying double and triple merge syntax. In 4 of the 6 examples, even when triple braces are used, the display of the data is updated as the model data changes. In two of the examples, it is not.

This is a bug and not by design, at the very least because it’s inconsistent behavior. Based on the general design of Skuid, the data should be updated regardless of double or triple braces.

In the output below (see farther down for repro steps and sample page), green checkmarks indicate triple brace syntax that was updated after it changes, red X indicates triple brace syntax that was not.

Look forward to your thoughts. Thank you!

Output Summary

Steps to Reproduce:

  1. Create page using XML below
  2. Preview page
  3. Click “Change Account Name Button”

Sample Page

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">    <models>
    <model id="Account" limit="100" query="true" createrowifnonefound="false" sobject="Account" datasource="salesforce" type="">
        <fields>
            <field id="Name"></field>
            <field id="CreatedDate"></field>
            <field id="NewName" uionly="true" displaytype="FORMULA" label="NewName" ogdisplaytype="TEXT" readonly returntype="TEXT">
                <formula>{{Name}}+"HasChanged"</formula>
            </field>
        </fields>
        <conditions>
            <condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior=""></condition>
        </conditions>
        <actions></actions>
    </model>
</models>
<components>
    <buttonset uniqueid="sk-2qEmel-176" model="Account" position="left">
        <buttons>
            <button type="multi" label="Change Account Name">
                <actions>
                    <action type="updateRow" fieldmodel="Account" affectedrows="context" field="Name" enclosevalueinquotes="true" value="{{NewName}}"></action>
                </actions>
            </button>
        </buttons>
    </buttonset>
    <wrapper uniqueid="sk-2qAmc9-823" cssclass="example">
        <components>
            <template multiple uniqueid="sk-2q8W1Y-386" cssclass="header">
                <contents>Page Title Example</contents>
            </template>
            <grid uniqueid="sk-2q8bdU-397">
                <divisions>
                    <division behavior="specified" verticalalign="top" cssclass="leftside" width="600px">
                        <components>
                            <pagetitle model="Account" uniqueid="sk-1_HBaC-68">
                                <maintitle>Triple Braces - {{{Name}}}</maintitle>
                                <subtitle>Account Name</subtitle>
                                <actions></actions>
                            </pagetitle>
                        </components>
                    </division>
                    <division behavior="specified" verticalalign="top" cssclass="rightside" width="600px">
                        <components>
                            <pagetitle model="Account" uniqueid="sk-2qBWXg-1080">
                                <maintitle>Double Braces - {{{Name}}}</maintitle>
                                <subtitle>Account Name</subtitle>
                                <actions></actions>
                            </pagetitle>
                        </components>
                    </division>
                </divisions>
                <styles>
                    <styleitem type="background" bgtype="none"></styleitem>
                </styles>
            </grid>
        </components>
        <styles>
            <styleitem type="background"></styleitem>
            <styleitem type="border"></styleitem>
            <styleitem type="size"></styleitem>
        </styles>
    </wrapper>
    <wrapper uniqueid="sk-2qAmc9-823" cssclass="example">
        <components>
            <template multiple uniqueid="sk-2q8W1Y-386" cssclass="header">
                <contents>Field Editor Example</contents>
            </template>
            <grid uniqueid="sk-2q8bdU-397">
                <divisions>
                    <division behavior="specified" verticalalign="top" cssclass="leftside" width="600px">
                        <components>
                            <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-2q6PLd-232" mode="read" layout="above">
                                <columns>
                                    <column width="100%">
                                        <sections>
                                            <section title="{{{Name}}}" collapsible="no">
                                                <fields>
                                                    <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                        <label>Template Field Triple</label>
                                                        <template>{{{Name}}}</template>
                                                    </field>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                </columns>
                            </basicfieldeditor>
                        </components>
                    </division>
                    <division behavior="specified" verticalalign="top" cssclass="rightside" width="600px">
                        <components>
                            <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-2q6PLd-232" mode="read" layout="above">
                                <columns>
                                    <column width="100%">
                                        <sections>
                                            <section title="{{Name}}" collapsible="no">
                                                <fields>
                                                    <field type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                                        <label>Template Field Double</label>
                                                        <template>{{Name}}</template>
                                                    </field>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                </columns>
                            </basicfieldeditor>
                        </components>
                    </division>
                </divisions>
                <styles>
                    <styleitem type="background" bgtype="none"></styleitem>
                </styles>
            </grid>
        </components>
        <styles>
            <styleitem type="background"></styleitem>
            <styleitem type="border"></styleitem>
            <styleitem type="size"></styleitem>
        </styles>
    </wrapper>
    <wrapper uniqueid="sk-2qAmc9-823" cssclass="example">
        <components>
            <template multiple uniqueid="sk-2q8W1Y-386" cssclass="header">
                <contents>Template Example</contents>
            </template>
            <grid uniqueid="sk-2q8bdU-397">
                <divisions>
                    <division behavior="specified" verticalalign="top" cssclass="leftside" width="600px">
                        <components>
                            <template multiple uniqueid="sk-2q60Im-181" model="Account">
                                <contents>Triple Braces - {{{Name}}}</contents>
                            </template>
                        </components>
                    </division>
                    <division behavior="specified" verticalalign="top" cssclass="rightside" width="600px">
                        <components>
                            <template multiple uniqueid="sk-2q9JNP-503" model="Account">
                                <contents>Double Braces - {{Name}}</contents>
                            </template>
                        </components>
                    </division>
                </divisions>
                <styles>
                    <styleitem type="background" bgtype="none"></styleitem>
                </styles>
            </grid>
        </components>
        <styles>
            <styleitem type="background"></styleitem>
            <styleitem type="border"></styleitem>
            <styleitem type="size"></styleitem>
        </styles>
    </wrapper>
    <wrapper uniqueid="sk-2qAmc9-823" cssclass="example">
        <components>
            <template multiple uniqueid="sk-2q8W1Y-386" cssclass="header">
                <contents>Queue Example</contents>
            </template>
            <grid uniqueid="sk-2q8bdU-397">
                <divisions>
                    <division behavior="specified" verticalalign="top" cssclass="leftside" width="600px">
                        <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></searchfields>
                            </queue>
                        </components>
                    </division>
                    <division behavior="specified" verticalalign="top" cssclass="rightside" width="600px">
                        <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}}"></action>
                                    </interaction>
                                </interactions>
                                <searchfields></searchfields>
                            </queue>
                        </components>
                    </division>
                </divisions>
                <styles>
                    <styleitem type="background" bgtype="none"></styleitem>
                </styles>
            </grid>
        </components>
        <styles>
            <styleitem type="background"></styleitem>
            <styleitem type="border"></styleitem>
            <styleitem type="size"></styleitem>
        </styles>
    </wrapper>
    <wrapper uniqueid="sk-2qAmc9-823" cssclass="example">
        <components>
            <template multiple uniqueid="sk-2q8W1Y-386" cssclass="header">
                <contents>Table Example</contents>
            </template>
            <grid uniqueid="sk-2q8bdU-397">
                <divisions>
                    <division behavior="specified" verticalalign="top" cssclass="leftside" width="600px">
                        <components>
                            <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" buttonposition="" mode="edit" uniqueid="sk-13WJxL-70" emptysearchbehavior="query">
                                <fields>
                                    <field type="COMBO" hideable="true" uniqueid="fi-2q5eg7-119" valuehalign="">
                                        <label>Template Field Triple</label>
                                        <template>{{{Name}}}</template>
                                    </field>
                                </fields>
                                <rowactions></rowactions>
                                <massactions usefirstitemasdefault="true"></massactions>
                                <views>
                                    <view type="standard"></view>
                                </views>
                                <searchfields></searchfields>
                            </skootable>
                        </components>
                    </division>
                    <division behavior="specified" verticalalign="top" cssclass="rightside" width="600px">
                        <components>
                            <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" buttonposition="" mode="edit" uniqueid="sk-13WJxL-70" emptysearchbehavior="query">
                                <fields>
                                    <field type="COMBO" hideable="true" uniqueid="fi-2q5eg7-119" valuehalign="">
                                        <label>Template Field Double</label>
                                        <template>{{Name}}</template>
                                    </field>
                                </fields>
                                <rowactions></rowactions>
                                <massactions usefirstitemasdefault="true"></massactions>
                                &amp;lt</skootable></components></division></divisions></grid></components></wrapper></components></skuidpage>

Loving it, Barry!

We have a scheduled meeting with the development team to discuss the different components using triple brackets. I’ll update this post at that time when I have additional information.

Thank you Stephen!

Our team has agreed that we would like consistent behavior for our components, so we are talking to our design team to decide how to move forward from here. 

An update on a triple bracket will not trigger an event that will update certain components. A queue does not intrinsically know that anything needs to be updated with triple brackets. It doesn’t cause a requery upon updating a triple bracket. Like described earlier, when it is in the triple brackets, it is the text only that comes through. It works in certain places like a field within a table or field editor, because of the way those components work. 

Thanks for bringing this to our attention, our devs and design teams are handling it.

Hi Stephan -

Thank you for the follow-up on this, glad to hear that we all agree that regardless of how triple braces are handled, that it should be done consistently.

As I mentioned earlier, in my opinion, double or triple braces informs Skuid “what” to output, not “when” to output it.  I honestly cannot think of a scenario where a page developer would ever NOT want the data displayed to be kept in sync with the backing model.  There might be some scenarios but they would be few and far between I would think.  Using braces is a way to “data bind” the UI element to the data model.  Data binding implies that its updated as the model changes - it’s the basic nature of Skuid and all other similar UI frameworks.  

My hope is that Skuid comes to the decision that regardless of double or triple braces, the data should be kept in sync with the backing model.  At the very least, If the decision is made not to then there would be breaking changes/regressions built in to all those components that do automatically update currently.

As an aside, one challenge that Skuid has in the underlying code is that each “Component” handles the output of it’s “header” areas on its own - there is very little code re-use internally.  As  I mentioned in a previous post on this issue, the JS object “TemplateComponent” could be re-used in all of these scenarios and would provide handling for double vs. triple as well as automatic event handling to keep things updated.  Getting re-use and increasing the modularity of the code would be of significant benefit on several levels (makes unit testing easier, increases stability, etc.).  There are cases were component level customizations are needed but this can be done via inheritance rather than copy/paste code and/or implement something very similar.  Increasing the re-use of code and making the code more modular would ultimately yield a more consistent product throughout.

Please do keep us informed here on what decision Skuid makes regarding how double/tripled braces will be handled so that customers can plan accordingly.  Look forward to hearing more once those decisions are made.

Thank you!

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!

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

I updated it to “Planned” for greater visibility and importance

Thanks Stephen!

Came across another post in the community that led to posting http://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.