Support Article
Validation errors in collapsed Accordion control are hidden
SA-9302
Summary
Accordion (+: Dynamic Layout with Collapsible headers) can be collapsed to save space on a form, but contains the field marked as required.
When user do not enter values in those fields validation will mark these fields. But as the Accordion is collapsed the users cannot see the fields and there is no mark on the Accordion header to highlight where those missing fields are located.
Error Messages
Not Applicable
Steps to Reproduce
1. Create a Section with 2 Accordions having one required field one each for the step of the Case Type.
2. Create an instance case type and check that one Accordion is expanded and another is collapsed.
3. Press submit to trigger Validation
Observe that the expanded Accordion has the highlights field but there is no indication that fields on the collapse Accordion are required.
4. Expand 2nd Accordion in the form.
Observe that the required field (previously hidden) is highlighted.
Root Cause
Submitted product enhancement request item FDBK-10842.
Resolution
For Pega 7.1.6/7.1.7 the following local change can be made so that the collapsed Accordion will be marked if the validation fails.
This involves adding validation_displayErrors, getAccordionErrorList, pega.u.d.markAccordionErrors functions in UserWorkForm:
<script>
function validation_displayErrors(errorList, successList, serverErrors)
{
var display_removeErrorImageRef = display_removeErrorImage;
var display_addImageErrorRef = display_addImageError;
if(serverErrors!=true){
var successListLength = successList.length;
for(var i=0; i<successListLength; i++)
{
display_removeErrorImageRef(successList[i]);
var errorChild = $(successList[i]).siblings(".iconErrorDiv")[0];
if(errorChild){
errorChild.parentNode.removeChild(errorChild);
}
}
}
var errorListLength = errorList.length;
for(var i=0; i<errorListLength; i++)
{
display_removeErrorImageRef(errorList[i].element);
}
accordionRemoveErrorImage();
pega.u.d.AccordionErrorNodeList = [];
for(var i=0; i<errorListLength; i++)
{
display_addImageErrorRef(errorList[i]);
var errSib = $(errorList[i].element).siblings();
for(var j = 0; j< errSib.length; j++){
if($(errSib[j]).hasClass("iconErrorDiv")){
errSib[j].childNodes[0].id = "PegaRULESErrorFlag";
}
}
getAccordionErrorList(errorList[i].element);
}
try{pega.u.d.showErrors();}catch(e){console.log("exception");}
}
function accordionRemoveErrorImage(){
var length = pega.u.d.AccLen.length;
for (var ind = 0; ind < length; ind++) {
var currentTabGroup = document.getElementById("PEGA_ACCORDION" + pega.u.d.AccLen[ind]);
var errorDivs = $(currentTabGroup).find(".iconErrorTabsDiv");
for(var error = 0; error < errorDivs.length; error++){
var errorDiv = errorDivs[error];
errorDiv.parentNode.removeChild(errorDiv);
}
}
}
function getAccordionErrorList(errorEle){
var length = pega.u.d.AccLen.length;
for (var ind = 0; ind < length; ind++) {
var currentTabGroup = document.getElementById("PEGA_ACCORDION" + pega.u.d.AccLen[ind]);
var childExists = $(currentTabGroup).find(errorEle);
if(childExists.length > 0){
while(errorEle && !$(errorEle.parentElement).hasClass("accordionContent")){
errorEle = errorEle.parentElement;
}
if(!errorEle) return;
var index = errorEle.getAttribute("section_index");
var liNodes = errorEle.parentElement.parentElement.childNodes[0].childNodes;
var errorNode = "";
for(var i=0; i < liNodes.length; i++){
var sectionIndex = liNodes[i].getAttribute("section_index");
if(sectionIndex === index){
errorNode = liNodes[i];
break;
}
}
pega.u.d.AccordionErrorNodeList.push(errorNode);
}
}
}
pega.u.d.markAccordionErrors = function () {
var length = pega.u.d.AccLen.length;
for (var ind = 0; ind < length; ind++) {
var currentTabGroup = document.getElementById("PEGA_ACCORDION" + pega.u.d.AccLen[ind]);
if (currentTabGroup) {
var children = currentTabGroup.getElementsByTagName("ul")[0].childNodes;
var childLen = children.length;
for (var cnt = 0; cnt < childLen; cnt++) {
if (children[cnt].nodeType == 1) {
if (pega.util.Dom.getElementsById("PegaRULESErrorFlag", children[cnt])) {
var newDivObj = document.createElement("div");
newDivObj.style.display = "block";
newDivObj.className = "iconErrorTabsDiv";
newDivObj.innerHTML = "<span class='iconErrorTabs' title='The Section Contains Errors' id='PegaRULESErrorFlag'/>";
var parentRow = children[cnt].getElementsByTagName("tr")[2];
var targetTD = parentRow.getElementsByTagName("td")[0];
targetTD.insertBefore(newDivObj, targetTD.getElementsByTagName("*")[0]);
} else if(pega.u.d.AccordionErrorNodeList && pega.u.d.AccordionErrorNodeList.indexOf(children[cnt]) >=0 ){
var newDivObj = document.createElement("div");
newDivObj.style.display = "block";
newDivObj.className = "iconErrorTabsDiv";
newDivObj.innerHTML = "<span class='iconErrorTabs' title='The Section Contains Errors' id='PegaRULESErrorFlag'/>";
var parentRow = children[cnt].getElementsByTagName("tr")[2];
var targetTD = parentRow.getElementsByTagName("td")[0];
targetTD.insertBefore(newDivObj, targetTD.getElementsByTagName("*")[0]);
}
}
}
}
}
};
</script>
Published June 12, 2015 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.