Fluid Grids

What better way is there to learn than to learn by example. I wanted to find some example of different types of Fluid grids. So, here’s my exploration to find some grids that PeopleSoft built and delivers in the HCM PUM.

Finding the Grids

First, I need to find grids. The FIELDTYPE field in the PSPNLFIELD table contains the type of controls on the page. Field Type #19 is a grid.

Next, I wanted to look for grids setup with the “Div Grid Layout” grid style. That’s configured on the Use tab of the page-field properties:

Grid Style setting screenshot

That setting is stored in the database in the table PSPNLCNTRLDATA, field PTGRDLAYOUT. Here are the 12 different options:

ValueDescription
0Classic Grid Layout
1Classic Scrollable Grid Layout
2List Grid Layout (Unordered)
3Data Grid Layout
4Div Grid Layout
5Flex Grid Layout
6Classic List Grid Layout (Unordered)
7Classic List Grid Layout (Ordered)
8Classic Presentation Grid Layout
9List Grid Layout (Ordered)
10Menu Grid Layout
11Tab Set Grid Layout

So, to put that all together, here’s some SQL that will find all of the Div Grid Layouts:

SELECT A.PNLNAME, B.PNLFLDID, 
      C.PNLTYPE, C.DESCR, 
      D.PNLNAME, E.PNLGRPNAME, F.DESCR, 
      G.PORTAL_LABEL, G.PORTAL_URI_SEG1 || '.' || G.PORTAL_URI_SEG2 || '.' || G.PORTAL_URI_SEG3
FROM PSPNLCNTRLDATA A
JOIN PSPNLFIELD B
  ON A.PNLNAME = B.PNLNAME
  AND A.PNLFLDID = B.PNLFLDID
JOIN PSPNLDEFN C
  ON A.PNLNAME = C.PNLNAME
LEFT OUTER JOIN PSPNLFIELD D
  ON C.PNLNAME = D.SUBPNLNAME
LEFT OUTER JOIN PSPNLGROUP E
  ON C.PNLNAME = E.PNLNAME
  OR D.PNLNAME = E.PNLNAME
LEFT OUTER JOIN PSPNLGRPDEFN F
  ON E.PNLGRPNAME = F.PNLGRPNAME
LEFT OUTER JOIN PSPRSMDEFN G
  ON G.PORTAL_URI_SEG2 = F.PNLGRPNAME
WHERE A.PTGRDLAYOUT = 4
AND B.FIELDTYPE = 19

Fluid versus Classic

Not all of the types work with fluid. Now, that doesn’t mean you’ll get an error if you use a classic type on a fluid page. The fields just won’t work on the fluid page.

ClassicFluid
Classic Grid LayoutList Grid Layout (Unordered)
Classic Scrollable Grid LayoutData Grid Layout
Classic List Grid Layout (Unordered)Div Grid Layout
Classic List Grid Layout (Ordered)Flex Grid Layout
Classic Presentation Grid LayoutList Grid Layout (Ordered)
Menu Grid Layout
Tab Set Grid Layout

Div Grid Layout

The Div Grid Layout style turns everything into a <div> tag. Then, you need to use CSS styles to make the layout look the way you want. Here are the styles at the different levels:

  • ps_grid-div ps_grid-body
    • ps_grid-row
      • ps_grid-cell

Example: Benefits

The page BEN_SUMM_GRID_FL, component BEN_SUMM_GRID_FL has a grid that uses the Div Grid Layout. At first, I thought it was the “Benefit Plans” grid, but that uses Flex Grid Layout. It’s the two areas on the right: Contact Information and Resource Information. It has no search page, so you can just go directly to the URL.

URL: EMPLOYEE/HRMS/c/EF_BENEFITS_FL.BEN_SUMM_GRID_FL.GBL

You can navigate there by going to the employee self-service home page and then clicking on the “Benefit Details” tile. Notice the contact details on the right.

This example is unique because different fields are showing on each row. A total of three rows are displaying. From the HTML, you can see the first row/ps_grid-row is highlighted, and it’s only highlighting the phone number.

I do notice the last column (email address) uses the psc_wrap style.

Example: Element Browser Filter

Another example is the filter for the Element Browser. It’s the subpage GPSC_ELM_FLTR_SCF on the page GPSC_ELM_BRW_LFL, component GPSC_ELM_BRW_FL. You can get there with this URL.

URL: EMPLOYEE/HRMS/c/DEFINE_PAYROLL_RULES_(GBL).GPSC_ELM_BRW_FL.GBL

Navigation: Set Up HCM > Product Related > Global Payroll & Absence Mgmt > Elements > Element Browser

The checkbox is interesting. It’s added as a control in app designer:

The checkbox column uses the styles: psc_width-15em psc_padding-left2em

The description column uses the styles: psc_width-15em psc_padding-left2em

One thought on “Fluid Grids

  1. Great post! Thank you for sharing the SQL value translations.

    My favorite Div Grid examples are:

    * Homepages: The tiles represent rows in a Div grid.
    * My Team Card view: List view is a Flex Grid, but using PeopleCode, the Card button changes the grid
    * Benefit Plans (your screenshot above). The button switches between Flex grid and Div grid.

    The Flex grid should be the most common type to find in SQL. List Grid might be second (used for left-hand lists and navigation). Div and List grid are usually set through PeopleCode, so those might be harder to find through SQL.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.