Applying CSS Styling to Field Values on a PeopleSoft Fluid Page

I looked all over the internet for an easy way to set the value of a certain field on my PeopleSoft fluid page to a large red font under a specific circumstance, but I could not find any good examples.  So here is (hopefully you agree) a good example.




PeopleSoft made a major upgrade to its Tools in version 8.55 by allowing you to build responsive pages that work well in mobile browsers.  PeopleSoft refers to these as "Fluid" pages.  If you know how to build fluid pages, you can derive great benefit from them.  But a lot of things about fluid pages are less than intuitive.  One of them is how to apply styling to objects on fluid pages. 

Don't Use Field Properties Style.  It Doesn't Work. 

I have Application Designer for PeopleTools 8.55.12.  If you have a field that you want to style, it still allows you to select a style from the Field Properties style drop-down list. 

But don't use this.  It doesn't work. Hopefully in an upcoming version of Tools, PeopleSoft will either make this work or disable it when a page is designated as a fluid page.

The Oracle Fluid Documentation is Confusing.  

I'm sure the PDF document entitled "CSS Guide for PeopleSoft Fluid User Interface", published in 2015 is helpful for an overall understanding of the inner workings of PeopleSoft's implementation of fluid, but don't use it to figure out how to style something on your page. 

Maybe I was impatient, but the section in PeopleBooks on "Applying Styles" was not only not very helpful, but also was a document based on PeopleTools 8.54.  Maybe there's a better one somewhere.

Here's a Quick Explanation of How You Do It.

1. Create a Free-Form Stylesheet with the styles you want in it.  Mine is called Y_FONTS (shown below).  Right now, the only thing it has in it is a style to cause font to turn red, but you can use this as a starting point to create and apply additional font styling.  (I set the font-size in the style sheet to 40px so that it would be very obvious to me whether the style was being applied properly on my web page.)

2. Ensure that your web page knows about the style sheet by invoking it in your PeopleCode.  I specifically added the following statement into my Page Activate PeopleCode

3. At the point in your PeopleCode where you want the font in a certain record field object on your page to have the style applied to it, set the "FreeFormStyleName" of that record field object to the style that you want.  In the below example, I told my Y_MCC_CHKLST_WK.DATE_CHAR_FROM field's FreeFormStyleName to be set to "y_font_red" if the DatePart of the datetime value being evaluated is 7 days ago or sooner.

4.  Refresh your web page to see the results. 

5.  If your style does not seem to be getting applied correctly, check in your browser's Developer Tools (I use Chrome, so to get there, I right click on the field object on my web page and select "Inspect" from the pop-up menu).  The style that you applied to your record field object should be a style that you can see in the developer tools inspector.

Hopefully that helps.  Let me know what questions you have.