Collapsible wrapper condition UI_field

  • 1
  • Problem
  • Updated 2 years ago
  • Solved
I have a collapse wrapper with a field editor that is conditioned on the length of a field being 10. The field is calculated.  The UI_Field is LEN({{Temp_10_Digits__c}}).  I have tried as a text output as well as a 2 digit number.  When the wrapper is initialed opened, the condition works.  However, if I collapse the section and re-open the wrapper, the rendering fails.  I have put the length field in a template to see if it is calculated correctly and it is.  The rendering fails.
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
This may have to do with the order of operations involved. The right order of operations would be for the length to be calculated first, before the field editor's render conditions are evaluated. But perhaps when reopened, the collapsible wrapper is trying to look at the length too soon, before the length has been recalculated. Are you able to look at skuid.model.map() in your browser console with the wrapper in its 'collapsed' mode, and see what the UI-only length field's value is? 
Photo of Barry Schnell

Barry Schnell, Champion

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

The wrapper itself does not control the rendering of the components inside of it, it's simply a container for the components just like a drawer, popup, etc.

The order of operations should not matter in this case.  As the field thats involved in the UI formula field changes, the UI only field should change which, in turn, will trigger the rendering condition on the field editor regardless of CW open/close/etc.  This is all handled by the Skuid runtime, CW does not get involved nor need to.

If I were to guess, I would suspect there is something else going wrong with the page that could be abnormally terminating javascript from executing or something amiss in the page configuration.

I put together a repro without any CW and could not reproduce the issue you are experiencing.  I then added a CW and still was unable to reproduce the issue.  Possibly I'm misunderstanding it.

Bill - Can you do the following please:

1) Check the browser console for any errors after you trigger the situation to occur
2) Using the isolated repro I have below, modify it to align with your situation in order to reproduce the issue.  Please only use stock objects and stock fields (other than any UI fields you need to add).

Thanks!
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Account">    <models>
        <model id="Account" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="NameLength" uionly="true" displaytype="FORMULA" label="Name Length" ogdisplaytype="TEXT" readonly="true" returntype="DOUBLE" precision="9" scale="2">
                    <formula>LEN({{Name}})</formula>
                </field>
            </fields>
            <conditions>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Account" uniqueid="sk-25VLfo-89">
            <maintitle>
                <template>{{Name}}</template>
            </maintitle>
            <subtitle>
                <template>{{Model.label}}</template>
            </subtitle>
            <actions/>
        </pagetitle>
        <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-25VLfo-90">
            <columns>
                <column width="100%">
                    <sections>
                        <section title="Basics">
                            <fields>
                                <field id="Name"/>
                                <field id="NameLength" decimalplaces="" valuehalign="" type=""/>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
        <tfg__collapsiblewrapper title="New Wrapper" showheader="yes" collapsible="open" deferrenderingcontents="true" uniqueid="sk-25W39a-250">
            <components>
                <template multiple="false" uniqueid="sk-25XeI7-272" model="Account">
                    <contents>Length is: {{NameLength}}</contents>
                </template>
                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-25VOZo-108" mode="read">
                    <columns>
                        <column width="100%">
                            <sections>
                                <section title="Section A">
                                    <fields>
                                        <field id="Name" valuehalign="" type=""/>
                                        <field id="NameLength" decimalplaces="" valuehalign="" type=""/>
                                    </fields>
                                </section>
                            </sections>
                        </column>
                    </columns>
                    <renderconditions logictype="and">
                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="Account" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="NameLength" value="10"/>
                    </renderconditions>
                </basicfieldeditor>
            </components>
            <styles>
                <styleitem type="background"/>
                <styleitem type="border"/>
                <styleitem type="size"/>
            </styles>
        </tfg__collapsiblewrapper>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>