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

45 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
    2. Hello, I'm working on the same kind of requirement. I see scroll area seems to be working in Fluids, just that you wont see previous or next buttons.

      When we do a Save using toolbar actions, it would only save the level1 record and not the level2 records which is working good in classic page but not in Fluid. Is there any difference why the level 2 record is not being saved? Should we need to adjust the group boxes is any specific design to achieve this?

      Thanks!
      Paul.

      Delete
  6. thank you so much for that.
    BTW: Is there a way to display an html area on a fluid page? Seems fluid pages ignore html areays.

    ReplyDelete
    Replies
    1. HTML areas are generally discouraged in Fluid (due to a variety of reasons) but they should work.

      Delete
    2. I have used HTML area successfully on fluid pages, my HTML consisted of JavaScript, you will run in to partial page refresh issues if content on the fluid page is dynamic

      Delete
    3. That is true. Whenever we place javascript in a HTMLAREA we need to be extra careful about the effect any server trips on the page would have on the javascript.

      Here are some related posts where I have discussed this topic:
      https://pe0ples0ft.blogspot.com/2017/11/recaptcha-in-peoplesoft-pia-pages.html
      https://pe0ples0ft.blogspot.com/2017/11/pt-8-56-htmlarea-respond-only-once.html

      Delete
  7. Hello Shashank, thank for the post, I have been working on fluid grids for a while now by styling grids with CSS and modifying look and feel...one thing I did not figure out is why is find button missing on the grid, I have 100 rows on a side page1 to filter the data on the main page, the data on main page changes based on the user selected values on the side page. So user doesn't want to scroll through 100 rows to find what he is looking for also it is ideal to simply type and find the value...but there is no find button on the grid rendered in fluid mode....I also observed filter image on one of the grids in your post(Responsive Flex Layout with Labels) not sure how to get this.

    ReplyDelete
    Replies
    1. Sorry for the delay in responding.

      Filter and search functionality is not available in Fluid by default. We need to develop it ourselves.

      You can review the following in a HCM PUM Image:
      Manager Self Service (Homepage) > Team Performance (Tile)
      Page: EP_MSS_CURFLU_SBF

      This has the filter logic built into the page. You can mimic this functionality in your page.

      Delete
    2. Yep, I added a work record with descr edit box on top of the grid, took advantage of type a head functionality and populated it from lookup on top of the grid, works better then find actually.

      Added following code in field change of the descr field if some one is looking for similar solution , here is the sample code:

      Local Rowset &DeptUpdChart;

      &DeptUpdChart = GetLevel0()(1).GetRowset(Scroll.H_SCMDB_DPT_FLT);
      For &i = 1 To &DeptUpdChart.ActiveRowCount
      If H_SCM_DB_WRK.DESCR.Value = &DeptUpdChart(&i).H_SCMDB_DPT_FLT.DESCR.Value Then
      &DeptUpdChart(&i).H_SCM_DB_WRK.H_BY_DEPT_CHECK.Value = "Y";
      Exit;
      End-If;
      End-For;

      Make work filed interactive and it should work.

      Delete
    3. Awesome idea. Well done. Thank you for sharing!

      Yes. I agree that it is better than the filter functionality which opens another modal window.

      Delete
  8. Shashank, thank you for the walk through. I imported the project into PUM25 instance, it cant seem to navigate through pages 4,5,6,7. Are there any additional steps after importing the project?

    ReplyDelete
    Replies
    1. Can you confirm if you can see all the pages in app designer?

      Also, in the instructions (refer link below) there is a demo video at the end on how to add this tile to a homepage for navigation purposes:
      https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html#install_instructions

      Let me know if you are still running into issues.

      Delete
  9. Hi Sasank, I have a question with respect to the Interactive grids that you have mentioned about.

    Assuming I have a 6 column grid and I'm adding a group box for every three columns to be displayed as a two column table in mobile view. Now in the actual grid, I have two columns which are of hyperlinks which would take me to another page when clicked on them (On desktop mode).

    If there a way to achieve this in mobile view as well ?

    your comments would be much appreciated. Thanks in advance.

    ReplyDelete
    Replies
    1. I don't see why not. The link on the column is similar to any other data element in a grid column.

      What happens on the click event should not be dependent on the grid.

      Delete
  10. Dear Sasank,

    With respect to your example that shows column name's for each item inside each row of a Stacked grid. It Appears that we have to select the check box in the properties to enable that in the first place.
    In my case, I have a stacked grid (inside a subpage) in which the column headings are getting populated by default. What could be the reason ? and how to avoid the headings inside the stacked cells.

    Also I noticed that what ever alignment options that I'm giving for the group box tends to be happening inside each cell of each row and not at the Grid heading level in which I'm expecting it to happen.

    Can you please share your thoughts on both the issues ?

    Thanks in advance.

    ReplyDelete
    Replies
    1. Disable row heading and column headings in grid properties

      Delete
    2. Thanks for your response Srinivas. I think I hadn't mentioned the issue clear. The grid heading is populated for each row of data inside the grid. Now it can be enabled and disables via grid column properties, but, for me it's appearing by default which I don't want.

      Thoughts ?

      Thanks in advance.

      Delete
    3. As for the Gird Properties > Label (Tab) Settings, I disabled 'Show Row Headings (runtime) only. The 'Show Column Headings (runtime)' is enabled. This is how the Grid Properties are set in all my examples above.

      As for the repetition of the grid column headings in every row, I specifically talk about this at the end of this blog where I provided two options to workaround this problem.
      Refer: https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html#7a


      Delete
    4. I have figured out the problem and sharing the result so that it would be of help to others.

      Problem - When using a stacked grid in fluid, the grid heading appears in each row of data by default (without adding/removing any property).

      Solution - It's because of the group box type that has been added to stack the grid. Change it's type to layout only and this would be resolved.

      Hope this helps !

      Delete
    5. Thanks for sharing!

      Yes - That groupboxes for stacking must be layout only. Generally speaking any groupbox added to Fluid for the purposes of styling/layout must be set to layout only.

      Also, I did not mention this in text but you can see this 'layout only' setting in the demo video here:
      https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html#3

      Thanks again for clarifying. I am sure this will be useful for others going through these demos!

      Delete
  11. Hello Sasank,

    Approaching you for another conversation with stacked grids.

    When I Stack and grid let's say a 4 column grid into two, two column grids for mobile. When the grid doesn't have data it still shows the grid heading inside the first row.

    Is there a way to bypass this scenario in such a way that when no data is present for grid, grid should not display the heading twice.

    PS : I have tried the grid and group level properties and none seems to be fruitful.

    Your help on this would be much appreciated. Thanks in advance !

    ReplyDelete
    Replies
    1. I don't understand why the Grid Header is repeating for you. Can you please share a screenshot of the problem? You could use any online image sharing tools like https://snag.gy/

      Delete
    2. I have added two grids in the image from the below URL as an attempt to explain the problem. "https://snag.gy/jspfeD.jpg"

      Notice the stacked grid and the heading appearing as data in the first row of grid when grid actually doesn't have any data.

      Thanks in advance !

      Delete
    3. So, is this happening only in the second stacked column (3,4)? You may want to see how your groupbox is setup (i.e. properties) in comparison with the first stacked column (1,2).

      FWIW, I have not run into this problem. You can that my stacked column header does not repeat even if there is no data in the grid.
      With Data: https://snag.gy/3nDuPl.jpg
      Without Data: https://snag.gy/UsrFSm.jpg

      My project is on GitHub in case you want to take a look:
      https://github.com/SasankVemana/Fluid-UI-Grid-Demos

      Delete
    4. Also, double-check if the second groupbox is setup as "Layout Only" (Group Box Properties > Fluid (Tab) > Group Box Type.

      Delete
    5. In-deed that was a rookie mistake from my end. Didn't change the group box layout in all the group boxes that I used for stacking. The issue was resolved once that is changed !

      Many Thanks!!

      Delete
    6. Good to hear! It is not a rookie mistake, quite a common one that everyone ignores during Fluid development. I continue to do this! :)

      Delete
  12. Hi Sasank,

    Good stuff. Thanks for posting!

    One note ... you mention using psc_nolabel style class to suppress the label. However, the CSS Guide for PeopleSoft Fluid User Interface shows psc_nolabel as "Do Not Use" and recommends use of psc_label‐hide or psc_labelnone instead.

    Regards,
    Tom

    ReplyDelete