Use the AJAX container to group similar documents together and display them at run time without refreshing the whole page.
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:
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.
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.
- In Dev Studio, open the harness that you created.
- On the Design tab, from the Structural list, drag AJAX container onto the work area.
- In the AJAX Container Settings window, configure the AJAX container:
- In the Type drop-down, select Default.
- In the Default view drop-down, select None.
- In the Maximum Documents drop-down, select 4.
- Repeat steps from 2 through 3 with the following changes:
- For the second AJAX container, from the Type drop-down, select Secondary.
- For the third AJAX container, from the Type drop-down, select Tertiary.
- Click OK.
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.
- In the Dev Studio header search field, search for and select your section.
- Click the section and click the View properties icon.
- On the Actions tab of the Properties panel, click Create an action set.
- Click Add an event and select an event that the application user will perform, such as Click or Hover.
- Click Add an action > All actions > Section and from the Target drop-down, select Default.
- Repeat steps 1 through 5 with the following changes:
- For the second section, from the Target drop-down, select Secondary.
- For the third section, from the Target drop-down, select Tertiary.
- Click Submit.
- On the Section form, click Save.
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.