FYI: This article has not been updated or reviewed since the Tokyo release. Use at your discretion, but be advised that these methods may or may not work on later releases.
Table of Contents |
|
Client State Parameters UIB Client Scripts Classic Environment Client Scripts UI Builder API UI Builder Helpers Resources |
This article provides a high level overview of what a Client script is in UI Builder, examples and resources of what Client scripts can be used for, and how they differ from Client Scripts in UI16. This article is not an extensive technical resource for Client scripts, but as a general overview of concepts and to demystify what each functionality is used for despite sharing the same name. Included in this article are two APIs that can be used in UI Builder Page Scripts, the UI Builder API and the Helpers API.
Client State Parameters |
Client State Parameters are page level variables that listen for changes on the page and can be used in component configuration via data binding. Client State Parameters can be updated via Client Scripts that are triggered through an event. The Create and bind a client state parameter to a component product documentation will walk you through creating a dynamic label for a component and updating that dynamic value via a client script.
UIB Client Scripts (also known as Page Scripts) |
A Client script also known as a Page script is used within the UI Builder interface to run client-side JavaScript in reaction to events. Client scripts in UI Builder allow for modifications to an event payload or client state parameter values before the value is used. Client Scripts do not have to return anything back to the framework and can be used asynchronously. Client Scripts can also be used to execute multiple steps in a particular order, replacing the need for multiple Event Handlers and executing the logic within the Client script itself.
Client Scripts can be used to perform the following in UI Builder:
- Getting available data, manipulate the data, and store it in a client state
- Accessing data resource results
- Execute data resource operations
- Dispatching events
- User interaction events/actions, such as a button click
- Lifecycle events, such as a data resource execution started or successful
For more information and a walkthrough on creating a Client Script in UI Builder see the Define and bind client scripts to components product documentation, and check out the video below for a quick overview.
Classic Environment Client Scripts |
A Client Script is UI Builder is not the same as a client script in the Platform UI. Client Scripts in the Platform UI are used to configure forms, form fields, and field values. When working with Record page templates and Form components there is built in functionality for those pages and components to respect client scripts created for the platform UI but the functionalities between the two are different despite the naming. For more information on client scripts see the Client Scripts product documentation. To ensure a Client Script works in both Platform UI and Workspace, ensure the Client Script UI Type field is set to All. Best practices should be utilized when working with Client Scripts in Configurable Workspace such as avoiding DOM Manipulation and using methods such as GlideAjax instead of Client-side GlideRecord.
UI Builder API |
The UI Builder API contains methods that are available for use in Client Scripts in UI Builder as well as Scripted Property Values found in component data binding. A Scripted Property Value is a synchronous function that can be used to perform the following:
- Passing to a component property
- Determining component visibility
- Emitting an event with a payload
The following methods are exposed as of the San Diego release, click on each link to see the available APIs and their uses.
- Context - Work with page property or session properties
- Data - Work with Data Resources
- Emit - Trigger an event
- State - Set Client State Parameter states
UI Builder Helpers API |
The Helpers API contains methods that are available for use in Client Scripts to eliminate the need to write code for common functions such as opening or closing a modal. It is not available to any other scripts in UI Builder and cannot be used with:
- Scripted Property Values
- Component Visibility
- Event Payloads
- UX Client Script Includes
Resources |
For more information outside of the links embedded within the content, check out the following:
