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

• Populating results on a data page that contains parameters

• Adding JavaScript code as a text file

• Attaching a text file to the Pega Platform application

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.

1. Create a custom populator function for a data page.
   For example, for the Declare_LoadEmployees data page, create the following populator:

   function Declare_LoadEmployees( dpPage, params ) { ... }

2. 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 parameters
• Declare_LoadAllEmployees is the name of the data page without parameters that contains unfiltered data
  Note: Ensure that the data page without parameters is on the allow list for offline data pages.

• pyRole is a parameter on the data page

  You can access the value of a parameter by using params.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.

1. In the navigation panel, right-click the name of your case, and click Create > Technical > Text File.

2. In the Label field, enter load_employees_datapage_api as the name for the text file.

3. In the App New (Directory) field, enter the name of your application.

4. In the File Type (extension) field, enter js.

5. Create and open the text file, and then paste your JavaScript code into the File source field.

6. Click Save.

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.

1. In Dev Studio, search for the pypega_ui_userscripts_offline rule.

2. Edit the pypega_ui_userscripts_offline UI Kit rule for your application.

3. In the App name field, enter the name for your application.

4. In the File extension field, enter js.

5. In the File name field, enter load_employees_datapage_api.

6. Click Save as.

7. In the Context field, select the name of your application.

8. Click Save.

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.