Skip to main content


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

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Displaying documents in multiple AJAX containers

Updated on September 10, 2021

Use the AJAX container to group similar documents together and display them at run time without refreshing the whole page.

Use case

The Expense Manager application screen shows several categories of documents. A Pega developer wants to configure the UI elements so that when a category is clicked, its sub-categories are displayed in a chosen part of the display. When a sub-category is clicked, its contents are displayed next to the main category. When an item is clicked it is opened for editing in another part of the display. The following image illustrates how the categories are displayed:

Expense Manager screen

To make the categories work, the developer needs to add three AJAX containers to a harness, and then configure them as default, secondary and tertiary. Next, the developer configures three sections to launch their content in the default, second and third container, respectively. In this way, the display is divided into separate areas that group types of content.

As a result, application users can conveniently navigate through the documents and move to other groups of documents. At the same time, users can effectively follow the context of the portal and quickly switch to another functionality, if they choose.

Prerequisites

Ensure that you have a User portal and at least one harness rule. For more information, see Portals and Harness form.
Ensure that you have three sections that group links to documents: the main categories, the sub-categories, and the specific items. For more information, see Sections.

Creating AJAX containers

Add the AJAX containers to a harness to designate a display area where the content is launched and configure the hierarchy of the containers.

  1. In Dev Studio, open the harness that you created.
  2. On the Design tab, from the Structural list, drag AJAX container onto the work area.
  3. In the AJAX Container Settings window, configure the AJAX container:
    1. In the Type drop-down, select Default.
    2. In the Default view drop-down, select None.
    3. In the Maximum Documents drop-down, select 4.
  4. Repeat steps from 2 through 3 with the following changes:
    1. For the second AJAX container, from the Type drop-down, select Secondary.
    2. For the third AJAX container, from the Type drop-down, select Tertiary.
  5. Click OK.
"The settings selected for an AJAX container"
Settings for the first AJAX container

Configuring sections to launch in a target container

After you add and configure the AJAX containers, set up the sections to launch their content in a specific AJAX container.

  1. In the Dev Studio header search field, search for and select your section.
  2. Click the section and click the View properties icon.
  3. On the Actions tab of the Properties panel, click Create an action set.
  4. Click Add an event and select an event that the application user will perform, such as Click or Hover.
  5. Click Add an action > All actions > Section and from the Target drop-down, select Default.
  6. Repeat steps 1 through 5 with the following changes:
    1. For the second section, from the Target drop-down, select Secondary.
    2. For the third section, from the Target drop-down, select Tertiary.
  7. Click Submit.
  8. On the Section form, click Save.
Action tab settings for the second section

Conclusions

You configured three containers and three respective sections to allow for content to be progressively displayed at run time. Users can now effectively navigate between document categories without losing sight of the overall context.

For more information on AJAX containers, see AJAX containers.

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

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