Support Article
Error Icon Appearing in Incorrect Places
SA-38167
Summary
Although the error icon has stopped appearing on random fixed tabs, it does not appear on repeatable tabs.
Error Messages
Not Applicable
Steps to Reproduce
- Create multiple tabs.
- Test client side validation on some fields.
Root Cause
After applying Hfix-33003 to fix the wrong error on tabs, the repeated tabs were giving inconsistent behavior by getting marked with error.
Repeated tabs are not supported for errors.
Resolution
Add below script in user work form:
<script>
$(document).ready(function(){
pega.u.d.markSectionTabErrors = function(tabDiv) {
console.log("in markSectionTabErrors");
var tabErrorToolTip = tabDiv ? tabDiv.getAttribute("data-taberror") : "Correct all fields containing errors.";
/*var length = pega.u.d.tabsLen.length;
for (var ind=0; ind < length; ind++)
{*
/*var currentTabGroup = document.getElementById("PEGA_TABBED"+pega.u.d.tabsLen[ind]);*
var ul, div;
var currentTabGroup = tabDiv;
var tabWithError = -1;
var tabPosition = currentTabGroup.getAttribute("data-pos");
if (currentTabGroup && tabPosition) {
if (tabPosition == "Bottom" || currentTabGroup.getAttribute("data-pos") == "Top")
var children = pega.util.Dom.getChildren(currentTabGroup);
else { /*For side cases *
if (pega.util.Dom.hasClass(currentTabGroup, "with-fixed-header")) {
var table = pega.util.Dom.getChildren(currentTabGroup)[0];
var tbody = pega.util.Dom.getChildren(table)[0];
var tr = pega.util.Dom.getChildren(tbody)[0];
var td = pega.util.Dom.getChildren(tr);
if (tabPosition == "Left") {
ul = $(".dc-left .contents .tab-ul")[0];
} else {
ul = $(".dc-right .contents .tab-ul")[0];
}
div = pega.util.Dom.getFirstChild(currentTabGroup);
} else {
var table = pega.util.Dom.getChildren(currentTabGroup)[0];
var tbody = pega.util.Dom.getChildren(table)[0];
var tr = pega.util.Dom.getChildren(tbody)[0];
var td = pega.util.Dom.getChildren(tr);
ul = pega.util.Dom.getChildren(td[0])[0];
div = pega.util.Dom.getChildren(td[1])[0];
}
if (tabPosition == "Right")
var children = [div, ul];
else
var children = [ul, div];
}
var childLen = children.length;
var liElement;
for (var cnt = 0; cnt < childLen; cnt++) {
if (children[cnt].nodeType == 1) {
var childDivs = pega.util.Dom.getChildren(children[cnt]);
for (var divcnt = 0; divcnt < childDivs.length; divcnt++) {
if (childDivs[divcnt].tagName == "DIV" || childDivs[divcnt].tagName == "TABLE") {
if (pega.util.Dom.getElementsById("PegaRULESErrorFlag", childDivs[divcnt])) {
if (tabPosition == "Top") {
/* HFix-8335 : if stretch tabs is checked then there is no div around ul li so adding a if condition*
if(!pega.util.Dom.hasClass(tabDiv, "stretchedTabs") && !pega.util.Dom.hasClass(tabDiv, "repeatTabbed")){
try {
var tStrCntr = pega.util.Dom.getLastChild(children[cnt - 1]);
liElement = tStrCntr.getElementsByTagName("li")[divcnt];
} catch (e) {
return 0;
}
}else{
liElement = children[0].getElementsByTagName("li")[divcnt];
}
}
else if (tabPosition == "Left" || tabPosition == "Right") {
liElement = children[0].getElementsByTagName("li")[divcnt];
} else {
liElement = children[children.length - 1].getElementsByTagName("li")[divcnt];
}
var tabLabel = liElement.getAttribute('aria-label');
var localizedValue = pega.u.d.fieldValuesList.get('TabHasErros');
tabLabel = localizedValue ? localizedValue.replace(/\{1\}/g,tabLabel) : tabLabel;
liElement.setAttribute('aria-label', tabLabel);
var newDivObj = document.createElement("div");
newDivObj.style.display = "block";
newDivObj.className = "iconErrorTabsDiv";
newDivObj.innerHTML = "<span class='iconErrorTabs' title='"+tabErrorToolTip+"' id='PegaRULESErrorFlag'/>";
var parentRow = liElement.getElementsByTagName("tr")[2];
var targetTD;
if (!parentRow) {
parentRow = liElement.getElementsByTagName("tr")[0];
}
if (!parentRow) {
parentRow = liElement.getElementsByTagName("SPAN")[0];
targetTD = parentRow.getElementsByTagName("span")[0];
} else
targetTD = parentRow.getElementsByTagName("td")[0];
if(!pega.util.Dom.hasClass(tabDiv, "repeatTabbed")){
if (targetTD.getElementsByTagName("*").length > 0)
targetTD.insertBefore(newDivObj, targetTD.getElementsByTagName("*")[0]);
else if(targetTD.appendChild)
targetTD.appendChild(newDivObj);
else {
try{ parentRow.insertBefore(newDivObj,parentRow.firstChild); }catch(e){}
}
}
if (tabWithError == "-1") {
tabWithError = divcnt;
}
}
}
}
}
}
}
/* }*
return tabWithError;
}
});
</script>
Published June 4, 2017 - 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.