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:
|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 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
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.
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.
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