In this post, I will share a couple of approaches to change the background color in the text and input field of a form, as shown below.
1. Skin rule - update the default Field
This approach can be taken if you are okay that all fields are affected.
1-1. Open up a Skin rule. From Mixins tab, locate Field in Combinations and override it.
1-2. Enter your preferred color code in Background Color. In this example, I entered "#FFC0CB".
1-3. That's it. This modification is applied to all fields.
2. Skin rule - create a new control format
You may want to selectively change the background color rather than all fields. In that case approach #1 can't be taken. You'll need to create your own control format.
2-1. Open up a Skin rule. From Component styles tab, click Text inputs & Formatted Text. Do "Save As" Standard to define a new one.
2-2. Give a preferred name. In this example, I named it "Standard 2".
2-3. From Field Background, add additional styles. In this example, I entered pink for background-color.
2-4. With this approach, you can select which field to apply this control format. Specify "Standard 2" in the cell properties.
2-5. The only configured field is affected.
3-1. Launch DevTools and inspect the element. You'll find a string that looks similar to input#ac678a23.leftJustifyStyle. Take a note of that text.
3-2. Create a section rule. Turn off Auto-generated HTML checkbox so you can write your own code.
3-3. Write below script in the HTML source. Replace the text input#ac678a23.leftJustifyStyle with yours. Alternatively, you can write the code into UserWorkForm instead of a custom section rule. Either approach is fine.
3-4. Include this section rule to where you want to apply changes.
3-5. At this moment, the change should take effect. Make sure it works.
3-6. Now, let's conditionize it. Include <pega:when> and </pega:when> as below. You also need to specify your own When rule. You can also use "Always" (always true) and "Never" (always false) for a quick testing.