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?

Best Answer

  • Matt SonesMatt Sones 💎💎💎
    Accepted Answer

    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.

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:

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

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!