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.
How Skuid Accesses Your JavaScript¶
So, how does Skuid access your JavaScript? In the same way it accesses other custom code:
- Inline 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
- Chrome’s console will sometimes select the wrong target. Make sure that you have selected the top frame.
- Chrome pre-version 53 will not be able to access the Skuid object with a Salesforce header enabled. You may choose to disable the Salesforce header or use a Canary build of Chrome.
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 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 modals), then the Action Framework will suit your purposes just fine. Skuid’s 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 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 action 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.