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:

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

Value	Description
0	Classic Grid Layout
1	Classic Scrollable Grid Layout
2	List Grid Layout (Unordered)
3	Data Grid Layout
4	Div Grid Layout
5	Flex Grid Layout
6	Classic List Grid Layout (Unordered)
7	Classic List Grid Layout (Ordered)
8	Classic Presentation Grid Layout
9	List Grid Layout (Ordered)
10	Menu Grid Layout
11	Tab 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.

Classic	Fluid
Classic Grid Layout	List Grid Layout (Unordered)
Classic Scrollable Grid Layout	Data Grid Layout
Classic List Grid Layout (Unordered)	Div Grid Layout
Classic List Grid Layout (Ordered)	Flex Grid Layout
Classic Presentation Grid Layout	List 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