What's the difference between the Javascript resource type "Inline", "Inline (Snippet)" and "Inline (Component)?

  • 5
  • Question
  • Updated 5 years ago
  • Answered
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb

Posted 6 years ago

  • 5
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Official Response
I'm glad you asked, Ben. All of the "Inline" Resource types essentially do the same thing --- they add lines of JavaScript code directly into your Skuid page. The plain-old "Inline" Resource type does just this --- it adds whatever JavaScript code you enter directly into the page.

For instance, if you wanted to register a Skuid Snippet, for instance to use as a custom Field Renderer, Row Action, Page Title action, Wizard Step Action, etc., you could add the following as a JavaScript resource of type Inline:



skuid.snippet.registerSnippet( "sayHelloToSelectedRows", function() {
//
// Snippet code goes here
//
// If you want to check out the arguments passed in,
// do a console log on the arguments.
// Snippets are usually handed helpful arguments
// depending on the Snippet context

console.log(arguments);

// We will use this Snippet as a Mass Action
// on a table of Contacts.
// The snippet will display an alert
// with the names of the selected Contacts

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

var names = '';

$.each(list.getSelectedItems(),function(i,item){
var name = item.row.FirstName + ' ' + item.row.LastName;
if (email) names += email + '\n';
});

alert('Selected People:\n\n' + names);

});


However, to save you time when adding commonly-needed Skuid JavaScript code to your pages, we've added a couple "shortcut" types: Inline (Snippet) and Inline (Component). All that these shortcut types do is to wrap/surround the JavaScript code you enter in some common Skuid JavaScript API function calls. For instance, the Inline (Snippet) type takes your code and inserts it within the following wrapper:



skuid.snippet.registerSnippet(/* SNIPPET NAME INSERTED BY SKUID */,function(){
/* SKUID ADDS YOUR CODE HERE */
});


Likewise to register a custom component (which you can add anywhere in your Skuid Page by dragging an instance of the "Custom" Component from the Components library), you would ordinarily you run the following code:



skuid.componentType.register( componentTypeName, function() {
// Component code goes here
// "elem" is a reference to the DOM element
// created by this component
var elem = arguments[0];
console.log(elem);

elem.html('<b>Hello World!</b>');

});


The Inline (Component) shortcut type just adds the boilerplate first and last lines of this code to your page, and dynamically inserts the componentTypeName and function body based on "Component Name" and "Component Body".

The "shortcut" types are not the solution for every scenario. For instance, if you just want to execute some JavaScript code when the page loads, then you should put this either in a regular Inline resource, or place it in a StaticResource, and load this in using a Static Resource JavaScript resource. This is also the best approach if you want to write a bunch of snippets or other custom code and combine them all into one file.

But, if you just want to write a quick Snippet or Component, the shortcuts are nice.