How to restore the orange asterisk indicating required fields in CPM 6.2
Customer Process Manager (CPM) 6.2 no longer displays the orange asterisk () for required fields in work forms. Instead of displaying the orange asterisk, required fields are color-coded according to the color specified in the CPM Theme rule. The Suggested Approach explains how to restore the orange asterisk as the indicator of required fields in CPM 6.2 if business users in your enterprise prefer that visual cue.
In this example CPM 6.2 work form, the required fields are color-coded using the Pega-provided Blue Pony theme: First Name, Last Name, Security Question, Security Answer, and Communication Preference. In the pega_theme_bluepony.css stylesheet, the INPUT style DIV.Requiredfield specifies the background color
<span class="input-text"><span class="codetext">#e5f1f9</span></span> for fields that require the user to enter information. The Prefix and Middle fields are not required fields; they display with the regular white background.
However, after you implement required fields as shown in this example, be aware that if you decide to use auto-generated controls (for example, pxTextInput), the required fields of the CPM work form lose the background color-coding provided by the CPM Theme rules.
If the design of required fields illustrated in this example does not satisfy the needs of your business users, then you need to override the CPM cascading style sheet for work forms as explained in the Suggested Approach. Usually the best practice is to edit the workform_cpmbrand.css stylesheet in the Branding wizard, not manually. However, the CPM Theme embedded in the HMTL for the CPM portal will override this setting. Therefore, follow the Suggested Approach to restore the orange asterisk for required fields in CPM 6.2.
To override the new color-coding feature for required fields in CPM 6.2 work forms and restore the orange asterisk (), edit a copy of the CPM theme used by your portal, as follows:
- Find the CPM theme in use for your user portals, for example, Blue Pony.
- Open the CSS file for the auto-generated theme pega_theme_bluepony.
- Download a copy of the existing pega_theme_bluepony CSS file. You will use this later.
- Save the Theme rule into an open RuleSet and click Manually Generated.
This will create an empty CSS file.
To restore the styles from the auto-generated theme, you will use the local copy of the CSS file you downloaded in the previous step.
- Using a text editor, open the downloaded copy of the pega_theme_bluepony CSS file.
Be sure to use an editor that supports color coding and CSS validation, such as TopStyle or Notepad++, rather than PRPC or Notepad.
- At the end of the CSS file, add the following code, including the comment:
/* Display asterisk for required fields and hide setting background color for required inputs */<br />
DIV.RequiredField INPUT, DIV.RequiredField SELECT <br />
background-color:#FFFFFF;<br /><br />
.iconRequiredRight <br />
display: inline;<br />
- Optionally, to hide required field indicators in a Read-Only work form, for example in a composite portal, add the following annotated code to the CSS file:
/* The following code hides 'required' indicators in Read-Only mode, for example, in the composite portal. */
.dataLabelRead span.iconRequiredRight, .dataLabelRead span.iconRequired, .dataLabelForRead span.iconRequiredRight, .dataLabelForRead span.iconRequired display: none;
- Save the local CSS file.
- Open the pega_theme_bluepony CSS rule in PRPC. You will see that it is currently empty.
- Upload the local CSS file that you changed and save the PRPC rule.
- Check in the Theme rule and the CSS rule.
- Verify the rule change by displaying CPM Work forms with required fields.
You should see the orange asterisk () as expected before each required field.
Required field - definition
Published October 30, 2012 — Updated October 2, 2015