Common Javascript Functions as Static Resource

Mark Hills

Hi
This is my first time posting a question.
I'm relatively new to Skuid, especially to snippets. I'm sure this question has been asked and answered many times, but I haven't found a definitive answer with an example. Hoping for a little clarification.
I have in-line snippets which make use of custom Javascript functions.
My first attempt at this had a function defined within the snippet itself.
The snippet would start with the usual:

var params = arguments[0], $ = skuid.$;

In the body of my snippet I'd refer to the function:

var x = myFunction(this);

then at the end of the snippet I'd define the function itself:

function myFunction(parameter1) {
//code to be executed
}

This seems to work, but it makes sense for me to centralize such functions outside of the snippet. I then moved the function into a js file which I add as a Static Salesforce Reference (named 'MyResource' for this example).
Here's where I'm a little unclear. I changed the first line of the js file to:

skuid.snippet.registerSnippet("MySnippet", function(parameter1) {
// function definition
});

Then in my skuid page I first add a Javascript resource of type Static Resource which points at this static resource. I then have my regular in-line snippet.
Within my in-line snippet I call:

var snippet= skuid.snippet.getSnippet('MySnippet');

I was able to get this to work by then calling:

var x = snippet(this);

Just want to make sure this is the recommended way to accomplish this or if there's simpler/better method?

Matt Sones

Mark,

I like to create an object to contain my snippets in a static resource, and then register them all with a quick loop. I think I picked the up from Zach at some point.

Here's the basic concept:

Your Static Resource

(function (skuid){

//////////////////////////////////////////////

// Shortcuts & Global Variables //

//////////////////////////////////////////////

var $ = skuid.$,

$t = skuid.time,

$m = skuid.model,

mm = $m.Model;

//////////////////////////////////////////////

// Snippets //

//////////////////////////////////////////////

var snippets = {

'myfirstsnippet': function (param1, param2) {

// function code

},

'mycustomfieldrenderer': function (field, value) {

    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);

}

};

//////////////////////////////////////////////

// Register Snippets //

//////////////////////////////////////////////

$.each(snippets,function(name,func){ skuid.snippet.registerSnippet(name,func); });

})(skuid);

Then in the inline snippets on your pages you could call something like this:

skuid.snippet.getSnippet('myfirstsnippet')(x,y);

Or you could simply type "mycustomfieldrenderer" into the snippet field for the custom field renderer.

Anna Wiersema

Hi Mark, it looks like you're registering your snippet correctly in your static resource and connecting to it appropriately as a Javascript resource in your Skuid page.

The docs don't have a specific example of calling a custom function stored in a static resource from an inline snippet, but I'd say keep doing what you're doing since it works. I'll check in with the internal team to see if I can get more information about best practices here.

In case you haven't seen the docs on this, you can check them out here: https://docs.skuid.com/latest/en/skuid/javascript/resource-types/#static-resource.

As a general best practice, we recommend storing most JS as a static resource since it's more efficient and improves the page's load time. From Skuid and Code:

"If you’re consistently using a piece of code—such as a JavaScript snippet—if you’re building a component pack for your custom component, or if you’re an ISV developing a managed package, you should store that code within a Salesforce static resource. Static resources are the most dependable way to use code in conjunction with Skuid, and they have a variety of advantages:

• Static resources can be cached, leading to lower page load times.
• They can be stored in a source control repository _separate_ from your Skuid pages."

Mark Hills

Hi Anna
Thanks for commenting on this one.
I would definitely appreciate any tips/examples on best practices if the internal team can provide any.

Mark Hills

Thanks Matt - that's really useful.
I assume in my page I would still need to add a Static Resource javascript item to refer to this static resource?
So then I'd have 2 javascript items: the Static Resource and my regular inline snippet?

Matt Sones

That's correct.