Editor.handleSave()?

  • 1
  • Question
  • Updated 3 years ago
I'm trying to override the handleSave() action on a custom component with this code:

component.save = function(){            
            console.log('SAVE');
            $.when(skuid.ui.Editor.prototype.handleSave.call(component.editor,true)).then(function(){
                
                // Do some fun stuff to the ui with jQuery here.
                
                return component;
            });
        };

I'm calling the prototype because of the instructions here. But when this function runs, the model's changes aren't actually being saved.

How can I set up my custom component's editor such that the data actually saves, AND I can run some extra code?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
And yes, I'm doing this when the component is initialized:
component.editor.handleSave = component.save;
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
If you want to do something with your component after a model has been saved, you'd probably be better off using the models.saved event. You wouldn't need to mess with callbacks or promises since it's automatically called after any model has been saved. (You can check which models were saved using event parameters.)

If you really need to override the editor's handleSave function, then you need to start by creating an Editor. (Editors are not automatically created for you by Skuid)

Then, you need to override your editor's handleSave function. I don't think our components come with a save function (although you certainly have the ability to add one yourself).

So, in your component's initiation function, you'd have something like the following:

var myEditor = new skuid.ui.Editor(element);
myEditor.handleSave = function(){
    console.log('SAVE');
    skuid.ui.Editor.prototype.handleSave.call(myEditor,true);
                
    // Do some fun stuff to the ui with jQuery here.
        
    return component;
};
Note, however, that the handleSave function does NOT return a deferred. It IS called after the save has finished, however, so you don't need a deferred in this case. You don't get as much interesting information with this approach as you do with the models.saved event (such as which records were updated/inserted/deleted), so we generally recommend that approach.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Thanks, JD.

My custom comonent has an editor, and it's that editor's handleSave() that I'm tapping into. My problem is that the actual save() doesn't seem to be working. Perhaps that has nothing to do with the handleSave()? But the save was working before I tried to modify the handleSave(). Any idea why overriding .handleSave() would have caused problems with .save()?

I suppose the question is irrelevant...sounds like tapping into models.saved event is the way to go.