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"<b> <i>cssclass="ProductDetail"</i></b><i> </i>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 = argumentsm0],

$ = skuid.$;

target = params.button 0].classListn0];

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});

}