Solution for field editor edit mode button

  • 5
  • Idea
  • Updated 3 months ago
  • Implemented
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});
}
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb

Posted 12 months ago

  • 5
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,220 Points 5k badge 2x thumb
Official Response
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!