Solution for field editor edit mode button

  • 5
  • Idea
  • Updated 2 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

  • 3,350 Points 3k badge 2x thumb

Posted 1 year ago

  • 5
Photo of Mike Dwyer

Mike Dwyer, Champion

  • 4,236 Points 4k badge 2x thumb
Sweet!
Photo of Matt Sones

Matt Sones, Champion

  • 31,934 Points 20k badge 2x thumb
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});
}
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,934 Points 20k badge 2x thumb
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});
		}
	}
});
(Edited)
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,620 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! 
Photo of Owen Smith

Owen Smith

  • 206 Points 100 badge 2x thumb
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
(Edited)
Photo of Mike Dwyer

Mike Dwyer, Champion

  • 4,236 Points 4k badge 2x thumb
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?

Photo of Conlan O'Rourke

Conlan O'Rourke

  • 4,076 Points 4k badge 2x thumb
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.