Debugging Skuid in the Console

Even in the most well-designed of pages, unexpected behaviors can occur. And since Skuid is a toolkit with so much flexibility, it can be a mystery as to what’s causing the issue. Data not loading, components not appearing, a totally blank page with no error—all of these issues are difficult to diagnose using only what’s on the page. In instances likes these, it’s helpful to use your browser’s console and some handy commands from Skuid’s JavaScript API, even if you’re not a developer.

Note

As you’ll be diagnosing issues for end users, follow the instructions below at runtime—while visiting a deployed Skuid page or previewing a Skuid page—instead of within the Composer.

Getting to Know Your Console

The console is a feature in your browser that reports errors in pages, inspect elements within a page, and parses JavaScript. It’s typically bundled with other developer tools in your browser of choice. To learn more about your browser’s console in particular, see the links below:

While all of those technical details can be interesting, you do not need to be a web developer to use the console.

Instead of breaking down the various features and complexity of these developer tools, let’s look at just the basics—all you’ll need to know to comfortably debug Skuid.

What to Know to Debug Skuid

While the console is a power tool that can perform a variety of tasks, you don’t need to know all of its capabilities to use with Skuid. You really only need to know the following concepts:

How to access the console

Make sure you know how to open the console first. See the appropriate link in the above section for your browser.

Note

If you are unable to access your console within a page while using Skuid SFX, try toggling off Salesforce Headers for that Skuid page in Page Properties.

How to enter commands in the console

To enter commands in the console:

  1. Click into the input field of the console.
  2. Type a command.
  3. Press enter on your keyboard.

A log of your command will be displayed, as well as its result.

Most of the commands you’ll be typing in are Skuid JavaScript APIs. While you can learn much more about these in Developer Resources, all you need to know for debugging is that APIs are a way to get Skuid to tell you what’s going on behind the scenes. As such, you may see the terms “command” and “API” used interchangeably when discussing debugging through the console.

The type of API you want to enter in the console will depend on what data you want to see. We’ll cover more of that below.

Note

Are you getting strange text or a string of random letters whenever you enter a command? Something like this?

1
ƒ I(){return cb}

Or maybe something even more complex? The API you’re entering may require a parentheses at the end to function correctly.

For example:

skuid.model.map will not work.

skuid.model.map() will work.

Double check the API to see if it requires parentheses.

How to navigate data within the console

To properly diagnose issues, you’ll be taking a look into the inner workings of Skuid models and components. You need to learn how to peek inside the results of your console commands.

For almost all results, follow these steps:

  1. Enter the API.
  2. Click the fa-caret-right arrow beside the result.
  3. Repeat as needed to see properties and subproperties of the result.
  4. To collapse a property, click the fa-caret-down arrow beside that property.

debug-with-console-nav-console

Note

If your console log is too long and crowded, you can often filter the results or clear the log by entering the clear() command or pressing CMD + K (Mac) or CTRL + K (Windows).

Accessing data in arrays with bracket notation

Many of the APIs listed below will return arrays, which mean that the result contains information about many different items. For example, if you ask for all the models on the page using the skuid.model.getModelList() API, you will get a single result that lists each model within it.

debug-with-console-0

This is useful to get an overview of that data, but if you want to information about one element in that array, you can append brackets ([]) containing the identifier of the element you want. Most of the time, the bracket contains a number that matches an element’s order in the array. Note that arrays start counting at 0 instead of 1.

So to obtain information about the first model listed in the page, use skuid.model.getModelList()[0]:

debug-with-console-1

Throughout this Skuid topic—and others—you may see this notation used to access specific items in an array. Try experimenting in your own pages to see how this works in practice.

Note

For many of parts of Skuid—such as models—there are separate “getter” APIs, so bracket notation is not required.

Useful Commands

When navigating your results, there are two general web APIs—APIs that are used for and within web pages throughout the internet—to use while debugging:

console.log(): This will display a log in the console of anything designated within its parentheses. For example, console.log('Yay!') will log the string “Yay!” once.

Note

If you’re working with JavaScript snippets, it can be helpful to place messages within your code to see where it may be failing.

To learn more about console.log(), see MDN web docs.

console.table(): Encasing an API with console.table() will render any returned data as a table as opposed to just a navigable JavaScript object.

For example, if you enter an API such as myModel.data to retrieve a bigger set of data, you may receive sometimes receive a difficult-to-navigate array:

debug-with-console-2

Instead, try writing it as console.table(myModel.data) to get see a more coherent table:

debug-with-console-3

And if you want to limit the data shown on this table, follow your API with a comma and the names of each field you want encased in brackets. For example: console.table(myModel.data, ['Name', 'Phone'])

debug-with-console-4

To learn more about console.table(), see MDN web docs.

Debugging in Lightning Experience

While testing pages within Lightning Experience, it can be difficult to employ more advanced methods of debugging using the Skuid JavaScript API because the skuid object is inaccessible.

To access the skuid JavaScript object within a Lightning page at runtime:

  1. Execute the following in your browser’s console:

    1
    $A.get('e.skuid:apiDebugRequested').fire();

  2. Right click the ellipsis {...} returned by this command.

  3. Click Store as a global variable.

    https://s3.us-west-2.amazonaws.com/developer.skuid.com/assets/v16.8/api-versions/v1/skuid/deploy/salesforce/lightning/lightning-debug-global-variable.gif

  4. (Optional) Enter the following in the console:

    1
    var skuid = temp1;

    Note

    You may skip this step, but you’ll need to use the temp variable in place of skuid to access JavaScript APIs.

    If you have stored other global variables in this manner, you’ll need to set skuid to equal whichever temp variable is created by this process, e.g. temp2, temp3, etc.

After doing so, you’ll be able to freely use the skuid object and all of its assorted APIs within the page.

Note

This is intended exclusively for debugging purposes, not to be included with production code. Including this command in production code will have no effect.

Common Debugging Situations

My page is totally blank

Open the console and look for any errors listed within its log. If there are any major page-breaking errors, you’ll see them listed here.

JavaScript snippets are often a cause of page malfunctions. Some common errors include:

  • Uncaught ReferenceError: thisFormulaIsNotDefined is not defined
  • Uncaught SyntaxError: Invalid or unexpected token
  • Uncaught SyntaxError: Unexpected token

If the error is because of JavaScript, the console will often link to the offending snippet on the right-hand side of the console. Click this link to get a better idea of what code could be causing issues in your page.

After finding the cause, try tweaking or temporarily removing that JavaScript resource to see if the problem resolves. If it is an external resource—like an externally hosted JavaScript library—ensure that the resource is still hosted at the appropriate URL or remove the reference to it.

Some errors may not be related to a Skuid resource or snippet, but an external service. Ensure that any third party services being used are in working order.

If nothing else, you will have valuable information to research or discuss within the community.

The data in my page is incorrect

If the data in your page is not appearing as expected, then the issue most likely resides within the properties of the page’s models.

The below APIs show how to get information about all the models on a page, as well as how to select a specific one for further analysis:

API Purpose
skuid.model.getModelsList()

Returns a list of the page’s models as an array.

To access an individual model, use skuid.model.getModel('ModelName')
skuid.model.map()

Returns a list of the page’s models as an object.

To access an individual model, use the name of the model: skuid.model.map().modelName
skuid.model.getModel('ModelName') Return a single model’s information.
skuid.$M('ModelName') A shortcut to skuid.model.getModel('ModelName')

If all of the page’s models appear to be functional, then you may need to debug individual models to find the issue. When doing this, it’s easier to set a reference to it in a variable:

1
var myModel = skuid.$M('ModelName')

Now entering myModel in the console acts the same as entering skuid.$M('ModelName')!

Note

For readability, the list below assumes you’ve set this shortcut variable, but know that you can substitute skuid.$M('ModelName') for the myModel text below.

API Purpose
myModel.objectName Returns the name of the object being accessed by the model.
myModel.getRows() Returns an array of all rows within the model. To select an individual row, use the getRowById() API.
myModel.getRowById('IdOfRow') Returns an individual row within the model based on the provided row ID. To get the actual value of a field, append the field’s name to this API: myModel.getRowById('IdOfRow').Name
myModel.getFirstRow() Returns the first row of the model.
myModel.fields Returns the properties and metadata of each field available within the model—labels, display types, etc. To select an individual field, use the getField() API.
myModel.getField('FieldName') Returns the properties and metadata of a single field based on the provided field name.

When working with model data, the console.table() API is especially useful. By combining this API with bracket notation, you can display specific fields from the model within a table format using a command like this:

1
console.table(myModel.getRows(), [ 'Name', 'CreatedDate', 'OwnerId' ]);

If you are working primarily with Salesforce models, it can be helpful to see the SOQL query being used and test it yourself within the Salesforce Developer Console for comparison. To see the query being used by a Salesforce model, use:

1
myModel.soql

If you are seeing issues with your data, try experimenting with combinations of these APIs to investigate the cause.

My conditions may have incorrect values

Not seeing the correct data—or any data at all—may mean there is an issue with your model conditions. When setting a model condition through the Action Framework, or experimenting with merge syntax, it can be difficult to tell what is actually being used to filter the data. Here are some APIs to figure that out:

API Purpose
myModel.conditions

Returns an array of all conditions within the model.

To select an individual condition, use the getConditionByName() API.
myModel.getConditionByName('ConditionName') Returns information about an individual condition based on the name provided.

Investigate individual conditions to see where your issue may lie. Two properties you want to check:

  • inactive: This property is states whether a condition is not currently applied—which means the value will be true—or if the condition is being applied—which means the value will be false. Check this property to see which conditions are limiting a model’s data.

    Access this property by entering myModel.getConditionByName('ConditionName').inactive

  • value: If the condition is activate, this is the value that is currently used to filter the data. This can be a problem area if your data does not look correct.

    Access this property by entering myModel.getConditionByName('ConditionName').value

To see which conditions are currently activate on your page, use the following command:

1
myModel.conditions.filter((c) => (!c.inactive)).map((c) => c.field + ' ' + c.operator + ' ' + (c.values ? '('+c.values.join()+')' : c.value))

Note

Working on Skuid NLX? Try this command instead:

1
myModel.conditions.filter((c) => (!c.inactive)).map((c) => c.label + ' ' + c.operator + ' ' + (c.values ? '('+c.values.join()+')' : c.value))

I’m having issues with my components

Sometimes components may not display, display incorrectly, or just seem to need a refresh. Access them with these APIs.

API Purpose
skuid.component.getAll() Returns an array of all components on a page. Helpful for obtaining component IDs.
skuid.component.getById('ComponentId') Returns information about a single component based on the provided component ID.
skuid.$C('ComponentId') A shortcut to skuid.component.getById('ComponentId').

Much like models, it’s often easier to set up a reference to a component and work with its APIs from there:

1
var myComponent = skuid.component.getById('ComponentId')

In addition to investigating component properties, you can also unrender and rerender components if they seem to render incorrectly:

Unrender the component:

1
myComponent.unrender()

And then rerender:

1
myComponent.render()

General Issues

I’m blocked by a Show Message and Block UI message

If an Action Framework action or JavaScript snippet has blocked the UI at runtime, you can remove that message using this API:

1
skuid.$.unblockUI()

The skuid.$.blockUI() and skuid.$.unblockUI() are equivalent to the “Show Message and Block UI” and “Unblock UI” Actions Framework actions.

If you would like to experiment with blocking the UI using different messages, you can also use this API:

1
skuid.$.blockUI()

These functions are part of a jQuery plugin used by Skuid. If you are an advanced builder and would like to learn more, see the plugin’s documentation: http://jquery.malsup.com/block/

How can I use jQuery in my page?

Skuid includes jQuery, accessible via this API:

1
skuid.$

But you can use this handy shortcut to access jQuery as your normally would:

1
var $ = skuid.$;

Now you can call APIS like `$('#unique-id').hide()` rather than skuid.$('#unique-id').hide().

Other handy APIs

API Purpose
skuid.page.name Returns the name of a Skuid page.
skuid.version Returns the version of Skuid running the page.
skuid.time Can return a variety of time-related information. Recommended for advanced builders.