Support Article
Expand/Collapse All Icon does not load Defer loaded DLs
SA-101768
Summary
Expand or Collapse action does not work correctly for collapsible Defer Loaded dynamic layouts.
Error Messages
Not Applicable
Steps to Reproduce
- Configure a section with multiple dynamic layouts.
- Enable Defer Load contents, Display header, and Title in the Layout properties.
- Select 'Collapsible' as the Header type.
- Deselect 'Expanded on load'.
- Add a button in the same section.
- Configure the 'Expand/Collapse' action on click.
- Launch the portal.
- Click the button. The defer loaded content does not load. The 'Loading' text displays.
Root Cause
This behavior is as per Pega product design.
For a collapsible header with Defer Load the section, data is available only when the user clicks on the header manually.
Resolution
Here’s the explanation for the reported behavior:
On the Expand/Collapse action, the content of the section is not sent to the server. The section content is unavailable until the user clicks the section header. At runtime, if the user clicks the 'Expand the section by clicking the header' and then clicks the button, the Expand or Collapse works correctly.
As a local-change, implement the custom JavaScript function (Run script) which triggers the Click event on the dynamic layout header at runtime as below,
- Add custom class (expand-collapse-DL) in the 'Header CSS class' in the Presetation tab of all dynamic layouts in the section.
- Add the below script in the UserWorkForm,
<script>
function expandCollapseDL(param){
if(param == "expand"){
jQuery('div.Collapsed .expand-collapse-DL').click();
}else{
jQuery('div.Expanded .expand-collapse-DL').click();
}
}
</script>
- Configure the 'Run Script' action to the button.
- Provide the custom function name as expandCollapseDL.
Published April 1, 2020 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.