Saturday, September 16, 2017

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

18 comments:

  1. Thanks Sasank for a nice post on fluid grid. Have you encountered a requirement to hide "Row selection indicator [single row radio button]" via peoplecode or via grid properties ?

    ReplyDelete
    Replies
    1. Yes. In my demos I turned off the 'Row Selection Indicator' using the Grid Properties. It seems to work the same as in Classic.

      Delete
    2. Thanks Sasank for the prompt response - I want to keep the 'Row Selection Indicator' on but want to disable for few rows - is it possible ? Thanks!

      Delete
    3. I have not tried that. I doubt it is possible in classic or fluid using either peoplecode or grid properties.

      Delete
    4. If a field is added to the grid that is used as the checkbox/radio button, then that field could be conditionally hidden via pcode...and could serve the same purpose.

      Delete
  2. Hi Sasank,

    Very elegant and creative solution to the problem!
    Just curious, instead of doing the page activate peoplecode. Could we use the Formfactor override on the fluid tab? Which means that you add a specific class to all of them except the small form factor.

    Thanks for sharing!

    Stefan

    ReplyDelete
    Replies
    1. Wow. Thanks Stefan for the brilliant idea. It was very simple to do that and avoid peoplecode!

      I updated the post the include this workaround as well. i also updated the github project to include a new page which has this workaround!

      Again, thank you for the great idea. :)

      Delete
  3. Nice post. Makes me wish I was going to have an opportunity to work with fluid more than the one page I created as essentially an experiment. Since we are on earlier tools and app versions (8.54,9.1) this might not be relevant - but in developing that page I did find that some phones (if they had high resolutions) would get "recognized" as a larger form factor (meaning the nice fluid characteristics of the page never activated). Just out of curiosity I wonder if you have ever come across this.

    ReplyDelete
    Replies
    1. I have not run into that particular issue but it is possible based on the user-agent certain devices may have a different form factor.

      Delete
    2. I believe there is a function to prevent this...

      Local PT_PAGE_UTILS:Utils &oPageUtils = create PT_PAGE_UTILS:Utils();
      &oPageUtils.SetDefaultViewport();

      SetDefaultViewport()...when called in PostBuild for example, enables the app to determine the actual screen size of the device from the html meta (width=device-width for example). I've found that using this helps it to recognize the factor size.

      Delete
    3. @Ricky - Yes. Thanks for sharing that. I use the same code in these examples as well. The code is the same as what I used in this post but it has moved from a funclib to an app package:
      https://pe0ples0ft.blogspot.com/2016/02/fluid-custom-development-small-form.html

      That said, the setdefaultviewport function should work irrespective the phone. I think the original question was that certain phones with high resolutions are getting recognized as larger form factors. Without the setdefaultviewport code, the form factor detection would not work on any phone. So, I am not sure if this is the cause of the problem.

      Delete
    4. Thaks for clearing that up Sasank. Makes me now wonder if the issue is that we are using setviewport to set the scale to 1:0 but with resolution this may not be the case at all times when considering CSS pixel and actual pixel...maybe window.devicePixelRatio can be used additionally to better determine viewport res or at least in those exceptions.

      Delete
    5. I agree.

      Yes - There may be a few improvements that can be done based on the comment here. With ever changing nature of devices and resolutions, it will be something that we need to report to Oracle Support for them to test and fix.

      Delete
  4. Hi Sasank, great job. Have you had chance to explore scroll areas in fluid pages? Any tips/pointers on how we can use scroll areas in fluid pages? From MOS, "Currently, scroll buttons for next and previous are not yet supported in fluid scroll areas."[sic]. I am trying to create bootstrap templates for fluid page layouts.

    ReplyDelete
    Replies
    1. I have not worked with Scroll Areas yet. I will let you know if I have any ideas.

      I see that document on MOS:
      Converting Classic PIA Components To PeopleSoft Fluid User Interface
      "Currently, scroll buttons for next and previous are not yet supported in fluid scroll areas. However the component buffer has the data and developers can implement their own mechanism to navigate the data."

      You may be able to create your own buttons for the next/previous functionality.

      Delete
    2. Agreed, a few delivered pages have a Previous and Next buttons at the top of the page (Subpage within group box on the main page) and just use a For loop on what would have been the rowset of the scroll and gathers the key data and then performs a transfer to the same data page. The next row is current row + 1 and the transfer also automatically terminates the For Loop. I guess on a small device, having a 3 level deep scroll would just look awful lol

      Delete
  5. Hi Sansank, that was a great post and was very useful for me to develop a SS page. I'm currently working on a SS page which has a scroll and a grid in it and I see the comments that Scrolls are not yet supported in Fluid. Will check for the alternatives as you mentioned.

    Also, I don't see a save button, even though I checked the "Save" property on the component. Could you please guide if we have to write any code or will be there be any setting for it?

    Thank you,

    ReplyDelete
    Replies
    1. In Fluid, the toolbar actions do not show up by default or by using the Component Toolbar settings.

      We need to add the Toolbar actions that we need for our Fluid pages manually and position then appropriately using styles (similar to any other Fluid page field). If you refer the following document (Page 7), there is a reference to PT_FOOTER_SAVEONLY subpage.
      Converting Classic PIA Components to PeopleSoft Fluid User Interface (Doc ID 1984833.1)

      For the Save button, you can simply use the PT_FOOTER_SAVEONLY subpage as described in the document.

      But if you want to position the Save button at a different location and/or add other Toolbar actions, simply create a push button with Destination (Type Tab) as Toolbar Action and select the appropriate 'Action Type' (Save, Add, etc.). Optionally you may also need to add some styling on the Fluid tab.

      Delete