Common Javascript Functions as Static Resource
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?
Best Answer
-
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.
0
Categories
- 7.9K Questions
- 926 Ideas
- 220 Discussion Categories
- 178 General
- 9 Community Feedback
- 3 Community Info
- 18 Knowledge Base
Answers
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:
Thanks for commenting on this one.
I would definitely appreciate any tips/examples on best practices if the internal team can provide any.
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.