Friday, March 29, 2019

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

9 comments:

  1. Hi Sasanka,

    Thank You for sharing this information. We have utilized this in our current work. :)

    Now, we are stuck in scenario and searching for a solution -
    >> We have 2 Grids with the same columns (Name, Employee ID and Job Title) on the same Fluid Page.
    >> They are placed one over the other.

    Now, when we see the page, the columns are not aligned, i.e. Width of Name column of one grid is different then the other.

    Can you help us in some way how we can resolve this?


    Regards,
    Sidd

    ReplyDelete
    Replies
    1. @Sidd - I am not sure why that might be the case.

      Which option are you using out of the various examples from these two posts?
      https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html
      https://pe0ples0ft.blogspot.com/2019/01/fluid-ui-working-with-grids-part-2.html

      Delete
  2. Hi Sasank,
    In a fluid page, I have a grid with Flex grid layout. I want to hide the grid lines, both vertical and horizonal. Since its a flex grid the column lines are all not visible and that's fine. But the row lines are not hidden. Is there a way to hide the row lines also?

    thanks
    Vasanthi

    ReplyDelete
    Replies
    1. @Vasanthi - So sorry for the delay in responding.

      Try removing/overriding the following CSS in PSSTYLEDEF_FMODE:
      .ps_grid-flex td.ps_grid-cell, .ps_grid-flex .ps_grid-body th.ps_grid-cell {
      border-bottom: 1px solid #ced4da;
      }

      Delete
  3. Sasank

    I have hug grids sometimes about 1000 lines

    So I set the occurs Count is set to 50 , thus the screen only shows max 50,,, and when it users scrolls lower it loads more. This helps the speedup of loading to screen ..
    But I have added button to show only errors ... (style=psc_hidden)
    Problem is ... if the data is not loaded onto the Page yet I see the first 50 rec, and the errors maybe further down in the grid ,the grid shows nothing because the error is somewhere below..
    I know the data is loaded into component but not on screen, So How do I load all data so all errors will show.

    ReplyDelete
    Replies
    1. I wonder if you can write some peoplecode on the button event to filter and send back only those errors with errors to the client (browser)?

      Delete
  4. Hi.. is there anyway out of freezing certain columns in fluid grid, like it’s feasible for scrollable grid layout grid in classic mode.

    ReplyDelete
    Replies
    1. Hi Binod - Good question! I have not tried that before. I will let you know if I find any options.

      Delete
    2. Hi Sasank, did you get chance to try freezing columns in flex grid. Am also looking for this solution. TIA

      Delete