Question
Asurion
GB
Last activity: 5 Nov 2017 8:08 EST
Designing UI for a page list contains more fields
Hi
In a Employee OnBoarding application, I have a section in Employee Data class which contains 20 fields. I have a scenario where multiple employees needs to be onBoarded. As the section is bigger, I dont think Repeating grid or Repeating dynamic layout can be used. Can someone please suggest a UI design approach for this?
Note: Validations needs to be performed on each employee page before next employee details are entered. I have added edit-validates on the required properties.
Thanks
Ganesh
Accepted Solution
Pegasystems Inc.
IN
Hi Ganesh,
You can use repeat grid with expand pane/embedded pane. You can have 4 to 5 important columns to be shown in readonly and once you click on expand button/ click on row you can show all the 20 fields in editable mode to modify the data. Once you click on add button you can add 20 fields data as many rows as you want.
You can have a look for sample implementation of the same at Designer Studio -> User Interface -> UI Gallery -> Grid -> Row Editing.
Please feel free to reply your thoughts if any
Thank you,
Asurion
GB
Thanks for the response cherb. Initially i thought about that option but was not convinced. May be i should do it and see. I guess UI Gallery sample more suitable when you already have data and if you need to edit them. I have arrived at an idea where I show the button as 'Enter Employee Details'. On click i render the section and collect details. On submit i add it to the list and show some important columns in a Read only grid at the bottom. Its somewhat like choosing 'master detail' in the grid of showing section with 'Embedded Elsewhere'. As i had a completely empty form, i dont want to use grid and show it with empty 5 or 6 columns first and expand or embed elsewhere on click. Let me know if you have any further thoughts. Thanks for the help.
Asurion
GB
@cherb - I have tried the expand pane and it worked fine. Thanks