Page Title Button Action: Cancel Model Changes Not Working on First Click

  • 1
  • Problem
  • Updated 3 years ago
I have a fairly complex page, but I am trying to create Page Title Buttons to cancel changes made to specific models in the page.  

I am finding that sometimes the button cancels the change, but in other instances, the first click does not seem to take, and I have to click Cancel again.  After clicking it the second time, everything looks as it should. 

What can cause this behavior? 
Photo of Jason Thurgood

Jason Thurgood

  • 654 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Mysterious behavior.  My favorite! 

Is there any further pattern you can determine?  Does it happen when you manipulate some models but not others?  

If you are using custom buttons to do your work,  do you have enable conditions set up on them?  How do these react? 
Photo of Jason Thurgood

Jason Thurgood

  • 654 Points 500 badge 2x thumb
I think I have identified a pattern.

On these pages I also have a conditionally rendered Template that if the model has unsaved changes.  It appears SKUID does not like this.  So, I moved the Templates into a Wrapper and applied the rendering logic to the Wrapper, (and removed the logic from the Template) and the problem goes away. 

I will try this on all of the pages that are having this problem and make sure it works with multiple wrappers being rendered conditionally. 
(Edited)
Photo of Jason Thurgood

Jason Thurgood

  • 654 Points 500 badge 2x thumb
Well.  That doesn't seem to be consistent either.  However, what I am noticing is that if your page has some components that render when there are unsaved changes, and some that render when there are no unsaved changes, the cancel model changes action seems to have an issue.  
Photo of Jason Thurgood

Jason Thurgood

  • 654 Points 500 badge 2x thumb
I have attached a video to illustrate what is happening.  It shows how clicking Cancel the first time, causes changes to be reverted, but it still thinks the page has unsaved changes.  Not sure where to go from here. 

http://screencast.com/t/mQ0sbmVYUL
Photo of Jason Thurgood

Jason Thurgood

  • 654 Points 500 badge 2x thumb
Just to be sure it was not the complexity of the page that was causing the issue:

Here is a simple page that clearly illustrates the issue.  To reproduce, edit any of the text fields and click Cancel Changes.   Cancel works if all you changed was adding rows to the table.  But it does not work if you change a field's value. 

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">   <models>
      <model id="Account" limit="" query="true" createrowifnonefound="false" adapter="" type="" sobject="Account">
         <fields>
            <field id="Id"/>
            <field id="Name"/>
         </fields>
         <conditions>
            <condition type="param" value="Id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior="noquery"/>
         </conditions>
         <actions/>
      </model>
      <model id="AccountContacts" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="Contact">
         <fields>
            <field id="FirstName"/>
            <field id="LastName"/>
            <field id="Email"/>
            <field id="Phone"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="AccountId" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <wrapper uniqueid="sk-13bxWR-252">
         <components>
            <pagetitle uniqueid="sk-13bubb-246" model="Account">
               <maintitle>
                  <template>{{Name}}</template>
               </maintitle>
               <actions/>
            </pagetitle>
            <grid uniqueid="sk-13azvu-73">
               <divisions>
                  <division behavior="fit" verticalalign="center">
                     <components>
                        <pagetitle model="Account" uniqueid="sk-13aira-141">
                           <actions>
                              <action type="save" label="Save Changes" icon="sk-icon-save" window="self">
                                 <actions/>
                                 <models>
                                    <model>AccountContacts</model>
                                 </models>
                              </action>
                              <action type="cancel" label="Cancel Changes" icon="sk-icon-cancel" window="self">
                                 <actions>
                                    <action type="save"/>
                                 </actions>
                                 <models>
                                    <model>AccountContacts</model>
                                 </models>
                              </action>
                           </actions>
                        </pagetitle>
                     </components>
                  </division>
                  <division behavior="fit" verticalalign="center">
                     <components>
                        <wrapper uniqueid="sk-13bM7V-125">
                           <components>
                              <template multiple="false" uniqueid="sk-13anEJ-155" allowhtml="true">
                                 <contents>&lt;font size="4"color="#c0504d"&gt;This page has unsaved changes&lt;/font&gt;&lt;br&gt;&lt;/br&gt;</contents>
                                 <renderconditions logictype="or">
                                    <rendercondition type="fieldvalue" enclosevalueinquotes="false" fieldmodel="Account" sourcetype="modelproperty" nosourcerowbehavior="deactivate" sourceproperty="hasChanged" value="true" operator="="/>
                                    <rendercondition type="fieldvalue" enclosevalueinquotes="false" fieldmodel="AccountContacts" sourcetype="modelproperty" nosourcerowbehavior="deactivate" sourceproperty="hasChanged" value="true" operator="="/>
                                 </renderconditions>
                              </template>
                           </components>
                           <styles>
                              <styleitem type="background"/>
                              <styleitem type="border" padding="left,top,">
                                 <styles>
                                    <styleitem property="padding-left" value="20px"/>
                                    <styleitem property="padding-top" value="20px"/>
                                    <styleitem property="box-sizing" value="border-box"/>
                                 </styles>
                              </styleitem>
                              <styleitem type="size"/>
                           </styles>
                        </wrapper>
                     </components>
                  </division>
                  <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                     <components/>
                  </division>
                  <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                     <components/>
                  </division>
                  <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                     <components/>
                  </division>
                  <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                     <components/>
                  </division>
               </divisions>
               <styles>
                  <styleitem type="background" bgtype="none"/>
               </styles>
            </grid>
            <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-13bQQd-141" mode="edit">
               <columns>
                  <column width="50%">
                     <sections>
                        <section title="Account Info" collapsible="no">
                           <fields>
                              <field id="Name" valuehalign="" type=""/>
                           </fields>
                        </section>
                     </sections>
                  </column>
                  <column width="50%">
                     <sections>
                        <section title="New Section" collapsible="no" showheader="false">
                           <fields/>
                        </section>
                     </sections>
                  </column>
               </columns>
            </basicfieldeditor>
            <wrapper uniqueid="sk-13c6J4-283">
               <components>
                  <pagetitle uniqueid="sk-13c35k-276" model="Account">
                     <maintitle>Related Contacts</maintitle>
                     <actions/>
                  </pagetitle>
                  <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="10" createrecords="true" model="AccountContacts" buttonposition="" mode="edit" uniqueid="sk-13bXqI-176" emptysearchbehavior="query">
                     <fields>
                        <field id="FirstName"/>
                        <field id="LastName"/>
                        <field id="Email"/>
                     </fields>
                     <rowactions/>
                     <massactions usefirstitemasdefault="true"/>
                     <views>
                        <view type="standard"/>
                     </views>
                     <searchfields/>
                  </skootable>
               </components>
               <styles>
                  <styleitem type="background"/>
                  <styleitem type="border"/>
                  <styleitem type="size"/>
               </styles>
            </wrapper>
         </components>
         <styles>
            <styleitem type="background"/>
            <styleitem type="border"/>
            <styleitem type="size"/>
         </styles>
      </wrapper>
   </components>
   <resources>
      <labels/>
      <javascript/>
      <css/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Photo of Barry Schnell

Barry Schnell, Champion

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

I wasn't able to reproduce the behavior with the sample page you provided.  I created a new page based on the XML, previewed the page, chose an existing account, modified the "Last Name" field of one of the contacts and clicked cancel changes.  The cancel button was disabled and the template went away.  Did I take the correct set of steps to reproduce the behavior you are seeing or possibly I did something different?

Based on the video you provided, it looks like you have some picklist fields, etc.  What might be occurring in your situation is that you have a picklist field set to "Allow none = false" and the existing record has "no value" for that field.  What occurs in this situation is that skuid will force a value in to that field because it's not allowed to have none.  Check out https://community.skuidify.com/skuid/topics/model-haschanges-immediately-after-cancel-changes-due-to... and see if it might apply in your situation.

Also, what version of Skuid are you running?
  
(Edited)
Photo of Jason Thurgood

Jason Thurgood

  • 654 Points 500 badge 2x thumb
Thanks Barry and Rob!  It ended up being the SKUID Version.  We were still on 7.24 ... updated to the latest patch and problem solved.  
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Great news Jason, glad to hear it!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Indeed.  Thanks for letting us know the upgrade fixed the issue.