Question
Pegasystems Inc.
JP
Last activity: 26 Aug 2020 8:17 EDT
7.2 How to change read-only color of text input fields using skin rule
I wanted to change read-only color of text input fields using skin rule, however, the read-only color didn't change as exptected.
Below is my configuration, am I missing something here?
Skin rule:
Actual rendering result and CSS applied. (the color specified in the skin rule is ignored)
ã
I wanted to change read-only color of text input fields using skin rule, however, the read-only color didn't change as exptected.
Below is my configuration, am I missing something here?
Skin rule:
Actual rendering result and CSS applied. (the color specified in the skin rule is ignored)
ã
Accepted Solution
Pegasystems Inc.
JP
Just came up with a work around solution as below.
Override "UserWorkForm" section and specify custom style for css class ".dataValueRead".
Actual rendering result:
Limitations:
Not only read-only color of Text Input control, but also other controls (i.e. Datatime, Number) affected.
Pegasystems Inc.
US
Hi Chunzhi
Have you set the style on the presentation tab where you have included the textInput ?
Pegasystems Inc.
JP
Hi Krithigassree,
Thanks for your response.
Yes, there is "Standard" control format specified for the text input control.
I've also tried overriding "Standard" control format for Text Input control as below.
The font color seems working on the Skin rule edit screen, however, the font color of text inputs field doesn't change on the Review harness.
Another finding is that, although the skin rule doesn't work properly with Text Input control, it works fine with pxLabel control.
"Standard" control format for Text Input control
Hi Krithigassree,
Thanks for your response.
Yes, there is "Standard" control format specified for the text input control.
I've also tried overriding "Standard" control format for Text Input control as below.
The font color seems working on the Skin rule edit screen, however, the font color of text inputs field doesn't change on the Review harness.
Another finding is that, although the skin rule doesn't work properly with Text Input control, it works fine with pxLabel control.
"Standard" control format for Text Input control
"Standard (label for field)" control format for pxLabel control
Actual rendering result on the Review harness (Labels changed, Text input fields didn't)
Pegasystems Inc.
JP
More findings as below.
If "Supporting text" format was used then the read-only font color applies as expected.
After analyzing the generated HTML, I found that
If "Supporting text" format was used, then the generated HTML element for Text Input control is <span> tag with style specified properly.
<span data-test-id="20141009113353097127416" class="supporting_text">S-1</span>
on the other hand, if "Standard" format was used, then the generated HTML element for read-only Text Input control is <span> tag WITHOUT any style specified.
<span data-test-id="20141009113353097127416">S-1</span>
So, why "Standard" format of Text input control ignores skin rule settings?
Is this a known issue?
Pegasystems Inc.
IN
Hi Chunzhi,
The solution which Krithiga suggests will also work but in that case, you need to make the changes in all the TextInput fields manually. Ex.Open the section : pyCaseSummary and then the TextInput Property and its Presentation change the Control Format to your new setting and it will work.
As from your requirement, I think that you want all the fields in the Current Dynamic layout to be displayed as red. If you make the change at the dynamic layout level it will change for all the fields used in this.
Attaching the screenshot for the same.
Let me know if this helps, for now Formats does not have text level setting,and so inline style needs to be set.
Thanks
Gaurav
Pegasystems Inc.
JP
Hi Gaurav, thanks for your reply.
Specifying inline style for each dynamic layout may work, but it isn't my option.
That approach is not maintainable for custom sections and simply doesn't work with many OOTB sections.
Chunzhi
Accepted Solution
Pegasystems Inc.
JP
Just came up with a work around solution as below.
Override "UserWorkForm" section and specify custom style for css class ".dataValueRead".
Actual rendering result:
Limitations:
Not only read-only color of Text Input control, but also other controls (i.e. Datatime, Number) affected.