Note: Nintex Apps data centers are located in West US and Australia (AUS). In-region processing of Nintex Apps data is only available in these regions.

Resource Types

JavaScript is made accessible to a Nintex Apps page by creating resources within the javascript JavaScript tab of the Page Designer. Within this tab, you can create resources, each of which is assigned a resource type.

  • Different resource types supply different boilerplate example code or wrap the resource's code in different ways. Be sure to read the details in the sections below.
  • While each resource type has unique properties, they are broadly separated into two categories: inline and external. Inline resources are stored within the page's XML, while external resources are separate files stored outside of the page XML.
  • Resource order determines when code is loaded and ran. If code in one resource types depends on the code in another, for example a third party library expecting some variables being defined, be sure that resources are in the proper load order.

Adding resources

  1. In the Page Designer's Elements pane, click the javascript JavaScript tab.
  2. Click the add Add button to add a new resource.
  3. In the Properties pane, for Resource Type, select one of the resource types listed in the sections below.

The properties available depend on the resource type selected.

Generic JS

This basic resource type runs at the page level. In terms of behavior, this is the equivalent of putting the following within the page's HTML:

Copy 
<script>
// Your JavaScript here
</script>

This is best used for JavaScript logic needed within other snippets, since the logic set here is accessible from elsewhere in the page.

Important:  Generic JS resources do not contain the necessary code for snippets, field renderers, and formula functions by default.

Properties

  • Resource name: A human-readable name for the snippet. Only used as a display name within the JavaScript pane.
  • Resource body: The JavaScript code.
/action-flows/

Generic JS Snippet

In contrast to the basic Generic JS resource type, a Generic JS Snippet resource's code becomes available to Nintex Apps's own snippet functionality, allowing it to be called from the Run a JavaScript Snippet action. This is the recommended resource type for most one-off, inline snippets of JavaScript.

In addition to registering the snippet, this resource types also makes Nintex Apps aware of the snippet within other sections of the Page Designer, e.g. a snippets created via this resource type appear in any dropdown menus where snippets can be selected within a Nintex Apps page.

While the Generic JS resource type is useful for a variety of things, and allows for all sorts of Nintex Apps paradigms to be registered within it, you must properly register your code with certain APIs. Most often, you just need some JavaScript logic to run in conjunction with Nintex Apps's declarative elements. For example, activating some sort of processing logic from a button within a Button Set component.

This resource type makes that easier any code entered within the resource's body is wrapped code within the skuid.snippet.registerSnippet() API.

Compare this snippet, which would be necessary in the Generic JS type:

Copy
skuid.snippet.registerSnippet( "consoleLogMessage", function() {
  console.log('This snippet works!');
});

To this one line, which would work just the same as an Generic JS Snippet, with ts name assigned in the Snippet Name property:

Copy
console.log('This snippet works!');

Properties

  • Snippet name: The name of the snippet, displayed wherever snippets can be accessed in Nintex Apps.
  • Snippet body: The JavaScript code.

Custom field renderer

This resource types makes Nintex Apps aware of the field renderer code within the Page Designer while also generating field renderer boilerplate code. Because of this, all field renderers of this resource type will appear in the Custom field renderer field property's dropdown list.

For information on how to build custom field renderers, see the UI Code topic for general concepts and the Custom Field Renderer topic for implementation details.

Properties

  • Custom field renderer name: The name to reference the custom field renderer by, particularly when selecting a field's field renderer property.
  • Snippet body: The JavaScript code.

Custom formula function

These resource types provide the boiler plate for writing formula functions using the skuid.formula.FormulaFunction class. If Nintex Apps's standard set of formula functions do not meet your needs, try writing the necessary logic in JavaScript and including it in this resource type.

For more information on writing custom formula functions, as well as example code, see the skuid.formula.FormulaFunction class documentation.

Properties

  • Resource name: A human-readable name for the snippet.

    Note:  This name is only used as a display name within the JavaScript pane; the name to use within formulas is determined within the skuid.formula.FormulaFunction() definition.

  • Resource body: The JavaScript code. If no other code has been entered in the resource, this body will be prefilled with boilerplate custom formula function code.

Static Resource

This resource type accesses external custom code stored within a Salesforce Static Resource While the code is still external to the Nintex Apps page, it is accessible within the current Salesforce eorg.

For larger snippets or collections of individual snippets, storing code and accessing code from static resources is recommended. This is the most efficient approach if you have several snippets of custom code that can (or should) be loaded together. Combine them into single static resource file and select this resource type within a Nintex Apps page.

If utilizing static resources, consider using code management and quality assurance tools, like source control software or linting utilities. Also, using static resources means developers can take advantage of other JavaScript like closures, as well third-party library code stored within the Salesforce org.

Properties

  • Resource name: The name of the static resource to query. After typing a few characters, Nintex Apps will attempt to search for any static resources that match the entered characters
  • Namespace: The managed package namespace of the static resource. While most static resources uploaded to a Salesforce do not have a namespace, if the code you wish to access was installed as part of a managed package, you'll need to enter its namespace here.
    • /action-flows/
  • Cache resource location: Caches the contents of the static resource, allowing for faster load times. However, if the contents of the resource change, then the end user may experience out of date code. Only recommended for "complete" or production pages.

Note:  This resource type can only be used load JavaScript code. Nintex Apps will not attempt to load other assets.

The following code, if stored within a static resource, could be accessed within a Nintex Apps page accessing that static resource.

Including code via this static resource lacks the benefits of registering these bits of code within a page—namely the ability for the Page Designer to provide their names as dropdown options. For example, to use the checkClosureVar snippet, builders would need to know that exact string and enter it correctly within the Run a JavaScript snippet action.

However, this basic example illustrates how to maintain static resources can be used to keep all custom code within one concentrated file, which can then be used across pages. This is particularly powerful for custom formula functions.

Copy
(function (skuid) {
  const snippet = skuid.snippet,
    formula = skuid.formula

  // Shared variables (closures)

  // These variables are available to all snippets within this static resource.
  // *However*, they are still contained within the parent function above.
  // That means it doesn't clutter the page's global variables, which also eliminates
  // the risk of two static resources reusing the same variable name.

  var myClosureVar = 0;

  // This basic snippet is available wherever snippets can run
  // because it is registered with the skuid.snippet.registerSnippet() API.
  // Note that, since it is registered _outside_ the page, the Page Designer
  // will not be able to autofill its name.

  snippet.registerSnippet("checkClosureVar", function () {
    console.log("This snippet worked!");
    console.log("Check out this closure varable: " + myClosureVar);
  });

  // This formula function can be used wherever formula functions are available.
  // Note that, since it is registered _outside_ the page, the Page Designer
  // will not be able to autofill its name.

  new formula.FormulaFunction(
    "APPEND_TEXT",
    function (fieldName, appendString) {
      return fieldName + " " + appendString + " " + myClosureVar;
    },
    {
      namespace: "textManipulation",
      numArgs: 2,
      returnType: "string",
    }
  );
})(skuid);

External

Use this resource type to query an arbitrary URL that hosts JavaScript code. This can be useful for incorporating existing code hosted elsewhere or third party libraries hosted on other domains, such as through a content delivery network (CDN).

  • Resource name: A human-readable name for the external JavaScript code. Only used as a display name within the JavaScript pane.
  • Resource URL: The URL to retrieve JavaScript code from.

Note:  If your external resource consists of code you are not in charge of maintaining, it could change/break without warning.