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 https://community.skuid.com/t/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.