Skip to main content


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

Further customizing data population for large data pages

Updated on April 27, 2022

Decide how you want to process the data that you fetch from large data pages by customizing the populator function. For example, you can join data from two separate data pages.

By customizing the populator function, you can perform the following operations on the data that the client store forwards to the client cache:

  • Filter the content of the large data page.

    For example, in an expense reporting app, you can configure a drop-down list to display only employees that report to a specific manager.

  • Join data from two separate large data pages.

    For example, you can add personal employee data to expense reports by joining the data page that contains expense reports details with the data page that contains employee data.

  • Further process the data that the populator returns according to your needs.
Note: When customizing populator functions, keep in mind the following guidelines:
  • Create a separate populator function for each large data page that populates a UI element. Assign each populator function to the corresponding large data page by registering the populator function.
  • After registering the populator function by using the pega.ui.ClientCache.registerLargeDatapage() function, reference the function through the corresponding UI element. To invoke the function without referencing the UI element, use the findPageAsync() method on the client cache.
  • Do not use target data pages as source data pages for other target data pages.
Customize the JavaScript populator function according to your needs by performing the following action:
  • Define the populator function as follows:
    var <function-name> = function(parametersMap, clientStore, onSuccess, onFailure) {
    var targetDatapageName = "<target-datapage-name>";
    var query = "<sql-query>";
    var queryParameters = [<properties-array>]; 
    clientStore.runQuery(query, queryParameters, targetDatapageName, onSuccess, onFailure); 
} 
pega.ui.ClientCache.registerLargeDatapage("<target-datapage-name>", <function-name>, [<source-datapages-list>]);

    where:

    • function-name is a function name of your choice.
    • target-datapage-name is the name of the target data page in the client cache.

      By specifying the name of the target data page, you ensure that the runQuery function returns the requested properties in a format that the client cache accepts.

      Note: Ensure that the target data page and the corresponding source data pages in the client store meet the following requirements:
      • The data pages are declared as large.

        For more information, see Declaring a data page as large.

      • The data pages contain the columns that are referenced by the query. To achieve this requirement, you can configure the data pages to be instances of the same class.
    • sql-query is the SQL operation that the function performs on the source data page.

      For example, for a drop-down list to display only the employees that report to a selected manager, define the query parameter by using the following SQL query: var query = "SELECT * FROM D_Employees WHERE pyManager = ?".

      Note: Ensure that the query complies with SQLite rules. For more information, see the SQLite documentation.
    • properties-array is an array of SQL parameter values in the order of their appearance in the query.

      For example, for a drop-down list to display only the employees that report to a specific manager, define the queryParameters parameter as follows: var queryParameters = [parametersMap.pyManager].

      Note: Ensure that the queryParameters parameter meets the following requirements:
      • The order of the properties in the array matches the order in which the properties appear in the query string.
      • The number of properties in the array matches the number of ? characters in the query string.

        If there are no ? characters in the query string, define the array as empty by entering var queryParameters = [].

    • source-datapages-list is an array of source data pages from which the target data page fetches the results.
      Note: Include this parameter only when the target data page differs from the source data page, for example, when the target data page fetches data from several source data pages.

    For more information about the structure of populator functions, see Data population for large data pages in offline-enabled mobile apps.

For example: For a drop-down list to display only the employees that report to a selected manager, define the populator function as follows:

var employeesByManager = function(parametersMap, clientStore, onSuccess, onFailure) {
    var targetDatapageName = "D_Employees";
    var query = "SELECT * FROM D_Employees WHERE pyManager = ?";
    var queryParameters = [parametersMap.pyManager];
    clientStore.runQuery(query, queryParameters, targetDatapageName, onSuccess, onFailure);
};
pega.ui.ClientCache.registerLargeDatapage("D_Employees", employeesByManager);

To display information about submitted expense reports for all employees reporting to a selected manager, define the populator function as follows:

var myCustomPopulatorFunction = function(parametersMap, clientStore, onSuccess, onFailure) {
    var targetDatapageName = "D_ExpensesForManager";
    var query = "SELECT D_Expenses.pyTitle, D_Expenses.pyUSDAmount" +
                "FROM D_Expenses, D_Employees" +
                "WHERE D_Expenses.pyEmployee == D_Employees.pyID AND D_Employees.pyManager = ?";
    var queryParameters = [parametersMap.pyManager];
    clientStore.runQuery(query, queryParameters, targetDatapageName, onSuccess, onFailure);
};
pega.ui.ClientCache.registerLargeDatapage("D_ExpensesForManager", myCustomPopulatorFunction, ["D_Expenses", "D_Employees"]);

To preprocess parameters and postprocess the results, use the following populator function template:

var myCustomPopulatorFunction = function(parametersMap, clientStore, onSuccess, onFailure) {
    // add pre-process work -> do something with parametersMap here 
    var targetDatapageName = "Declare_MyDataPageName";
    var query = "SELECT * FROM Declare_MyDataPageName WHERE pySomething = ? AND pySomethingElse > ?";
    var queryParameters = [parametersMap.pySomething, parametersMap.pySomethingElse];
    var myOnSuccess = function(resultArrayOfMaps) {
        // add post-process work -> do something with resultArrayOfMaps here  
        onSuccess(resultArrayOfMaps);
    };
    clientStore.runQuery(query, queryParameters, targetDatapageName, myOnSuccess, onFailure);
};
pega.ui.ClientCache.registerLargeDatapage("Declare_MyDataPageName", myCustomPopulatorFunction);
  • Previous topic Defining a JavaScript function when sourcing large data pages from a connector, activity, or data transform
  • Next topic Data population for large data pages in offline-enabled mobile apps

Related articles

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

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