The Pega 7 Platform now supports cascading list-based controls in offline applications. The cascading is achieved by triggering a custom JavaScript function on a list-based control, such as a drop-down menu, with a data page as its source in the offline application.

The data pages need to be packaged before they can be used as a source for list-based controls. By default, all the data pages that are referenced in the application, such as harness, section, flow action, and local action, are packaged automatically. The non-referenced data pages must be listed in the pyDataPageWhitelistForOffline HTML rule for packaging.

To populate the actual data for list-based controls that are sourced from parameterized data pages, you need to use a custom JavaScript function with the same name as the data page. Use the Formatted text control for the declarative target property to trigger the registered function before displaying it.

The following example shows a custom JavaScript function, Declare_LoadEmployees, for cascading a drop-down menu from a data page.

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());
      }
    }
}

This feature helps to cascade the drop-down menu list based on the value that is selected in the original drop-down list. For example, the values for a drop-down menu for States can be listed based on the value selected from the drop-down menu for Country.