Conditional rendering on field editor with column set not working.

  • 1
  • Problem
  • Updated 2 years ago
If field editor has sections with column sets and conditional rendering on section based on picklist value of row, rendering works for first time but doesn't work after on.



xml of sample page.


*****************************************************************************

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">    <models>
        <model id="Task" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Task">
            <fields>
                <field id="Subject"/>
                <field id="Priority"/>
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="CreatedDate"/>
                <field id="Description"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="false" model="Task" buttonposition="" mode="read" allowcolumnreordering="true" uniqueid="sk-7IOK-85">
            <fields>
                <field id="Priority" hideable="true" uniqueid="sk-7PJQ-99"/>
                <field id="Subject" hideable="true" uniqueid="sk-7PJR-100"/>
            </fields>
            <rowactions>
                <action type="popup" icon="fa-pencil" label="Edit">
                    <popup width="80%" title="Viewing {{Model.label}}: {{Subject}}">
                        <components>
                            <basicfieldeditor showheader="true" showsavecancel="true" mode="edit" model="Task" buttonposition="" layout="" uniqueid="sk-83wr-226">
                                <conditions>
                                    <condition type="contextrow" field="Id" mergefield="Id" autocreated="true"/>
                                </conditions>
                                <columns layoutmode="responsive" columngutter="4px" rowgutter="4px">
                                    <column ratio="1" minwidth="300px" behavior="flex">
                                        <sections>
                                            <section title="Section A">
                                                <fields>
                                                    <field id="Subject" valuehalign="" type="" uniqueid="fi-7pWb-195"/>
                                                    <field id="Priority" valuehalign="" type="" uniqueid="fi-7pWb-196"/>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                    <column ratio="1" minwidth="300px" behavior="flex" verticalalign="top">
                                        <sections>
                                            <section title="Section B" collapsible="no">
                                                <fields>
                                                    <columns layoutmode="fixed">
                                                        <column width="50%">
                                                            <sections>
                                                                <section title="New Section" collapsible="no" showheader="false">
                                                                    <fields>
                                                                        <field id="AccountId"/>
                                                                        <field id="CreatedDate"/>
                                                                        <field id="Description"/>
                                                                    </fields>
                                                                </section>
                                                            </sections>
                                                        </column>
                                                        <column width="50%">
                                                            <sections>
                                                                <section title="New Section" collapsible="no" showheader="false">
                                                                    <fields/>
                                                                </section>
                                                            </sections>
                                                        </column>
                                                    </columns>
                                                </fields>
                                                <renderconditions logictype="and">
                                                    <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Task" sourcetype="fieldvalue" field="Priority" value="High"/>
                                                </renderconditions>
                                            </section>
                                            <section title="New Section" collapsible="no">
                                                <fields>
                                                    <columns layoutmode="fixed">
                                                        <column width="50%">
                                                            <sections>
                                                                <section title="New Section" collapsible="no" showheader="false">
                                                                    <fields/>
                                                                </section>
                                                            </sections>
                                                        </column>
                                                        <column width="50%">
                                                            <sections>
                                                                <section title="New Section" collapsible="no" showheader="false">
                                                                    <fields>
                                                                        <field id="Subject"/>
                                                                        <field id="Description"/>
                                                                        <field id="CreatedDate"/>
                                                                    </fields>
                                                                </section>
                                                            </sections>
                                                        </column>
                                                    </columns>
                                                </fields>
                                                <renderconditions logictype="and">
                                                    <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Task" sourcetype="fieldvalue" field="Priority" value="Low"/>
                                                </renderconditions>
                                            </section>
                                        </sections>
                                    </column>
                                </columns>
                            </basicfieldeditor>
                        </components>
                    </popup>
                </action>
            </rowactions>
            <massactions usefirstitemasdefault="true"/>
            <views>
                <view type="standard"/>
            </views>
            <actions defaultlabel="Global Actions" defaulticon="sk-icon-magic" usefirstitemasdefault="true">
                <action type="multi" label="Add" icon="fa-plus">
                    <hotkeys/>
                    <actions>
                        <action type="createRow" model="Task" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context"/>
                        <action type="showPopup">
                            <popup width="80%" title="Viewing {{Model.label}}: {{Subject}}">
                                <components>
                                    <basicfieldeditor showheader="true" showsavecancel="true" mode="edit" model="Task" buttonposition="" layout="" uniqueid="sk-83wr-226">
                                        <conditions>
                                            <condition type="contextrow" field="Id" mergefield="Id" autocreated="true"/>
                                        </conditions>
                                        <columns layoutmode="responsive" columngutter="4px" rowgutter="4px">
                                            <column ratio="1" minwidth="300px" behavior="flex">
                                                <sections>
                                                    <section title="Section A">
                                                        <fields>
                                                            <field id="Subject" valuehalign="" type="" uniqueid="fi-7pWb-195"/>
                                                            <field id="Priority" valuehalign="" type="" uniqueid="fi-7pWb-196"/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                            <column ratio="1" minwidth="300px" behavior="flex" verticalalign="top">
                                                <sections>
                                                    <section title="Section B" collapsible="no">
                                                        <fields>
                                                            <columns layoutmode="fixed">
                                                                <column width="50%">
                                                                    <sections>
                                                                        <section title="New Section" collapsible="no" showheader="false">
                                                                            <fields>
                                                                                <field id="AccountId"/>
                                                                                <field id="CreatedDate"/>
                                                                                <field id="Description"/>
                                                                            </fields>
                                                                        </section>
                                                                    </sections>
                                                                </column>
                                                                <column width="50%">
                                                                    <sections>
                                                                        <section title="New Section" collapsible="no" showheader="false">
                                                                            <fields/>
                                                                        </section>
                                                                    </sections>
                                                                </column>
                                                            </columns>
                                                        </fields>
                                                        <renderconditions logictype="and">
                                                            <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Task" sourcetype="fieldvalue" field="Priority" value="High"/>
                                                        </renderconditions>
                                                    </section>
                                                    <section title="New Section" collapsible="no">
                                                        <fields>
                                                            <columns layoutmode="fixed">
                                                                <column width="50%">
                                                                    <sections>
                                                                        <section title="New Section" collapsible="no" showheader="false">
                                                                            <fields/>
                                                                        </section>
                                                                    </sections>
                                                                </column>
                                                                <column width="50%">
                                                                    <sections>
                                                                        <section title="New Section" collapsible="no" showheader="false">
                                                                            <fields>
                                                                                <field id="Subject"/>
                                                                                <field id="Description"/>
                                                                                <field id="CreatedDate"/>
                                                                            </fields>
                                                                        </section>
                                                                    </sections>
                                                                </column>
                                                            </columns>
                                                        </fields>
                                                        <renderconditions logictype="and">
                                                            <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Task" sourcetype="fieldvalue" field="Priority" value="Low"/>
                                                        </renderconditions>
                                                    </section>
                                                </sections>
                                            </column>
                                        </columns>
                                    </basicfieldeditor>
                                </components>
                            </popup>
                        </action>
                    </actions>
                </action>
            </actions>
        </skootable>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>



************************************************************
Photo of Pawan Lohani

Pawan Lohani

  • 284 Points 250 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hello Pawan,

Thank you for providing this example as a starting point. Which version of Skuid are you working with? I was not able to reproduce any rendering issues with your example XML either in Brooklyn (Iteration 1.1) or Rockaway (Iteration 10). What I saw was that the two sections that are conditionally rendered based on the priority being high or low would show and hide each time I changed the priority. They also were rendered correctly when I would reload the page. 

Mark
Photo of Pawan Lohani

Pawan Lohani

  • 284 Points 250 badge 2x thumb
Hi Mark,


Thank you for quick reply. I am with skuid version 9.3 in one org and version 8.15.15 in other org.
The issue is in both place.

Steps to reproduce:
  1. Add or edit from table action
  2. Change priority to low or high, rendering works for first choice of each
  3. Again change priority low to high or high to low
  4. Again change priority low to high or high to low
  5. Again change priority low to high or high to low

Here, browser console gives error as in attached with my question and it doesn't  render field editor sections as expected.