Solution for field editor edit mode button
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});
}
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});
}
Tagged:
5
Categories
- 7.9K Questions
- 926 Ideas
- 220 Discussion Categories
- 178 General
- 9 Community Feedback
- 3 Community Info
- 18 Knowledge Base
Comments
I'm no javascript expert, but we probably want to be explicit about defining variables within a 'var' expression, right?
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
Has there been any update?
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.