Support Article

Extra space appears above Next button in tabbed screen flow

SA-11486

Summary



User has designed a tabbed screen flow, where screens have fields with basic validations on them. When the fields are validated, the error messages are displayed on top of the harness, and subsequently the space above "Next" button increases.

Error Messages



Not Applicable.

Steps to Reproduce



1. Create a tabbed screen flow.
2. In the screens, have fields with validations on them (preferably server side validations).
3. When the flow is run, click the Next button and observe that the space above the button increases.




Root Cause



In Pega 7.1.7, with Internet Explorer 8 as the browser, the height of HARNESS_CONTENT div is not set to 100%. This is a regression because in Pega 7.1.6, in Internet Explorer 8 also, the height of HARNESS_CONTENT div is set to 100% and the extra white space is not added. For other browsers (Chrome, Internet Explorer 9, Internet Explorer10, Internet Explorer 11), the height of HARNESS_CONTENT div is set to 100% in both Pega 7.1.7 and Pega 7.1.6.

Resolution



Overriding the displayFormErrors API in userworkform and adding the Internet Explorer condition helps resolve this issue.

Perform the following local change:

1. Save the HTML Fragment UserWorkForm into your own ruleset (if it is not already).

2. Add the following script to UserWorkForm:


<script> 
pega.ui.Doc.prototype.displayFormErrors = function (errorText) { 
// Check for empty error messages 
if (errorText != null && errorText != "" && pega.u.d.removeEmptyLines(errorText) != "") { 
if(pega.u.d.bIsFlowInModal == true && pega.u.d.bModalDialogOpen == true){ 
pega.u.d.displayErrorsOnModal(errorText);    
}else if (pega.u.d.formErrorType == "FLOAT" && document.getElementById("FormErrorMarker_Div") != null) { 
pega.u.d.FloatDivInit(errorText); 
} else { 
pega.u.d.defaultErrorDivInit(errorText); 


// Check for error table 
else if (document.getElementById("ERRORTABLE") != null) { 
// Hide the ERRORTABLE when no error messages 
document.getElementById("ERRORTABLE").style.display = "none"; 


/*HFix-21574: Updated last condition to check for 'display' property.*/ 
if(document.getElementById("HARNESS_CONTENT")&& document.getElementById("HARNESS_BUTTONS") && document.getElementById("PEGA_HARNESS") && (document.getElementById("ERRORTABLE") && document.getElementById("ERRORTABLE").style.display != "none")) { 
if(pega.u.d.isInitialHarnessContentHeight) { 
pega.u.d.initialHarnessContentHeight = parseInt(document.getElementById("HARNESS_CONTENT").offsetHeight,10); 
pega.u.d.isInitialHarnessContentHeight = false; 

/*HFix-21574: Suffixed 'px' while setting the height.*/ 
if(pega.util.Event.isIE && pega.util.Event.isIE != 8){ 
document.getElementById("HARNESS_CONTENT").style.height=pega.u.d.initialHarnessContentHeight-(document.getElementById("PEGA_HARNESS").offsetHeight-document.getElementById("HARNESS_CONTENT").offsetHeight) + "px"; 



</script>


3. Save UserWorkForm and retest.


 
Suggest Edit

Published July 29, 2015 - Updated October 8, 2020


0% found this useful

Have a question? Get answers now.

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