"Edit Mode" button

  • 7
  • Idea
  • Updated 3 months ago
  • Implemented
I'd like a button on any field editors, tables, or headers/titles that allows the user to put the section into full edit mode. I like my pages to default to read mode, but the user should be able to put the page into edit mode when they want to, similar to standard SF UI.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 5 years ago

  • 7
Photo of Chris

Chris

  • 1,632 Points 1k badge 2x thumb
Official Response
Here is another version of the snippet that we use that has an Edit button, and when you click it, it changes to a Save and a Cancel button (and back again when done).  It also does the appropriate model save/cancel and page update accordingly.  We find this model to be a bit more consistent with how other pages in Skuid operates.  It still doesn't worry about enabling / disabling Save base on if anything has actually changed (which could be added), but it's pretty close to the native Skuid UI design.

It also changes from using the "window.xxx" context for tracking state to using CSS classes on the buttons - otherwise using this in a Page Include has challenges.

To use it, place two buttons on the page - one called "Edit" (with a CSS class of btnEdit) and another called "Cancel" (with a CSS classes of btnEditCancel and btnHide).  In the resources, I have a CSS rule for  btnHide that simply does ".btnHide { display: none};" so the Cancel button remains hidden when the page loads.

EDIT: Updated to use Barry's better approach to getting the type using getType()

// Set the selector for which components to toggle. For example, to toggle// specific named components, set the selector to:
//   #ComponentUniqueID1, #AnotherComponent, #AThirdComponent
// Or, to toggle all field editors and tables, use this selector:
//   .nx-basicfieldeditor:visible, .nx-skootable
var ComponentSelector   = '.nx-basicfieldeditor:visible, .nx-skootable';
var $ = skuid.$;

// determine what mode was are moving into
var button = arguments[0].button;
var startEdit = false;
var isEditButton = false;
if (button.hasClass('btnEdit')) {
    startEdit = !button.hasClass('btnEditActive');
    isEditButton = true;
} else if (button.hasClass('btnEditCancel')) {
    startEdit = false;
} else {
    console.log('Unknown button in editModeController; missing class btnEdit or btnEditCancel');
    return;
}
// Iterate over the selected components and switch them to the new mode, then
// force a re-render.
var componentElems = $( ComponentSelector );
$.each( componentElems, function( index, componentElem ){
    console.log('Processing component');
    console.log(componentElem);
    var component = $( componentElem ).data( 'component' );
    console.log(component);
    
    // Currently, this snippet only supports toggling tables and field editors
    // However, it would be relatively easy to add other types of components
    // as appropriate by adding a "case" statement below:
    switch ( component.getType() ){
        case 'skootable':
        case 'basicfieldeditor':
            var componentObject = $( componentElem ).data( 'object' );
            console.log(componentObject);
            componentObject.mode = componentObject.list.mode = (startEdit ? 'edit' : 'readonly');
            componentObject.list.render({doNotCache:true});
            break;
    }
});
// update buttons and model based on what happened
if (startEdit) {
    // track that we have entered edit mode
    $('.btnEdit').addClass('btnEditActive');
    // unhide cancel
    $('#btnCancelEdit').removeClass('btnHide');
    // adjust edit to correct text and icon
    $('.btnEdit').find('.ui-button-text').text('Save');
    $('.btnEdit').find('.ui-icon').removeClass('sk-icon-page-edit').addClass('sk-icon-save');
}
else {
    // track that we have left edit mode
    $('.btnEdit').removeClass('btnEditActive');
    // hide cancel button
    $('#btnCancelEdit').addClass('btnHide');
    // adjust edit to correct text and icon
    $('.btnEdit').find('.ui-button-text').text('Edit');
    $('.btnEdit').find('.ui-icon').removeClass('sk-icon-save').addClass('sk-icon-page-edit');
    // note that normally you would update the model that is associated with this button, with this line:
    // var myModel = arguments[0].model;
    // however, in this case, our model is coming from a page include, so we need more
    // direct reference to the model
    var myModel = skuid.model.getModel('LeadDetails');
    if (isEditButton) {
        myModel.save({callback: function(result){
            if (result.totalsuccess) {
                myModel.updateData();
            }
        }});
    } else 
        myModel.cancel();
}
(Edited)
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!