how to dynamically (with javascript) add a model to a save/cancel button

  • 3
  • Question
  • Updated 3 years ago
  • Answered
I am trying to put only one save/cancel button for the entire page.
however, I have models that are dynamically created using javascript. 
in the save/cancel button that i added to the page i can only select specific pre existing models.
and i cannot manually modify the xml in the page since i dont have the exact names of the models that will be created .is there a way to bind models to the save/cancel button dynamically when these models are created ?
Photo of Kareem

Kareem

  • 124 Points 100 badge 2x thumb

Posted 3 years ago

  • 3
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
My guess would be that instead of a save cancel button you need to to a run multiple actions button and have one of your actions be to run a java script snippet that saves the models that were dynamically created.
Photo of Kareem

Kareem

  • 124 Points 100 badge 2x thumb
thanks for the suggestion, we ended up trying to do that,  and it kind of works but then we need to render the button when there is any changes on these models, not sure how to do that now. 
I was just hoping there is a possible way to subscribe models to save buttons dynamically. this way we can take advantage of the default disable/enable of these buttons when changes occur, and any standard features that these buttons have 
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
that is a sticky one. This is a long shot but you might be able to create a dummy object in Salesforce that just stores one date/time field. You could create a model in Skuid based on that object so it would be recognized by conditional rendering. You could then have your Java snippets update the date field on that dummy model with the current date/time. That would create an unsaved change in that model which could be used to trigger the conditional rendering of your multiple actions button. Or it may be a complete waste of time. A short cut might be to just add a date/time field to an existing model recognized by conditional rendering and update that with field with your Java snippets.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Raymond is on the right track here.

Unfortunately, there isn't a stock way to add models to buttons or be able to establish actions declaratively on.  But, using Raymond's thought process, you can achieve the desired result.

1) Add a new model to your page (e.g. ChangeTracker).  Base it on any existing SObject in the system.  Mark it to "not load data" and "Create new row if none."  Add a UI Only Field called "ModelsHaveChanges" as a Boolean with default value of "false"
2) Conditionally render the button in question based on Model & Field from #1 where it equals true
3) In an inline snippet, subscribe to the various model events (e.g. row.updated, row.created, models.saved, etc.).  In the snippet, check the modelId of the argument passed to compare against the models that you are "tracking" for changes.  When you get a change in one of those models, update the field on the model in #1 to "true".  Also, check for when models were saved/cancelled so you can set the value to false as appropriate.

Hope this helps!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Does this make sense to everyone, as an implementation of Barry and Raymond's ideas?

// Global Save Buttons Javascript
(function (skuid){
//////////////////////////////////////////////
//Shortcuts & Global Variables //
//////////////////////////////////////////////
var $ = skuid.$,
$e = skuid.events.subscribe,
ChangeTracker;
//////////////////////////////////////////////
//Helper Functions //
//////////////////////////////////////////////
var checkForChanges = function(){
if (ChangeTracker) {
var changes = false;
$.each(skuid.model.map(),function(){
if (this.hasChanged && this.id !== 'ChangeTracker') {
changes = true;
}
});
ChangeTracker.updateRow(ChangeTracker.getFirstRow(), {'ModelChanges': changes});
}
};
//////////////////////////////////////////////
//Subscriptions //
//////////////////////////////////////////////
$e('models.cancelled', checkForChanges);
$e('models.saved', checkForChanges);
$e('row.created', checkForChanges);
$e('row.updated', checkForChanges);
$e('row.deleted', checkForChanges);
$e('row.undeleted', checkForChanges);
//////////////////////////////////////////////
//Pageload //
//////////////////////////////////////////////
$(document.body).one('pageload',function(){
ChangeTracker = skuid.$M('ChangeTracker');
});
})(skuid);
(Edited)
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Matt -  Generally speaking, this should do just fine :)
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,240 Points 5k badge 2x thumb