Edit Mode" button"

Chris - We ran in to this as well with the SB release.  We took the approach of using the new “getType” method rather than coding directly to the variable _componentType.  If Skuid decides to change the variable name in the future, it’s less likely the getType method would ever change.

So, instead of:

component._componentType

we have:

component.getType()

Hi Greg -

Using the action framework with a button marked as “Run multiple actions” you can configure the button to save changes (using one or more models of your choice) and then run snippet which flips the mode back to “read” mode.  Underneath, skuid only “saves” things that have changed so if nothing has changed, nothing will be “saved.”

One thing to note if you go this route is to take advantage of the “On Error” action for the “Save” action so that the screen doesn’t flip to read-mode if the “save” fails for some reason.

Hope this helps!

Thanks Barry thats great, I’ll give it a go tonight

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

Much better!  Thanks - I’ll update my code right now.

Hello and tyvm for this code & explanations, I need to implement this in multiple Tabs

But I’m having some little issues with it

But maybe I just need some clarifications

I created both Buttons Edit & cancel and put css class names you mentioned

Now you only mentioned the resource body for “btnHide”, “.btnHide { display: none};” (IF I Leave Semi-colon at the end it throws me an error, not sure if that is normal)

But what about the resource body for “btnEdit” ?

The problem I’m having is as follow:

When i press Edit button, All the fields go in edit mode, as expected , and the Edit button, now became a save button

1)No cancel field is showing up , if make changes on any field…

Am i missing anything?

Thx

@ chris or anyone that can help,

I still have same issue and cannot figure out the css I would need

In case anyone knows, let me clarify my problem

Chris said:

"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};” "

3 different CSS class are mentioned, but the details only provided for 1 of them

 btnHide: “.btnHide { display: none};”

Would anyone know what CSS i would need for those other 2 mentioned?
btnEditCance
btnEdit

Thank you

Dave - those classes (btnEdit and btnCancel) are only needed to identify the buttons. No CSS is needed for it to function, though you are welcome to put some style CSS on them if you want to make your buttons have some style.  Only btnHide needs actual CSS (to hide them).  The code uses btnEdit/btnCancel to understand the button that was clicked, and to flip btnHide between them (so you see either Edit or Cancel, but not both). 

Hope this helps…

Ok thank you very much Chris,

But I must be doing something wrong then.

When i click the edit button, it does change all fields to edit mode(on the tab I’m on only), but the cancel button does not appear no matter what I do,

The snippet (named EditAll)is the exact copy from here so that is not the issue. the only thing possible then is my buttons. So here’s a short description of how i have them set up

1- Edit button: Action type Run Skuid Snippet named EditAll . That button has a class named: btnEdit

2- Cancel button, i tried making it run skuid snippet EditAll, I tried a cancel action, tried no action …
With classes: btnEditCancel btnHide (never used multiple classes, so separated by a space?)

button 1 works fine to edit and save

button 2 never appears


Thx in Advance

When you click Edit (and the fields change), does the Edit button disappear?  Or does it stay on the page?

In looking at the code (it’s been a while since I’ve done that!) I see the line:

$(‘#btnCancelEdit’).removeClass(‘btnHide’);

This indicates that the Cancel button must have the ID “btnCancelEdit” on it.  Can you verify that yours has that ID?  If not, that could cause this problem.  Sorry that that wasn’t in the original description - didn’t catch that one!

The cancel button would appear at all in all scenarios

But you found the issue, I did not know about adding the ID, that fixed it. Thx!



One last question if I may,

My page has multiple tabs and 4-5 different models

Let’s say on tab #1 When i click the Edit Button , the fields on that tab always go on edit mode,

then i go to other tabs they are not on edit mode.

Not sure if that is expected behavior, but if not, would there be any way to edit all the fields for all those tabs/models in the same page?

Thx a lot a again!

We have that exact same scenario for one of our pages, and back when I worked on this I wasn’t able to find a way to get it to work right.  A lot has changed in Skuid since then so it might be possible now, but I’ve not tried.  Sorry… 

Nothing to be sorry,

the code and answers provided already is a huge help.

For now I’ll simply add it on each tab, it’s under consideration by Skuid, so hopefully maybe next major release there will be a native way

Thx for responding 🙂

Dave/Chris -

The reason the tabs present a problem and don’t “change” to edit mode when clicking on them is because the components on them are not yet loaded when you clicked “Edit” button. This will occur if you are “deferring” loading the contents of the tabs. When the script looks for components to “flip mode on”, it will only find things that are in the DOM.

To solve for this, you have two options:

1) Do not defer loading of tab contents - This is less than ideal but a possible solution

2) When a tab “loads” you need to run the script against the components in that tab. You can do this by listening for the “attach” event of a custom component. Skuid fires an attach event after building the components for the tab and adding them to the tab. You need to wait for this to occur because the components that you want to flip the mode on must be in the DOM. In a recent release of Skuid they added “When Tab is First Shown” and “When Tab is Shown” events. These might be able to be used instead of using a custom component but I haven’t looked in to whether or not they fire the required “attach” event or something similar. We really need “Tab Loading Complete” and “Tab Shown Complete” events 🙂

Below is a sample page that demonstrates how to accomplish this. Couple of notes:

1) This page uses the new “UI Only Field” which avoids having to use the btnEdit/btnCancel classes. Instead of tracking which mode we are in with classes, we use a UI only field checkbox.
2) This page demonstrates how to be more “selective” about which components get their mode flipped. For example, you might have a field editor that you want to flip to “Edit” but you might have another one that you do not. If you want a component to “flip” add the class “dynamicmode” to it. When the flip occurs, it will only flip those with the class “dynamicmode”. The sample has two field editors on each tab, one that flips and one that doesn’t.

Hope this helps!

```

























{{Name}}


{{Model.label}}












Account

According to this snippet, the Cancel Page Title Button makes use of the DOM Id AND the CSS Class.

I’m guessing in order for this to work, you have to set the Cancel Button
DOM Id = btnCancelEdit and the
CSS Class = btnHide.

// track that we have left edit mode   
$(‘.btnEdit’).removeClass(‘btnEditActive’);

// hide cancel button
$(‘#btnCancelEdit’).addClass(‘btnHide’);

Hi Dave,

Maybe as a workaround, just create a cancel button? I wasn’t able to figure out the CSS either…

Thanks,
Karl

there is a class ‘btnCancelEdit’ and also ‘btnEditCancel’ used in the above code.  I think these are supposed to be the same thing. When I changed ‘btnEditCancel’ to ‘btnCancelEdit’ everything worked (except btnHide css).

how to select all field editors in the skuid page? some field editors are not being displayed because of tabs

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!

This is great. Thanks Karen.

One thing though is it doesn’t appear to allow you to change the field editor to “Read Only”

How can I make it so that I can switch a field editor to be read only dynamically and then switch it back to read with inline edit after?

Have another look, there is a Read Mode option.