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

  1. Create multiple tabs.
  2. 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++) 
{*&nbsp;
/*var currentTabGroup = document.getElementById("PEGA_TABBED"+pega.u.d.tabsLen[ind]);*&nbsp;
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 *&nbsp;
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*&nbsp;
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; 







/* }*&nbsp;
return tabWithError; 


}); 

</script>


 

 

Published May 18, 2017 - Updated June 4, 2017

Have a question? Get answers now.

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