Skuid and JavaScript

JavaScript is the key to developer greatness with Skuid. Our robust JavaScript API provides simple functions for performing client-side CRUD operations on any data object from a connected data source, as well as saving this data to your data sources’ servers. And with snippets and custom components, you can utilize JavaScript for programmatic control and extension of your Skuid implementation.

In this article, we will cover the basics of navigating and interacting with data in Skuid using JavaScript. However, the intricacies of the language are beyond the scope of this documentation. If you are JavaScript beginner, or if you just need a refresher course, please refer to your favorite JavaScript resource. MDN’s JavaScript portal is just one of many great options.

Note

Want to get a quick taste of working in JavaScript? See Using Skuid with JavaScript: A Primer

How Skuid Accesses Your JavaScript

So, how does Skuid access your JavaScript? In the same way it accesses other custom code:

  • In-line resources
  • External resources
  • Static resources

Get familiar with the console

In addition to these resource types, you can also utilize JavaScript (and Skuid’s JavaScript API) through your browser’s console. The console is an essential tool in leveraging Skuid’s JavaScript API. Make sure you are familiar with the console in your browser of choice:

Note

Pull up your browser’s console and type skuid. Now press Enter on your keyboard. You’ll see the “skuid” JavaScript object—a powerful artifact containing all of the objects and functions to make you a Skuid development superhero. Depending on your browser, you’ll also notice that you can click through to those objects and functions within it.

Guess what? You’ve just had your first experience with…

The Skuid JavaScript API

Within each Skuid page—both in the App Composer and at runtime—there is a JavaScript object called skuid which houses all of the functions, data, and objects of the page. While JavaScript can be used for a variety of purposes (such as DOM manipulation), in Skuid you’ll mostly work with Skuid’s JavaScript API reference through that skuid object.

The Skuid JavaScript API can do all of the basic, declarative actions of Skuid, including:

  • Query and update data from your data sources through models
  • Save and cancel data changes
  • Set and activate model conditions

But it’s also used to make the magic happen. Once you’ve mastered the JavaScript API, you can use it to:

  • Easily debug issues—even declarative ones—on your Skuid pages
  • Write JavaScript snippets for page-specific use cases or custom field renderers
  • Build custom components that read, display, and write data in almost any way you can imagine.

Strict Mode

Skuid enforces strict mode on its own code. Strict mode will be enforced on custom code within pages deployed through the Skuid Page Lightning component in orgs that have LockerService enabled. Because of this, any custom code used in these pages that does not follow strict mode standards will break until it is revised.

We recommend builders consistently follow strict mode standards throughout all of their custom code, regardless of deployment context.

Best Practices

Favor the Action Framework over writing JavaScript

While it may seem counter-intuitive as a developer, you should always check to see if the Action Framework can do what you need before writing any JavaScript. The Action Framework has the advantage of being written by the same people who wrote our API, and it has been tested across thousands of orgs in every possible configuration. It’s incredibly robust, and it is constantly being updated and refined to work as efficiently as possible.

If you need to run straightforward sequences of actions, such as creating records, querying and emptying models, activating conditions, or even actions that require heavy manipulation of the UI (like messages and popups), then the Action Framework will suit your purposes just fine. Skuid’s App Composer can be used to create these types of user experiences much more quickly than writing code.

In fact, as the Action Framework’s capabilities expand, it’s a best practice to revisit existing JavaScript code snippets and replace them with Action Framework actions whenever possible.

So when should I use JavaScript instead of the Action Framework?

Use JavaScript for more complex actions or conditional branching of the action script, or when you want the sequence to be triggered in a scenario or component where the Action Framework isn’t available. If you have ideas for a component that takes your user experience further, don’t hesitate to use JavaScript to create a custom component.

Use variables to access objects whenever possible

Skuid’s API will return objects and data you’ll want to work with as the result of a function. Functions can return JavaScript objects that represent models, components, rows, field data, and other modifiable data:

1
2
3
skuid.model.getModel('Opportunity') // Accessing a model //
skuid.component.getById('sk-1IioRB-76') // Accessing a component //
skuid.model.getModel('Opportunity').getFirstRow().Name // Accessing the "Name" field from the first row of the Opportunity model//

Clearly, this can get convoluted very quickly. So for both readability and convenience, use variables for Skuid functions:

1
2
3
var Opps = skuid.model.getModel('Opportunity') // Accessing a model //
Opps.getFirstRow().Name // Accessing the "Name" field from the first row of the Opportunity model, but easier!//
var bc = skuid.builder.core //For cleanliness in Skuid custom component builders

Do Not Use jQuery’s Ready Event to Determine If a Page is Loaded

The jQuery ready event may not accurately reflect when a Skuid page is loaded. While snippets may still run, they may not consistently have access to some Skuid data, such as client-side model metadata.

To reliably trigger snippets when all elements are loaded, utilize Skuid’s pageload event.

If your snippet uses either of the below:

$(document).ready(function() {

// Or the following, which is shorthand for the above:

$(function(){

Use the following instead:

$(document.body).one('pageload',function() { // Will fire after Skuid is finished fully loading the page

If your Skuid version supports it, strongly consider using event-triggered action sequences. Creating a sequence triggered by the Skuid Page: Rendered event, with the Run A Skuid Javascript Snippet action activating a snippet will accomplish the same effect in a less error-prone, more future-proof manner.

Warning

In contexts where there may be multiple Skuid pages loading simultaneously—Page Includes, Salesforce Lightning apps—the above function would trigger based on whichever page loads first, which may not be the the page containing the snippet. Strongly consider using event-triggered sequences instead.

JQuery and Skuid

Skuid includes the most up-to-date version of jQuery 3, and jQuery functions are accessible by using the skuid.$ API call. Because Skuid uses this custom namespace to avoid conflicts, you are free to load in any version of jQuery, or any other library, that you’d like to use alongside your Skuid page.

If you choose not load in any other libraries, it’s common practice to create a more standard shortcut to JQuery:

1
var $ = skuid.$;

After calling this, you have access to all jQuery functions, simply using the $. For example, you can now call $('#unique-id').hide() rather than skuid.$('#unique-id').hide()

Warning

Previous versions of Skuid included jQuery 1. If your code references jQuery 1, read the jQuery Upgrade Guide to ensure your code is properly written for jQuery 3.