How can I change background color for a required field
Hi,
In Pega out-of-the-box, if we mark a property field as "required", star is added but my customer wants to change the background color. What is the easiest way to do this?
Thanks,
***Updated by moderator: Lochan to update platform capability***
Accepted Solution
Pegasystems Inc.
US
Just found one more (easiest & best) way of doing it. We can use jquery to do it.
<script>
$(document).ready(function(){
//For applying color to the label.
$(".required-field-accessibility").parent().css({"background-color": "red"});
//For apply color to the input field
$(".required-field-accessibility").parent().parent().find( "input" ).css({"background-color": "aqua"});
});
</script>
Please refer to screen shots. Hope this helps. Please let me know in case of any issue.
Regards,
Rachit
Pegasystems Inc.
US
Hello,
There are a couple of ways in which we can do it.
1)Using Inline CSS(Not Recommended): background-color:color;
2)Using CSS in UserWorkForm/Application Skin CSS/ harness CSS file.
<style>
.propname{background-color: color;}
</style>
However, it can be taken as an enhancement, where in appication skin users can give css for the required field(like now, we have for the Error Messages).
Regards,
Rachit
Accepted Solution
Pegasystems Inc.
US
Just found one more (easiest & best) way of doing it. We can use jquery to do it.
<script>
$(document).ready(function(){
//For applying color to the label.
$(".required-field-accessibility").parent().css({"background-color": "red"});
//For apply color to the input field
$(".required-field-accessibility").parent().parent().find( "input" ).css({"background-color": "aqua"});
});
</script>
Please refer to screen shots. Hope this helps. Please let me know in case of any issue.
Regards,
Rachit
Vodafone
IN
Hi Cloe,
There is no OOTB rule to make this requirement. This seems to be purely customization.
You can write the business logic in userworkform (OOTB HTML fragment).
1. You need to find out all the required input fields in the DOM (you may use javascript querySelectorAll method).
2. querySelectorAll will return an array>> you can loop through the array and go to span element and change the background color of the required field.
Updated: 23 Jul 2018 9:58 EDT
Pegasystems Inc.
IN
Of course!
Do let us know if you wish to file an enhancement request for this requirement.
Note that once we create a request, it will have to be reviewed by the Pega Product Management team and needs to be followed up through your Pega Account Executive.
Regards,