Common Javascript Functions as Static Resource

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?

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."

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,

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.

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?

That’s correct.