Using data pages with parameters in an offline-enabled application
When working with an offline-enabled Pega Platform™ application, to dynamically filter out a subset of the data page content, for example, in a drop-down list, set up a data page that contains parameters.
To populate the results on the data page that contains parameters, you define a JavaScript custom function. Then you save the created JavaScript code for the custom function to a text file and attach the file to the application.
For offline-enabled mobile applications, use data pages that contain parameters only to display data in the following UI elements:
- Autocomplete fields
- Drop-down lists
- Multiselect lists
- Radio buttons
- Repeating dynamic layouts
For offline-enabled mobile applications, data pages that contain parameters do not support other data page functionalities such as using data pages in data transforms.
Table of contents
This article covers the following topics:
Requirements
Before you begin, make sure you fulfill the following requirements:
- You are an experienced JavaScript developer.
- You have experience with list-structured data pages in Pega Platform. For more information, see Data pages.
- You have created a simple Pega Platform offline-enabled mobile app that uses a list-structured data page that is linked to a user interface control such as a drop-down list.
Populating results on a data page that contains parameters
To populate results on a data page that contains parameters, define and use a JavaScript custom populator function. The name of the custom populator function must be the same as the name of the data page that contains parameters, for example, Declare_LoadEmployees()
.
The populator function contains two arguments:
- A reference to the data page.
- A parameter list object that contains the parameter name and parameter value pairs.
Create a custom populator function for a data page.
For example, for theDeclare_LoadEmployees
data page, create the following populator:function Declare_LoadEmployees( dpPage, params ) { ... }
Add JavaScript code to the custom populator function that allows you to access the value of a parameter and populate the results on a data page, for example:
function Declare_LoadEmployees( dpPage, params ){ var cc=pega.u.ClientCache; var employeesInSiteServicesPL = dpPage.put( "pxResults",[] ); var employeePLIter = cc.find("Declare_LoadAllEmployees.pxResults").iterator(); while(employeePLIter.hasNext()){ var empPg = employeePLIter.next(); var role = params.pyRole ; if(empPg.get("pyRole").getValue() == role){ employeesInSiteServicesPL.add().adoptJSON(empPg.getJSON()); } } }
where:
Declare_LoadEmployees
is the name of the data page that contains parametersDeclare_LoadAllEmployees
is the name of the data page without parameters that contains unfiltered datapyRole
is a parameter on the data pageYou can access the value of a parameter by usingparams.pyRole
.
The JavaScript populator iterates through the results of the Declare_LoadAllEmployees data page and then copies the results that return true for the condition to Declare_LoadEmployees.pxResults.
Adding JavaScript code as a text file
To use the new custom populator function Declare_LoadEmployees()
in your application, insert the JavaScript code that was previously created as a text file.
In the navigation panel, right-click the name of your case, and click
.In the Label field, enter load_employees_datapage_api as the name for the text file.
In the App New (Directory) field, enter the name of your application.
In the File Type (extension) field, enter js.
Create and open the text file, and then paste your JavaScript code into the File source field.
Click
.
Attaching a text file to the Pega Platform application
Include the JavaScript code text file, load_employees_datapage_api
, in the pypega_ui_userscripts_offline Static Content Bundle rule. This action ensures that the JavaScript code that you created is accessible within the offline-enabled application.
In Dev Studio, search for the pypega_ui_userscripts_offline rule.
Edit the pypega_ui_userscripts_offline UI Kit rule for your application.
In the App name field, enter the name for your application.
In the File extension field, enter js.
In the File name field, enter load_employees_datapage_api.
Click
.In the Context field, select the name of your application.
Click
.
Now that the custom populator JavaScript function is available in Pega Platform, you can use data pages that contain parameters in your offline-enabled application.