12.1.2.1.1.12.3.1. Guide to Modal & Inline Operations in Grids

In this guide, we will explore the two primary interaction modes in the grid interface: grids with modal operations and grids with inline operations.

1. Grids with Modal Operations

This interaction mode enables users to create, modify, and view data by way of the modal forms linked to the Add, Edit, and View buttons.

1. Modal Add: This button allows users to add a new item to the grid.
   • If selected, it will open a pop-up window with the ‘New Form’.
     • In this form, users can define the required details for the item.
       

       !!Users can configure the ‘New Form’ in the Control Governance tab. The ‘New Form’ is a form behavior that determines the appearance and functionality of the modal form in the web application. Please note, however, that the actual contents and design of the form are pulled from the custom form that contains the grid attributes.

   • At the bottom of the form, users will be given the following options:
     
     • Save and New: This button allows users to save the item and open a new form to create another item.
     • Save and Return: This button allows users to save the item and return to the main form.
       • Once they have saved their work and returned to the main form, users will find any new items they have created now added to the grid.

2. Modal Edit ( ): This button allows users to edit an existing item in the grid.
   • To edit an item, select the corresponding icon. (Users can also just double-click on the desired item).
     • It will open a pop-up window with the ‘Edit Form’. This form is typically a duplicate of the ‘New Form’, with the exception being that the fields are all populated with previously inputted information.
       

       !!Users can configure the ‘Edit Form’ in the Control Governance tab. The ‘Edit Form’ is a form behavior that determines the appearance and functionality of the modal form in the web application. Please note, however, that the actual contents and design of the form are pulled from the custom form that contains the grid attributes.

   • To save your changes, click on the Save and Return button at the bottom of the form.
     • Users will find the item in the grid now updated with the latest modifications.

3. Modal View ( ): This button allows users to view an item in the grid.
   • To view an item, select the corresponding icon. It will open a pop-up window with the ‘View Form’.
     • In viewing mode, users cannot make any modifications.
       

       !!Users can configure the ‘View Form’ in the Control Governance tab. The ‘View Form’ is a form behavior that determines the appearance and functionality of the modal form in the web application. Please note, however, that the actual contents and design of the form are pulled from the custom form that contains the grid attributes.

*The Delete function, commonly used in modal contexts, is an inline operation detailed in the ‘Grid with Inline Operations’ section.

2. Grids with Inline Operations

This interaction mode enables users to add and edit data directly in the grid, without opening a modal form.

1. Inline Add: This button allows users to add a new item to the grid.
   • If selected, it will create a new row within the grid into which users can input data.
     
     • To save the item, click on the Save Changes button or click outside the grid.
     • To discard the item, click on the Discard Changes button.
   • Batch Inline Add: Users can add and fill multiple rows at once before saving their changes.

2. Inline Edit: No need for a dedicated button or icon; this feature is seamlessly integrated into the grid’s user interface
   • To initiate inline editing, simply click on modifiable elements or cells in the grid.
     

     **As a visual cue, editable cells display a green outline when hovered over.

     • To save changes, click on the Save Changes button or click outside the grid.
     • To discard changes, click on the Discard Changes button.
   • Batch Inline Edit: Users can modify multiple cells and rows at once, even across different pages, before saving their changes.

3. Delete ( ) This button allows users to delete an item in the grid.
   • To delete an item, select the corresponding icon. Upon selection, the row will be highlighted in gray, and the icon will transform into the icon.
     
     • To confirm the deletion, click on the Save Changes button or click outside the grid.
     • To cancel the deletion, click on the Discard Changes button or the Undo ( ) button.
   • Batch Delete: Users can select multiple rows for deletion before confirming their changes.
     

     **In the context of batch deletion, Discard Changes is typically used to cancel multiple deletions, while Undo ( ) is used for individual deletions.