Monday, January 21, 2019

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

13 comments:

  1. This is great, and is something I teach on a regular basis. A couple of recommendations:

    1. Hiding the row action button (edit button) should consider accessibility and not hide when in accessible mode. A screen reader isn't necessarily going to identify psc_more or a row as clickable.

    2. Row Insert and Row Delete should be disabled, which may have been done in your previous example, but noting it here just in case.

    Here is my "more indicator" checklist:

    1. grid class of psc_show-actionable
    2. row insert/delete disabled
    3. "dummy field" with style class of psc_more
    4. A button with "Execute PC on row/group click"
    5. Read only "dummy" field with label turned off.

    DUMMY_FIELD is delivered, so worth using, but isn't required. We could use any field... perhaps something with a less derogatory name?

    ReplyDelete
    Replies
    1. Jim - Thanks for the tips!

      1. Absolutely agree. I missed the accessibility aspect in this post.
      2. Yes. I had the row insert/delete properties disabled already. But I did not know it was a requirement for "more indicator".

      "We could use any field... perhaps something with a less derogatory name?"
      Cannot get more Jim Marion than that! :)

      Delete
    2. Another way I used this is by adding HTML area on the grid, adding the same icon then populate the html area as a link to the image pointing to PS component/secondary page etc...this method works well in our fluid approvals now

      Delete
  2. Need help on grid Flex model. I have 250+ rows to be displayed on the grid. Grid is at level 2 and I need display few other fields from level 1 after the grid ends. I have two issue.
    1. Page vertical scroll bar appears which i would like to avoid. I mean when page appears I should be able to see level 1 fields at the bottom. Currently grid appears with vertical scroll and I need to go to the end to see level 1 fields.

    2. Next/Previous/View all options are not appearing even though invisible property is set to No
    3. How to remove count appearing as first column of the grid.

    ReplyDelete
    Replies
    1. 1. In that case, I would suggest that you set your occurs count (Grid Properties > General Tab > Occurs Count) on the grid to a low value (say 10). Also, set the 'Rows to show in Scrollable Layout' (Grid Properties > Use Tab > Grid Style > Rows to show in Scrollable Layout) to the same low value (say 10). This will limit the initial number of rows that are displayed.

      2. This is working as designed. I wrote a separate blog post on this topic which might also throw some light on item 1 above:
      https://pe0ples0ft.blogspot.com/2019/03/fluid-ui-working-with-grids-part-3.html

      3. This is the same as in Classic. Grid Properties > Label Tab > Body Area > Show Row Headings (runtime). Uncheck this setting.

      Hope this helps. Sorry for the delay in responding.

      Delete
  3. Hi,

    We have a scenario - we have implemented actionable row click on flex grid and it is working perfectly. On click of the row a secondary page appears with additional details for employee. We have a requirement to include a button (reject a transaction) on each row. On click of this button we need to take some action.
    Now the issue we are facing is when we click the button it opens the secondary page.

    ReplyDelete
  4. Do flex grids have the "Add Multiple Rows" functionality? When I check the box to enable that on a flex grid, it just removes the + sign to add a new row.

    ReplyDelete
    Replies
    1. Sorry for the delay in responding. I am not able to reproduce the issue.

      How are you getting the + sign to 'add new row' to show up in the first? If I know that, I can try to reproduce and let you know if I have any thoughts. Thanks!

      Delete
  5. is it possible to have a single grid row draggable in fluid? like you can drag the 10th row to 3rd row?
    your help is appreciated.

    ReplyDelete
  6. We are trying to add a tabbed flexi Grid and use an HTML Area on the Page, We apply sort on the first page and try to sort a column in the second tab, but the control goes to the first tab. This happens only when we add a HTML Area (No Peoplecode added wrt to the HTML Area). Any pointers to resolve the same will be of great help. Thanks!

    ReplyDelete
    Replies
    1. Sorry for the delay in responding, Sanjana. I am not sure.

      What is in the HTML area?

      Delete
  7. thank you Sasank for such amazing and helpful content !
    Just one question though, how do we make this available in accessibility mode?

    ReplyDelete
    Replies
    1. Hi - Apologies for the delay in responding. Thank you for this important question.

      Please refer:
      E-FLUID Fluid Grid Row Not Clickable When Using Accessible Layout Mode (Doc ID 2510722.1)

      In this post, I made the mistake of setting the field configured with the 'Execute PC on Row/Group Click' property as invisible on Page Activate PeopleCode.

      Delete