Introduction

PeopleSoft Fluid UI allows developers to create pages that adapt to the user’s screen.  Properly constructed, one page will meaningfully adjust to multiple different displays from a desktop to a mobile phone at runtime. 

Images are an important part of the modern User Experience (UI).   The tools for placing images on a page are those same tools we use on classic pages.   The only real difference is that we now use the “Fluid” tab on the Page Field Properties to control how that image displays.

The good news is that Fluid treats all images the same, whether they are Design Time Images or User Uploaded Images.  The delivered PeopleSoft CSS Styles can be used for both.

This paper is an introduction to applying delivered PeopleSoft styles to images on a Fluid UI Page.   We assume the reader understands the basic concepts of developing a Fluid application and using images on classic pages.  This paper is not a definitive guide for all fluid image techniques.  It will provide the basics to get you started.

PeopleSoft Fluid UI Guides

PeopleSoft Fluid User Interface Supplemental Documentation (Doc ID 1909955.1)

PeopleSoft Fluid UX Standards

PeopleSoft published the “CSS Guide for PeopleSoft Fluid User Interface” in 2015 with PeopleTools 8.54.  This guide has never been updated with the subsequent PeopleTools releases, but it does provide good insight into the delivered styles available for your pages.

Use this document and a guide, not a literal code bible.  Some of the references are obscure and contain incorrect tag syntax.  Cutting and pasting from the PDF document is also discouraged due to characters such as the dash (“-“) mis-translates in the App Designer.

Finding Code References

Page field fluid styles are stored on the PSPNLFIELDEXT table in the FFSTYLELONG field.   Search this table using SQL to find existing CSS Style Usage in delivered PeopleSoft pages.

SELECT E.PNLNAME, D.DESCR, F.RECNAME, F.FIELDNAME, E.PNLFLDID, E.FFSTYLELONG  
FROM PSPNLFIELDEXT E , PSPNLFIELD F, PSPNLDEFN D
WHERE F.PNLNAME = E.PNLNAME
AND D.PNLNAME = E.PNLNAME
AND F.PNLFLDID = E.PNLFLDID
AND E.FFSTYLELONG LIKE '%psc_invisible%';

EM Measurements

PeopleTools uses EM measurements rather than pixels for size refences in the CSS.

For example:

psc_image-height3em

The above CSS tag sets the image height at 3 EM, not pixels.

Pixel is an absolute unit of measurement that does not scale.  The value is fixed regardless of the user’s browser settings or device.

The element or “em” tag is a relative size that is adjustable to the UI.   The em size is relative to the font size of the element being styled.  If the font size of the current element is 10 pixels:

• 1 em = 10 pixels
• 1.5em = 15 pixels
• 3em = 30 pixels

The user’s browser calculates the pixel each em value of when the page renders.

An important point about the em measurement is that it could change multiple times within a page.  If font sizes change throughout the page, the em size also changes altering the size of your images.

Applying CSS Styles to an Image

Most of the delivered image styles in the Fluid UI are in the PSSTYLEDEF_FMODE stylesheet. I have pulled out several image styles from the May 2015 CSS Guide and placed them in Appendix A below along with a usage example where available.

Fluid Image styles are much like using static images in HTML page controls.   Place the image control on the page and then use the Fluid Properties tab to define the height and width parameters of the image.

Example Fluid Page

This is a simple fluid page with both a static image and a grid containing user uploaded images

App Designer Fluid Page

GroupBoxes

Generally, it’s a good idea to put all your non-grid images in groupboxes.  Apply styles to the groupbox to control where the image is going to be rendered on the page.  

Apply the styles to the page image object to control how the image will display. 

This is the groupbox containing the static image at the top of the page.

Image Object Page Controls

The basic properties control the height and width of the images in “em” measurements.   The delivered controls allow us to change the value from 1 to 15 em in integer increments.  

As a note, the {1-15} is not a CSS variable, but hardcoded options in the PSSTYLEDEF_FMODE stylesheet.  “psc_image-width3em” exists in the css, but “psc_image-width3.8em” does not.   If you require a finer control of sizes than integers, you will  have to create your own custom stylesheet.

Basic Height Controls

• psc_image-height{1‐15}em
• psc_imagemaxheight{1‐15}em
• psc_imageheightauto

Basic Width Controls

• psc_image-width{1‐15}em
• psc_imagemaxwidth{1‐15}em
• psc_imagemaxwidthauto

Most modern browsers, given only an image height or width, will display a proportionally correct image.  However, there are situations given previous style declarations where this may not work as expected.   The psc_imageheightauto and psc_imagewidthauto styles force the browser to render an image proportionately to the original image.

Skewing images

You can inadvertently skew an image if you specify width and height parameters that are not the same aspect ratio of the original image.  

This static image is a perfect circle.  However, we skewed the image by forcing unequal height and width size CSS styles.

Max Styles

Images are more easily reduced in size rather than increased.  Images enlarged past their native size often become pixelated and blurry.  The “max” styles allow us to display images at their native resolution up to a limit.   Any image that is larger than that limit is forced into the max size specified.

The psc_imagemaxheight{1‐15}em and psc_imagemaxwidth{1‐15}em allow the image to render at whatever the original size of the image up to a maximum limit.   This allows smaller images to display naturally.

This example shows the user uploaded images in the page grid to display no larger than 3em high.  The width is auto-calculated as per the height. 

Form Factor Overrides

Mobile device screen real-estate is precious. 

The “Form Factor Override” section on the page object properties Fluid tab allow us to display an image at a different size for different size screens or not at all.

Here is our desktop page rendering and our small factor image rendering of the same page:

The small form factor represents an iPhone.  

• The static equipment image at the header is eliminated.
• The user uploaded images display at half the size of the desktop.

Here are the Fluid Property Tabs that changed the rendering for the smaller form factor:

Appendix A: Delivered Fluid Image CSS

Style (From CSS Guide)	Context Category	Sub Category	Description	Example (all styles on the page field)	Page Example	Field #
ps_box-img	Image		Outermost container for an Image page element.	psc_padding-right0_5em psc_float-left ps_box-img psc_label-suppressed psc_image-width3em psc_image-height3.8em psc_padding-3px psc_border	TL_MSS_EMP_MAP_FLU	38
ps-img	Image		Actual HTML Image tag used in pushbuttons, hyperlinks, and image controls.	ps-img	[Could not find an example in use in HCM PUM 38]
psc_image‐{1‐15}em	Layout	Image	Sets width and height of an image to a specific em size, ranging from 1em to 15em incrementing by 1em.	psc_image-2em psc_display-inline psc_padding-right1em	GPEE_PSLIPTILE_FLU	65
psc_image-height{1‐15}em	Layout	Image	Sets the height of an image. Values range from 1em to 15em incremented by 1em.	psc_padding-right0_5em psc_float-left psc_image-width3em psc_image-height3.8em psc_padding-3px psc_border	HR_DIRTEAM_EP_FLU	84
psc_image-width{1‐15}em	Layout	Image	Sets the width of an image. Values range from 1em to 15em incremented by 1em.	psc_padding-right0_5em psc_float-left psc_image-width3em psc_image-height3.8em psc_padding-3px psc_border	HR_DIRTEAM_EP_FLU	84
psc_imagemaxheight{1‐15}em	Layout	Image	Sets the MAXIMUM height of an image. Values range from 1em to 15em incremented by 1em.	psc_image-maxheight2em	[Could not find an example in use in HCM PUM 38]
psc_imagemaxwidth{1‐15}em	Layout	Image	Sets the MAXIMUM width of an image. Values range from 1em to 15em incremented by 1em.	psc_image-maxwidth2em	[Could not find an example in use in HCM PUM 38]
psc_imageheightauto	Layout	Image	Sets the height of an image to be automatic. Use the size of the image assuming no other styling affects sizing	psc_image-heightauto	[Could not find an example in use in HCM PUM 38]
psc_image‐widthauto	Layout	Image	Sets the width of an image to be automatic. Use the size of the image assuming no other styling  affects sizing.	psc_image-widthauto	[Could not find an example in use in HCM PUM 38]
psc_imagemaxheightauto	Layout	Image	Sets the MAXIMUM height of an image to be automatic (no maximum height).	psc_image-maxheightauto	[Could not find an example in use in HCM PUM 38]
psc_imagemaxwidthauto	Layout	Image	Sets the MAXIMUM width of an image to be automatic (no maximum width).	psc_image-maxwidthauto	[Could not find an example in use in HCM PUM 38]
ps_box-staticimg	Static Image		Outermost container for a static image page element.	ps_box-staticimg	[Could not find an example in use in HCM PUM 38]
ps‐staticimg	Static Image		Actual image HTML for a static image. This differs from other types of image tags, which are typically styled as ps‐img.	ps-staticimg	[Could not find an example in use in HCM PUM 38]
psc_tile-box-img	Tile		Style applied to the tile image. Applied to Groupbox containing image	psc_tile_content  psc_tile_content-center psc_tile-box-img	EP_MSS_TILE_FLU	12
psc_tile_content-kpiimage	Tile		Styling for Container of a KPI image within the content area.	psc_tile_content-kpi-image	[Could not find an example in use in HCM PUM 38]
psc_tile_livedata-img	Tile		Image style within live data area.	psc_tile_livedata-img	PTGP_TILELVDAT_SBF	5
psc_tile_livedatatrendimage	Tile		Image used to show trend direction within livedata section.	psc_tile_livedata-trendimage	[Could not find an example in use in HCM PUM 38]
psc_tile-img	Tile		Basic style for tile content interior. There are two sections of a grouplet displayed in a tile. This section (psc_tile_content), which contains the main content of the tile, and then there is the psc_tile_livedata section.	psc_tile-img or psc_tile-image	EP_MSS_TILE_FLU	7
psc_backgroundtransparent	Visual		Disables any background image and sets the background color to transparent. Applied to groupbox	psc_backgroundtransparent	TL_WEEKLY_COPY_SBF	12
psc_invisible	Layout		Hiding buttons, page elements	psc_invisible psc_force-hidden	HCTS_JOB_INT1_FL	80