Question
Virtusa
IN
Last activity: 24 Mar 2017 6:02 EDT
Show last 20 character of Remaining Character in RED
Business requirement is to fixed the length of Wrap up comments to 2000 and display Remaining Character count. This functionality is achieved using the OOTB features available in Pega. But the other requirement is, when the count becomes less than, 20 character, then the text "Remaining :19 characters" must be displayed in RED.
How can we achieve this.
Accepted Solution
Northbridge
CA
Place the below-modified code in UserWorkForm for testing.
<script>
(function(){
var changeCounterColor = function(){
debugger;
if($("pyTextArea1")){
document.getElementById("pyTextArea1").addEventListener("keyup", function(){
var element = document.getElementById("pyTextArea1");
var charMaxValue = element.getAttribute("maxLength");
var tempValue = element.value.replace(/\r/g,"");
console.log("MaxValue" + charMaxValue + " tempValue" + tempValue);
if((charMaxValue - tempValue.length) < 20){
$('.textAreaCharCounter').css("color","red");
console.log("Below20" + tempValue.length);
}
else{
console.log("Above20" + tempValue.length);
$('.textAreaCharCounter').css("color","grey");
}
});
}}
}) ()
$(changeCounterColor);
</script>
If that seems to work without any issues then you may add it to any specific harness where you show the textarea with counter and remove it from userworkform.
Pegasystems Inc.
US
HI NITESHAGARWAL,
I would suggest you to use Live UI to capture the section which contains the text area (Comments) and find out the validation (remaining: x characters) attached to it. Once you find it, then check which skin / css / inline controls it and see if it can be modified to be shown as RED.
If the section is an OOTB one, please post it here. We will help you take a look into it.
Thanks,
Susan
Pegasystems Inc.
IN
Hello Nitesh,
Thanks for posting your query in PSC :)
Below are the steps I followed to modify the counter text color to red(from grey which is displayed in OOTB):
1) Navigate to Designer Studio >> User Interface >> UI Gallery >> Text Area
2) Click on the View design-time configuration.
3) Perform private edit and enable character counter for the first text area field. Save the changes.
4) Execute the use case again i.e. perform step-1. Observe that the counter text is displayed in grey.
5) Click LiveUI and observe the skin used is pyUIGallerySkin.
6) Open the skin rule, navigate to the component Text inputs & Formatted Text.
7) Under the component, click on the Standard style format. Identify the mixin used for the Character Counter text(used as Sub InActive).
8) Navigate to Mixins tab. Under combinations, click Add and enter the mixin name(say CustCounterText).
9) Set the font color as per business requirement. I had set it to red. Save the mixin.
10) Navigate to the component Text inputs & Formatted Text. Under the component, click on the Standard style format. Modify the mixin to the newly created mixin(i.e. CustCounterText).
11) Save the skin rule and execute step-1. Observe the remaining character text is displayed in red.
Hope this answers.
Hello Nitesh,
Thanks for posting your query in PSC :)
Below are the steps I followed to modify the counter text color to red(from grey which is displayed in OOTB):
1) Navigate to Designer Studio >> User Interface >> UI Gallery >> Text Area
2) Click on the View design-time configuration.
3) Perform private edit and enable character counter for the first text area field. Save the changes.
4) Execute the use case again i.e. perform step-1. Observe that the counter text is displayed in grey.
5) Click LiveUI and observe the skin used is pyUIGallerySkin.
6) Open the skin rule, navigate to the component Text inputs & Formatted Text.
7) Under the component, click on the Standard style format. Identify the mixin used for the Character Counter text(used as Sub InActive).
8) Navigate to Mixins tab. Under combinations, click Add and enter the mixin name(say CustCounterText).
9) Set the font color as per business requirement. I had set it to red. Save the mixin.
10) Navigate to the component Text inputs & Formatted Text. Under the component, click on the Standard style format. Modify the mixin to the newly created mixin(i.e. CustCounterText).
11) Save the skin rule and execute step-1. Observe the remaining character text is displayed in red.
Hope this answers.
Regards,
Rincy
Virtusa
IN
RINCYRAPPAI : Thanks for the details. But what you have mentioned will change the font color from starting itself.
Here my requirement is, initially when the remaining character show as 2000, it will be grey. When user starts writing something and remaining count is coming below 20 character, it should be displayed in RED.
Do not want it to be RED right from 2000 character.
SusanLiu : This is a customized section. And using skin i can change the color but want the color to get change when the remaining count becomes 20 character. It should be grey only when its showing 2000 character till 21st character.
Northbridge
CA
You could try something like this..
Add the below event listener only after the screen is completely loaded. Let me know if you want me to try that as well.
"pyTextArea1" in the below code should be replaced by the property name associated with the text area. This code helps only for one text area on screen
Important Note: If the screen has more than one textarea configured for 'remaining characters', then this might create problem. Also remove the log statements after testing.
document.getElementById("pyTextArea1").addEventListener("keyup", function(){
var element = document.getElementById("pyTextArea1");
var charMaxValue = element.getAttribute("maxLength");
var tempValue = element.value.replace(/\r/g,"");
console.log("MaxValue" + charMaxValue + " tempValue" + tempValue);
if((charMaxValue - tempValue.length) < 20){
$('.textAreaCharCounter').css("color","red");
console.log("Below20" + tempValue.length);
}
else{
console.log("Above20" + tempValue.length);
$('.textAreaCharCounter').css("color","grey");
}
});
I'd suggest you place the code in a specific place either harness or a section instead of userworkform, which makes it available for the entire application.
Comment here if you find any difficulties trying this.
You could try something like this..
Add the below event listener only after the screen is completely loaded. Let me know if you want me to try that as well.
"pyTextArea1" in the below code should be replaced by the property name associated with the text area. This code helps only for one text area on screen
Important Note: If the screen has more than one textarea configured for 'remaining characters', then this might create problem. Also remove the log statements after testing.
document.getElementById("pyTextArea1").addEventListener("keyup", function(){
var element = document.getElementById("pyTextArea1");
var charMaxValue = element.getAttribute("maxLength");
var tempValue = element.value.replace(/\r/g,"");
console.log("MaxValue" + charMaxValue + " tempValue" + tempValue);
if((charMaxValue - tempValue.length) < 20){
$('.textAreaCharCounter').css("color","red");
console.log("Below20" + tempValue.length);
}
else{
console.log("Above20" + tempValue.length);
$('.textAreaCharCounter').css("color","grey");
}
});
I'd suggest you place the code in a specific place either harness or a section instead of userworkform, which makes it available for the entire application.
Comment here if you find any difficulties trying this.
Fyi, there's no OOTB way of doing this. The code must somehow be tweaked to achieve this.
Accepted Solution
Northbridge
CA
Place the below-modified code in UserWorkForm for testing.
<script>
(function(){
var changeCounterColor = function(){
debugger;
if($("pyTextArea1")){
document.getElementById("pyTextArea1").addEventListener("keyup", function(){
var element = document.getElementById("pyTextArea1");
var charMaxValue = element.getAttribute("maxLength");
var tempValue = element.value.replace(/\r/g,"");
console.log("MaxValue" + charMaxValue + " tempValue" + tempValue);
if((charMaxValue - tempValue.length) < 20){
$('.textAreaCharCounter').css("color","red");
console.log("Below20" + tempValue.length);
}
else{
console.log("Above20" + tempValue.length);
$('.textAreaCharCounter').css("color","grey");
}
});
}}
}) ()
$(changeCounterColor);
</script>
If that seems to work without any issues then you may add it to any specific harness where you show the textarea with counter and remove it from userworkform.