Event delegates not attached to Field Editor

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
Using the guidance at https://community.skuidify.com/skuid/topics/_edit_mode_button?topic-reply-list%5Bsettings%5D%5Bfilte..., if a Field Editor starts in "Edit" mode, when changing to "Read" mode, the event delegates for the fields (hover, dblclick, etc.) are not attached.

This appears to be due to the way the editor itself is initially created as the delegates are only established if the editor is in "read" mode initially.  Additionally, there doesn't appear to be a way to force the delegates to attach.

This becomes an issue for pages that start in "edit" mode (e.g. New, Edit, etc.) but allow toggling to "read" mode.

Is there a way to force the delegates to attach that I might be overlooking or any thoughts on how to trigger the desired behavior?

Steps to reproduce:
1) Create page using XML below
2) Open page picking any Account
3) On initial display, the top Field Editor starts in "Edit" mode, the bottom one in "read" mode.  The "hover", "dblclick", etc. work on the bottom editor.
4) Click the "Flip to Edit" mode button - both editors go to "Edit" mode
5) Click the "Flip to Read" mode button - both editors go to "Read" mode

Actual Result
Top editor hover, dblclick, etc. do not work while bottom editor does

Expected Result
Top editor has event delegates hooked after toggling to read mode

Sample Page XML
<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
         </fields>
         <conditions>
            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Account">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="custom" label="Flip to Edit" snippet="flipToEdit"/>
            <action type="custom" label="Flip to Read" snippet="flipToRead"/>
            <action type="savecancel" window="self"/>
         </actions>
      </pagetitle>
      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="edit" buttonposition="" layout="">
         <columns>
            <column width="100%">
               <sections>
                  <section title="Edit Mode to Start" collapsible="no">
                     <fields>
                        <field id="Name"/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
      <basicfieldeditor showheader="true" showsavecancel="false" model="Account" buttonposition="" mode="read" layout="">
         <columns>
            <column width="100%">
               <sections>
                  <section title="Read With In-line Edit to Start" collapsible="no">
                     <fields>
                        <field id="Name"/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript>
         <jsitem location="inline" name="modeFlipper" cachelocation="false" url="">(function(skuid){
    var $ = skuid.$;
    
    var flipMode = function(mode) {
        $('.nx-basicfieldeditor:visible').each(function() {
        var componentElem = this
        , component = $( componentElem ).data( 'component' )
        , componentType = component.getType();
        
        // Currently, this snippet only supports toggling tables and field editors
        // However, it would be relatively easy to add other types of components
        // as appropriate by adding a "case" statement below:
        switch ( componentType ){
        case 'skootable':
        case 'basicfieldeditor':
        var componentObject = $( componentElem ).data( 'object' );
        if (!componentObject || !componentObject.list || !componentObject.list.mode) {
        console.log('component [' + componentElem.id + '] does not contain skuid object.  Possibly conditionally rendered out of page.');
        } else if ((componentObject.mode !== mode) || (componentObject.list.mode !== mode)) {
        componentObject.mode = componentObject.list.mode = mode;
        componentObject.list.render({doNotCache:true});
        } else {
        console.log('jfco__updateComponentMode - Component already in target mode, no need to change');
        }
        break;
       
        // case 'othertype':
        //    ...
        //    break;
        }
        });
    };
    
    skuid.snippet.registerSnippet('flipToEdit', function() {
    flipMode('edit');
    });
    
    skuid.snippet.registerSnippet('flipToRead', function() {
    flipMode('read');
    });
})(skuid);</jsitem>
      </javascript>
   </resources>
</skuidpage>
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
This has been fixed in dev and should make it into our next patch release.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
You're on a roll, thanks Ben!
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
The fix for this is now available in patch 6.8.7, available from www.skuidify.com/skuidreleases
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Tested and confirmed, thank you!