Fluid Grids

 

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