Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

UI control Borders are not changed dynamically

SA-24357

Summary



For the following out of the box controls, user wants to set the control's border to red whenever the control field would encounter a server-side validation error. 
  1. Text Input
  2. Date Time
  3. Autocomplete
  4. Dropdown
  5. Text Area
  6. Radio Button
  7. Checkbox


Error Messages



Not applicable.


Steps to Reproduce



1. Create a section, and include all the above controls in it.
2. Configure server side validation for each control field property.
3. During runtime, submit the form to trigger server side validations.

    

4. Observe that post the Submit event, the borders render without any "error" border.

Root Cause



The error border (post server side validation) is not actually bug, but a business requirement that many users aspire to add in their application forms. The intention kept aside, if a user wants to add border to a control to highlight the same post server side validation, code changes must be made to that control's RUF, to generate class ErrorShade in case of server-side errors. Post this, a control specific css must be added in UserWorkForm that can leverage the ErrorShade function.

Resolution



To display error border for a particular control, apply its corresponding hotfix and add its relevant css to UserWorkForm. Following is the list:
 
Control Hotfix css
Text Input HFix-27399 input[type="text"].ErrorShade
border: 1px solid red !important; 
}
Autocomplete HFix-27757 input[type="text"].ErrorShade
border: 1px solid red !important; 
}
Date Time     HFix-27761 span.ErrorShade
border:1px solid red !important; 
}
Checkbox HFix-27762 input[type="checkbox"].ErrorShade
outline:1px solid red !important; 
}
Radio Button HFix-27763 div.radioTable.ErrorShade
border: 1px solid red !important; 
}
Dropdown HFix-27879 select.ErrorShade
border : 1px solid red !important; 
Text Area HFix-27880 .TextAreaContainer .ErrorShade
border: 1px solid red !important; 
}


























Result: Above controls will render with a (red colour) border when they encounter server side validations.

    

Note: The border size and color can be modified as per the requirement.
Suggest Edit

Published June 17, 2016 - Updated October 8, 2020

Did you find this content helpful? Yes No

Have a question? Get answers now.

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

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us