Discussion

107
Views
skr01 Member since 2013 3 posts
PEGA
Posted: September 7, 2020
Last activity: September 7, 2020

Responsive design for tables with row(inline) edit

We often come across a situation where we need to edit row details in a row. So we fallback to the below design for the same, this is a common scenario. (Observe the pencil/edit icon at the end of row).

Row inline edit, desktop table design.

Now when this is rendered on small screen or mobile devices, this will be viewed as below, which is the default responsive behaviour of any table in Pega (converting row to different blocks with name value pairs)

Table responsive behaviour by default

So this is a bad user experience for mobiles as edit/pencil icon is just hanging around, even if it has label edit, still the UX of this has good scope of improvement.

So for cases like these we should re-design the section to use RDL specific to mobile devices (using pyIsMobile when condition and "List item with image, metadata and actions" OOTB template). Then this would look like below. See how intutive and well organised the data is into primary, metadata and actions area.

Row inline edit with RDL

 

Hope this article helps, if you have any other questions around this or you had any usability concerns WRT mobile, please submit them over here.

Pega Platform 8.5 User Interface Front-End Developer Developer Knowledge Share
Share this page LinkedIn