Is it possible to add skuid actions to a JS snippet?

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Hi,

I'm wondering if Is it possible to add skuid actions to a JS snippet?

At the end of my snippet, I have it re-querying 34 different models, and as expected it's a bit slow.

The problem is that , my users are used everywhere for me to block UI until all models are finished re-querying.

Can I add those 2 actions in between my requerying line on snippet itself?

Example:

1) Block UI command

2)// query models with conditions setskuid.model.updateData([myModel1,myModel2,myModel3,myModel4,myModel5,myModel6,myModel7,myModel8,myModel9,myModel10,myModel11,myModel12,myModel13,myModel14,myModel15,myModel16,myModel17,myModel18,myModel19,myModel20,myModel21,myModel22,myModel23,myModel24,myModel25,myModel26,myModel27,myModel28,myModel29,myModel30,myModel31,myModel32,myModel33,myModel34],function(){
    console.log('update data complete!');

3)Unblock UI command


Hope it's clear

Thank you
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb

Posted 2 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Well, dunno if you actually need actions when you can use jquery blockUI. Does the same Block and Unblock from Action Framework.
http://malsup.com/jquery/block/

So before skuid.model.updateData use jquery blockUI and instead of console.log, use the unblockUI.

As an example snippet:

var params = arguments[0],
	ActiveMSAs = skuid.$M('ActiveMSAs'),
	MSAServiceOrders = skuid.$M('MSAServiceOrders'),
	SOLineItems = skuid.$M('SOLineItems'),
	models = [SOLineItems,MSAServiceOrders,SOLineItems],
	$ = skuid.$;

var dfd = $.Deferred();

$.blockUI({ message: 'Updating ...' });

$.when(skuid.model.updateData(models))
    .done(function(){
        $.unblockUI();
        dfd.resolve();
    })
    .fail(function(){
	$.blockUI({
               message: 'Waiting...',
               timeout: 5000
            });
        dfd.reject();
    });

return dfd.promise();
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Why do you add additional wait time on the failure? Why not just unblockUI and reject the promise?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
No reason really. Don't know where I copied this from.
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Thanks. Was wondering because I've had some issues getting BlockUI to interact nicely between snippets and the action framework.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I haven't had any issues. Have you been using $.Deferred()?
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Yes, it was a while back actually. It might have been solved, I can't remember. I'll hit this thread again if I see the issue outright.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you for that info Pat :)

Seems to work but for some reason it's not unblocking when Models Querying is finished

Probably has to do with me not adapting your code to my scenario properly... 

As it's over 550 lines, here's just the end part, which contains the querying and your code, hopefully someone can spot my problem

var dfd = $.Deferred();

$.blockUI({ message: 'Updating ...' });

// query models with conditions set
skuid.model.updateData([myModel1,myModel2,myModel3,myModel5,myModel6,myModel7,myModel8,myModel9,myModel10,myModel12,myModel13,myModel14,myModel5,myModel6,myModel17,myModel18,myModel7,myModel19,myModel20,myModel21,myModel22,myModel23,myModel24,myModel25,myModel28,myModel29,myModel30,myModel31,myModel32,myModel33,myModel34,myModel35],function(){
    console.log('update data complete!');
    


$.when(skuid.model.updateData(models))
    .done(function(){
        $.unblockUI();
        dfd.resolve();
    })
    .fail(function(){
	$.blockUI({
               message: 'Waiting...',
               timeout: 5000
            });
        dfd.reject();
    });

return dfd.promise();
});
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Just a quick reading ... looks like you don't unblock the UI when the function fails. You actually block the UI again.

 Also, I'm not sure if models1-35 is the same as the variable models, but if it is, then each time you update those models, it will run an update against the models again when the line
$.when(skuid.model.updateData(models))... 
executes which may be overkill depending on your situation.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
You had it exactly Right, I did not realize it was duplicating the updatemodels.

I removed my line which was extra, and entered the proper models in pat's line.

In case someone needs it here it is:

var dfd = $.Deferred();

$.blockUI({ message: 'Updating ...' });

    


$.when(skuid.model.updateData([myModel1,myModel2,myModel3,myModel5,myModel6,myModel7,myModel8,myModel9,myModel10,myModel12,myModel13,myModel14,myModel5,myModel6,myModel17,myModel18,myModel7,myModel19,myModel20,myModel21,myModel22,myModel23,myModel24,myModel25,myModel28,myModel29,myModel30,myModel31,myModel32,myModel33,myModel34,myModel35]))
    .done(function(){
        $.unblockUI();
        dfd.resolve();
    })
    .fail(function(){
	$.blockUI({
               message: 'Waiting...',
               timeout: 5000
            });
        dfd.reject();
    });

return dfd.promise();

Thx!
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
You may also want to change the message in the fail function because right now if the updates fail the ui will be blocked again and will say 'Waiting...'