Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Defining a JavaScript function when sourcing large data pages from a connector, activity, or data transform

Updated on April 27, 2022

To source large data pages from a connector, activity, or data transform, define the JavaScript populator function in a Pega Platform text file.

Note: Create a separate populator function for each large data page that populates a UI element.
Before you begin: Create and configure a data page that you later declare as large. For more information, see Creating a data page when sourcing large data pages from a connector, activity, or data transform.
  1. In the header of Dev Studio, click CreateTechnicalText File.
  2. On the Create Text File tab, in the Text File Record Configuration section, configure the text file:
    1. In the Label field, enter <datapage-name>_datapage_api.
      The datapage-name variable corresponds to the data page that you created in Creating a data type when sourcing large data pages from a connector, activity, or data transform.
      For example: For the D_Expenses data page, in the Label field, enter expenses_datapage_api.
    2. In the App Name (Directory) field, enter webwb.
    3. In the File Type (extension) field, enter js.
  3. In the Context section, specify the branch and ruleset for the file.
  4. Click Create and open.
  5. On the text file tab, on the Main tab, in the text field, define the custom populator by entering the following JavaScript code:
    var <function-name> = function(parametersMap, clientStore, onSuccess, onFailure) {
    var targetDatapageName = "<datapage-name>";  
    var query = "SELECT <field-name1>, <field-name2>, <field-name3> FROM <datapage-name>";
    var queryParameters = [];
    clientStore.runQuery(query, queryParameters, targetDatapageName, onSuccess, onFailure); 
} 
pega.ui.ClientCache.registerLargeDatapage("<datapage-name>", <function-name>);

    where:

    For example: For the D_Expenses data page, in the text field, enter the following JavaScript code:

    var expensesCustomFunction = function(parametersMap, clientStore, onSuccess, onFailure) {
    var targetDatapageName = "D_Expenses"; 
    var query = "SELECT Title, Description, Amount, Currency, EmployeeID FROM D_Expenses"; 
    var queryParameters = [];
    clientStore.runQuery(query, queryParameters, targetDatapageName, onSuccess, onFailure); 
} 
pega.ui.ClientCache.registerLargeDatapage("D_Expenses", ExpensesCustomFunction);

    To filter the source data page returns or to join data from separate large data pages, further customize the populator function. For more information, see Further customizing data population for large data pages.

    To learn more about the structure of the populator function, see Data population for large data pages in offline-enabled mobile apps.

  6. Click Save.
What to do next: Add the text file that contains the JavaScript populator function to your application. For more information, see Adding JavaScript code to Pega Platform applications when sourcing large data pages from a connector, activity, or data transform.
  • Previous topic Creating a data page when sourcing large data pages from a connector, activity, or data transform
  • Next topic Further customizing data population for large data pages

Related articles

Improving the synchronization of offline-enabled mobile apps with large data pagesAdjusting the performance of offline-enabled mobile apps

Tags

Pega Platform 8.7 Mobile

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us