Selection inside gridField / UI Design

Question

Who can please help with ideas on how to implement Selection inside gridField gridColumn? The Mockup of what I want to implement in a UI is attached. Thank you in advance.

Mathieu Drouin · Answer

The only way to achieve this with a grid field AFAIK is to display the detail of the selection either to the side or bottom of the grid. See here for more details: docs.appian.com/.../grid-with-detail-pattern.html 
 If you want the dropdown to be part of the row, I suggest you use an editable grid (gridLayout). docs.appian.com/.../recipe-add-edit-and-remove-data-in-an-inline-editable-grid.html

Vinita Jain · Answer

Hi , 
 Using Paging grid you can set a selectable parameter true and based on that your whole row will be selected , here is the grid tutorial. 
 Grid Tutorial - Appian 21.1 
 For your requirement using editable grid to control selection for one column is a best way. You can use a image or a button or link next to the column values to highlight your selection. 
 Thanks 
 Vinita

Vinita Jain · Answer

Hello , 
 In the latest versions of Appian you can directly fetch record on a paging grid on the data parameter and use the data across the grid you will not even need to call your query in local variable but if you are on an older version you can fetch your data in a local variable through query entity and use that local variable in the data parameter. 
 Regards, 
 Vinita

Mike Schmitt · Answer

I agree with most of the above answers, but I figured I'd chip in with my own take from a high-level perspective. In a paging grid, depending on the complexity of the change you want to be able to make to a particular row, my favorite approach is often to make an icon-width column (usually on the far right) showing just an "edit" icon. The user can click this, and the dynamic link captures certain data about that row (again, dependent on what change(s) you'd like to make) into local variable(s), and then a small section with editable field(s) can be set to appear right below the grid, where the user can make the needed change(s) and has i.e. "Save" and "Cancel" buttons. I also like setting it such that if one row is being edited, the edit links for other rows become disabled temporarily, and perhaps even the icon for the row-being-edited can be changed to something else, just for visual aid to the user. 
 There are other ways, of course - if it's just a simple status change, you could make clicking on the icon/link change data directly, though that's harder to validate and harder to undo if a user mis-clicks.

Selection inside gridField / UI Design

Top Replies