Solution for field editor edit mode button

John Dahlberg

Thought this solution might be helpful for folks.  It builds on a few previous posts and I'll cross-link when I track them down again.  One my rules of thumb with scripting is to use parameters rather than embedding specific rules or references in code.  This example connects the Unique Id of the Field Editor and a CSS class of a button to link the two together (field editors don't have additional button options declaratively).  Mechanically, the button click passes the button component into the snippet as a parameter, the first class is extracted and then the skuid.component.getById() is used to grab the field editor based on that class on the button.  The button will toggle the Field Editor mode between edit and read.  If you combine this with some logic on save and cancel buttons in the button set, you get to a pretty nice sequence of button behaviors. 

The way to set this up is to add a Field Editor component and a Button Set to the page.   Add the unique ID from the field editor (found in "Display/Advanced') to the button class (found in "Advanced").   You can edit this value to something more memorable if you want.  Then you have the button run the snippet, which I named ToggleEdit.

Here's the XML for the Button Set:

        <buttonset uniqueid="sk-3TxiBn-131" model="Product">
            <buttons>
                <button type="multi" label="Edit" uniqueid="sk-2wu9uS-167" cssclass="ProductDetail" icon="sk-icon-edit">
                    <actions>
                        <action type="custom" snippet="ToggleEdit"/>
                    </actions>
                    <renderconditions logictype="and"/>
                    <enableconditions logictype="and">
                        <condition type="fieldvalue" enclosevalueinquotes="false" fieldmodel="Product" sourcetype="modelproperty" sourceproperty="hasChanged" value="false" operator="="/>
                    </enableconditions>
                </button>
                <button type="multi" label="Save" uniqueid="sk-3Txiev-135" icon="sk-icon-save">
                    <actions>
                        <action type="save">
                            <models>
                                <model>Product</model>
                            </models>
                        </action>
                    </actions>
                    <renderconditions logictype="and"/>
                    <enableconditions logictype="and">
                        <condition type="fieldvalue" enclosevalueinquotes="false" fieldmodel="Product" sourcetype="modelproperty" sourceproperty="hasChanged" value="true" operator="="/>
                    </enableconditions>
                </button>
                <button type="multi" label="Cancel" uniqueid="sk-3Txih6-138" icon="sk-icon-close" secondary="true">
                    <actions>
                        <action type="cancel">
                            <models>
                                <model>Product</model>
                            </models>
                        </action>
                    </actions>
                    <renderconditions logictype="and"/>
                    <enableconditions logictype="and">
                        <condition type="fieldvalue" enclosevalueinquotes="false" fieldmodel="Product" sourcetype="modelproperty" sourceproperty="hasChanged" value="true" operator="="/>
                    </enableconditions>
                </button>
            </buttons>
        </buttonset>



Here's the code for the snippet:

var params = arguments[0],
$ = skuid.$;
target = params.button[0].classList[0];
    f = skuid.component.getById(target).element;
if(f.mode == 'read'){
    f.mode = 'edit';
    f.list.render({doNotCache:true});
}
else if(f.mode == 'edit'){
    f.mode = 'read';
    f.list.render({doNotCache:true});
}

Mike Dwyer

Sweet!

Matt Sones

Beautiful!

I'm no javascript expert, but we probably want to be explicit about defining variables within a 'var' expression, right?

var params = arguments[0],
    $ = skuid.$,
    target = params.button[0].classList[0],
    f = skuid.component.getById(target).element;
if(f.mode == 'read'){
    f.mode = 'edit';
    f.list.render({doNotCache:true});
}
else if(f.mode == 'edit'){
    f.mode = 'read';
    f.list.render({doNotCache:true});
}

Matt Sones

Also, you could use the same concept to change the mode for multiple components by including all of the component ids in the button's class list!

var params = arguments[0],     $ = skuid.$,     targetList = params.button[0].classList;  $.each(targetList,function(){  var component = skuid.$C(this),  // $C is component.getById   f = component && component.element;  if (f) {   if(f.mode == 'read'){       f.mode = 'edit';       f.list.render({doNotCache:true});   }   else if(f.mode == 'edit'){       f.mode = 'read';       f.list.render({doNotCache:true});   }  } });

Karen Waldschmitt

Good news! Check out this documentation about the Run Component Action that went live in the 11.2.0 release. One use is to change a field editor or table mode from read to edit mode via a button! 

Owen Smith

This is awesome!  Question though...

I can't seem to use the Run Component Action "Change Edit/Read Mode" to set a value of "Edit Mode" when the default mode of the field editor is "Read Only"

The action works perfectly if the default mode of a field editor is "Read with in-line edit" 

Is this action functioning as designed in regards to field editors that default to "Read Only"?

Running version 11.2.11

Mike Dwyer

Same issue as Owen Smith. Action toggles between Read and Edit -- if the default mode is Read. Also on 11.2.11.

Has there been any update?

Conlan O'Rourke

Owen / Mike, 

For what it's worth, this functionality is working just fine in Spark v2...but I know it's not an easy upgrade for pages on v1 currently.