Fluid UI - Working with Grids - Part 4 - Styling Stacked Grids

There were some interesting requirements posted by a reader in the following blog post.

Refer: Fluid UI - Working with Grids

Requirement 1: How to align the elements in a column to 'top' in a Stacked Grid

Let us say, we have a two Stacked columns with different number of elements/fields in each Stack as shown in example - Responsive Flex Grid with 2 Columns. As we can see in the screenshot below, the first Stacked column contains 3 fields and the second Stacked column contains 2 fields.

Since the second Stacked column only contains 2 fields and they are centered from a vertical position point of view, they don't line up with the fields in the first Stacked column.

If we want to align the fields in the second Stacked column to the top, we can achieve that with the following CSS.

I really like the nth-child() CSS3 selector. The idea is to only apply the CSS to a particular child element and not all. In our case, I only wanted to apply the CSS to the second column <td> element with "ps_grid-cell" class as shown below.

You can find more details on the nth-child() selector in the following blog post.

https://support.awesome-table.com/hc/en-us/articles/115001393209-Add-style-to-specific-columns-or-rows-in-your-Table-view

Note: The CSS provided above is added to the page using the following Page Activate PeopleCode.

Requirement 2: How to align specific fields (elements) in a Stacked Column to the Right

Let us say, we want to right justify specific fields in a Stacked Column. For example, we want to right justify the EFF_STATUS field.

We can achieve this by simply identifying the the id value (or part of it) and apply a wildcard CSS selector that contains this value as shown in the following CSS.

The wildcard for the id is required in this case due to the window and grid row numbering that is prefixed and suffixed to the record field name to generate the id value.

Requirement 3: How to align a specific Stacked Column to the Right

Let us extend the previous requirement and say that we want to align the entire second Stacked column (including the Label) to the right.

We can simply achieve this by using the following updated CSS:

Result

Project Details

All examples in this blog post were built on the project provided in Fluid UI - Working with Grids.

Fluid UI - Working with Grids - Part 3 - Where are the Previous and Next buttons?

Someone asked the question if we can use the 'Next' and 'Previous' grid buttons in Fluid similar to Classic?

In Classic, we use the 'Previous' and 'Next' buttons which are available on the Grid Navigation Bar to move past the number of rows defined in the grid 'occurs count'.

When I revisited my previous post on Fluid Grids (Part 2), I realized that I set the Grid Properties - 'Occurs Count' to 5 rows and as a result I could only see 5 rows even though there are 13 rows overall. As you can see in the demo video below, when I search/find a value that is not in the first 5 rows, I can still find them. Only issue is that I cannot freely navigate across the 13 rows.

So, how do we navigate across the various rows in the Fluid grid if we are limited by the 'Occurs Count' as shown in the above example? One way is to use, 'Unlimited Occurs Count' but that is cheating!

Lazy Scrolling

Fortunately for grids, we can enable "lazy scrolling" which will pull in the additional rows dynamically as we scroll down. This method of lazy scrolling (if you will) is aimed at improving the performance of fluid application pages.

PeopleBooks | Enabling Lazy Scrolling for Scrollable Grids

Demo of Lazy Scrolling

Environment Details

FSCM 9.2 PUM 30
PeopleTools 8.57.02

Fluid UI - Working with Grids - Part 2 - Actionable Rows

Previously, I wrote about how we can create responsive grids in Fluid. In that post, the focus was to demonstrate how we can make grids, which are one of the more complex UI elements, responsive/adaptive in Fluid. For the purposes of that demo, we simply used 'Display Only' grids.

Refer: Working with Grids

There was an interesting question which came up in the comments section of that post. How do we enable the 'Chevron' icon which makes a row 'tapable' (actionable)? We can notice this style/feature in most of the delivered pages with grids.

When I started looking into this feature, I found that the documentation is not very straight forward. Here are some useful references on this topic:

PeopleSoft Fluid UX Standards > Grids > Grid Constructs > Tappable Grid Rows and Hotspots
CSS Guide for PeopleSoft Fluid User Interface (psc_show-actionable class)

From CSS Guide for psc_show-actionable class description:
"... If this is used on a FLEX grid, it is expected that a display-only (as text) field will be used as the last field on the grid having the style psc_more applied to it. This field may or may not have content."

This post will cover how we can enable actionable rows using two examples from Part 1.

Flex Grid Layout Example

Refer Part 1: Fluid UI - Working with Grids

- First, the previous project (available on GitHub) from Part 1 was copied to my target database using the 'Copy from File' option in App Designer. Then, the component was updated to remove the pages which will not be used for this demonstration.

- The Grid (LOCATION_TBL) properties were modified to remove the 'Display Only' setting. If the Grid is 'Display Only', we cannot make it tapable/actionable. Additionally, psc_show-actionable style class was added in the Grid - Fluid Properties tab.
- Then, all the fields in the Grid were set to 'Display Only' because I wanted my Grid columns to remain 'Display Only'.

- Next a new derived/work record field (SV_FL_WRK.EDIT_BTN) was added as a Push Button/Hyperlink to represent the 'row action trigger field'. This trigger field is where we can execute appropriate action upon a click/tap. For this field to function as the trigger, we must set the 'Execute PC on row/Group Click' property on the Use tab.

- To display the chevron icon on the grid rows which is used to represent 'more' information/actionable rows, a new dummy field (SV_FL_WRK.DUMMY_FIELD) was added to the Grid and set to 'Display Only'. Additionally, the psc_more style class was added in the Fluid tab.

- Finally, we can add PeopleCode on the 'row action trigger field' to perform appropriate action. The following video is a demonstration of the sample PeopleCode event.

Responsive Flex Grid with 2 Columns Example

Refer Part 1: Fluid UI - Working with Grids

Here we will perform similar steps (as in previous example) to demonstrate another case of actionable rows in a Responsive Flex Grid with 2 Columns.

- The Grid properties were updated to set to 'Display Only' and the psc_show-actionable style class was added under the Fluid tab. Next, all the fields in the Grid were made 'Display Only' to maintain the read-only state of the Grid.

- Next, a Group Box was added to represent the stack for the 'row action trigger field' and the chevron (more) icon. Then, the 'row action trigger field' (SV_FL_WRK.EDIT_BTN) and chevron icon (SV_FL_WRK.DUMMY_FIELD) were added to the Grid.
- We can see that the PeopleCode to hide the 'row action trigger' (SV_FL_WRK.EDIT_BTN) is also added to the Page Activate event.

- Finally, we can test the Responsive Flex Grid with 2 Columns on Desktop as well as on a browser emulator masquerading as a mobile device (iPhone 6/7/8) and see how actionable rows display on various form factors.

Conditionally enable/disable the 'row action trigger button'

If we need to, we can simply enable/disable the 'row action trigger button' on specific rows conditionally using PeopleCode. In this example, we can see that the 3rd row in the grid is disabled using Page Activate PeopleCode.

Environment Details

FSCM 9.2 PUM 30
PeopleTools 8.57.02

Project Source Code

An updated project containing the objects related to this post (Part 2) is available on GitHub.

GitHub Project: https://github.com/SasankVemana/Fluid-UI-Grid-Demos-2

Installation Instructions

- Download the project (Part 2) from GitHub.
- Load the project into your database using 'Tools > Copy Project > From File...' option in App Designer. Note: DO NOT load this in a Production environment.
- You may need to add the component/pages in the project to a permission list for access.
- This project will create a folder under PeopleTools > Portal > Structure and Content > Fluid Structure and Content > Fluid Pages as follows:

- Finally add the Demo Tile (under Fluid Structure and Content > Fluid Pages > Sasank's Fluid Demos > Fluid Grid Demo) to any Homepage either via Homepage Administration (under Fluid Structure and Content > Fluid Homepages) or via User Personalization.

Demo Assumption/Dependency

- The demo pages use PS_LOCATION_TBL as the record for the grids. This table should exist in most PeopleSoft Applications (HCM, FSCM, CS) and is required for the demo to work.
- Understanding of steps completed in Part 1.

Related Posts

Fluid UI - Working with Grids

Fluid UI - Working with Grids

Grids are one of the more complex UI controls to work with in Fluid. This is because grids by design are in a tabular format which is not very conducive to responding to small form factors (particularly when there are a several columns).

I learnt a lot about grids in Fluid UI while chatting with Stefan van Liempt from CY2. He is one of the top Fluid developers and has several innovative ideas and designs. Watch his blog space here for interesting posts on Fluid (many more to come in the future)!

The following presentation on UI Controls is a must read for anyone who is starting to learn Fluid:
http://cy2.nl/wp-content/uploads/10-Fluid-UI-controls-you-should-know-about.pdf

In this post, I would like to share what I learnt from Stefan's presentation and how one of my colleagues used 'stacked columns' to create responsive grids simply by using Page Field Properties! At the end, I will share a project containing the demo pages with grids detailed in this post.

Classic Grid Layout:

To start off, I created a simple Fluid page containing a Grid with a 'Classic Grid Layout'.

Demo:

We can see that the 'Classic Grid Layout' in Fluid simply creates a grid much like in Classic UI. The grid is not responsive.

Flex Grid Layout:

Next, I changed the Grid Properties to use a 'Flex Grid Layout'.

Demo:

As we can see, the grid has a different (Fluid-like) style with the 'Flex Grid Layout' but the grid is still not responsive.

Flex Layout with Stacked Columns:

Next, I added a couple of group boxes to the grid in an effort to stack the columns and avoid the horizontal scrolling.

Demo:

By using the 'Stacked Columns' we can see how the horizontal scrolling can be avoided. This is great for a small form factor device. But the problem I have with the 'Stacked Columns' is that it is not maximizing the space available on a larger form factor. Notice all the empty space between the 'Location Details' and 'Status' columns when the grid is rendered on a desktop?

Responsive Flex Grid Layout with 2 Columns:

To avoid the empty space issue that I described in the previous section, one of my colleagues showed me a simple trick to disable column stacking on certain form factors. Simply use the 'Suppress On Form Factor' Fluid Page Field Property on the two group boxes!

Demo:

As we can see, the grid is displayed in a normal 'Flex Layout' when it is rendered on a Desktop (extra large form factor)  but is displayed with 'Stacked Columns' when it is rendered on a mobile device (small form factor).

Responsive Flex Layout with Single Column:

Just to provide another option, I wanted to show how we can use a single column display for small form factor. I simply removed the second group box so we only have one group box at the start of the grid.

Demo:

As we can see, by only using one group box in the grid, we can render the entire row in a single column format (if necessary).

Responsive Flex Layout with Labels:

Up until this point, you may have noticed that none of the stacked grid cells had any labels. The idea of using stacked grid is to not only stack the grid columns but also stack the labels. At least, that is what I have observed in some of the delivered pages. For example:

Labels cannot be taken lightly as they play a huge role in making a page accessible (consider screen readers, etc.). What if we want the labels to display beside the cell value while in stacked mode (SSF)? There is a grid field property that we can set to do just that!

This works great when the grid is stacked on a small form factor but causes redundant labels on other form factors (where we have suppressed the stacking).

To workaround this problem, I added page activate peoplecode to conditionally suppress the grid cell labels using css.

CSS - SV_GRID_CSS:

Note: LOCATION_TBL in the selector represents the page field name of the grid.

Workaround Option 2: Based on feedback from Stefan in comments below. I figured that we could simply use the Fluid properties to suppress the label in the larger form factors using the 'psc_nolabel' css. If we use this option, we don't need the page activate peoplecode with the conditional form factor logic as described above. Here is a screenshot of the Fluid property.

You might wonder how I figured that we could use 'psc_nolabel' style class? I found it in Appendix 4 (Delivered PeopleSoft Style Classes) of the following document on My Oracle Support:
Converting Classic PIA Components to PeopleSoft Fluid User Interface (Doc ID 1984833.1)
- This appendix has a table of commonly used delivered style classes

Demo:

As we can see, the cell labels appear conditionally in the stacked grid for small form factor.

Environment Details:

- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01

Project Installation Details:

To make it easier for readers, I shared a project on GitHub which contains the 5 demo pages that were created for this post.

GitHub Project: https://github.com/SasankVemana/Fluid-UI-Grid-Demos

Installation Instructions:

- Download the project from GitHub.
- Load the project into your database using 'Tools > Copy Project > From File...' option in App Designer. Note: DO NOT load this in a Production environment.
- You may need to add these pages to a permission list for access.
- This project will create a folder under PeopleTools > Portal > Structure and Content > Fluid Structure and Content > Fluid Pages as follows:

- Finally add the Demo Tile to any Homepage using the Personalization option as shown below:

Demo Assumption/Dependency:

- The demo pages use PS_LOCATION_TBL as the record for the grids. This table should exist in most PeopleSoft Applications (HCM, FSCM, CS) and is required for the demo to work.

Other Fluid References:

Jim's PeopleSoft Journal
Jim and Sarah Marion's Book - PeopleSoft PeopleTools: Mobile Application Development
PeopleBooks: http://docs.oracle.com/cd/E65859_01/fluid_ux/index.html
CY2 Fluid Blog: http://cy2.nl/category/peopletools/fluid/

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY