X

The Oracle APEX blog is your source for APEX news, technical tips and strategic direction

Customizing Interactive Grid to improve your user's productivity

Monica Godoy
Principal Product Manager

It's well known that the keyboard can be an efficient input method, requiring less movement and effort than a mouse. If you're entering data into a form and the mouse is required to move focus between fields, then efficiency is reduced when you need to frequently switch between the keyboard and mouse. To improve productivity, your application form should let the user accomplish some tasks by hitting a combination of two or three keys at the same time.  In APEX, users can fill a form using only the keyboard by hitting the Tab key to move focus between fields. But, what about if your users are working with an Interactive Grid? Is it possible to add, delete or update rows in an Interactive Grid using just the keyboard? The answer is, yes! Let's try it!

To accomplish this, you need to become familiar with the predefined actions included in the Interactive Grid widget, such as, delete, row-add-row or save. This widget introduced with APEX version 18.2, is a modern component combining powerful reporting features with easy multi-row editing.

What Do You Need?

  1. An Editable Interactive Grid.
  2. A list of actions you wish to use with the keyboard. In this example, I'm going to use the following actions and shortcuts but keep in mind that you can define your particular shortcut.
Action Description Customized
Shortcut
row-add-row Insert a row straight after the current row Alt + A
row-delete Delete the current row Alt + D
save Save the current data changes. Note: Interactive Grid must be editable Alt + S
refresh Refresh the Interactive Grid region Alt + R
reset-report Reset the current report settings Alt + C
focus Focus on Interactive Grid's Search Bar. This action is not included in the widget. Alt + F


Technical Enhancements

When the page is rendered, it's easier for users if the cursor focus is already on the Interactive Grid. This way, users can easily add/ update/delete rows by entering the pre-defined shortcuts. Follow these steps to focus the cursor in your Interactive Grid:

  1. Navigate to your Interactive Grid Page
  2. For page properties, navigate to Navigation Region.
  3. For Cursor Focus, select First item on page.

Next, in case that your Interactive Grid includes display-only columns, it would be better to skip those columns when you're editing the grid. If users enter Tab or Shift-Tab, it can skip over those columns and focus on columns which aren't read-only. You can use the skipReadonlyCells advanced grid option.

Keep in mind that the focus action described in the above table is not included in the widget, so you will need to create this particular action and then add the shortcut to trigger the focus action.

Follow these steps to skip read-only columns, create the focus action, and add your customized shortcuts for every action defined in the table. 

  1. Navigate to the attributes of your Interactive Grid.
  2. For JavaScript Initialization Code, enter the following code:
function( options ) {
    //Tab and Shift-Tab will skip over cells that are read-only
    options.defaultGridViewOptions = {  
        skipReadonlyCells: true  
    };  
    
    options.initActions = function( actions ) {                
        //Action to focus on the Search Bar
        actions.add( {
            name: "focus",
            label: "focus",
            action: function( event, focusElement ) {
               var ig$ = $(actions.context);
               ig$.interactiveGrid("focus");
               return true;               
            }
        });
        
        // Add a keyboard shortcut to Add a Row
        actions.lookup( "row-add-row" ).shortcut = "Alt+A";
        actions.update( "row-add-row" );
        
        // Add a keyboard shortcut to Delete a Row
        actions.lookup( "row-delete" ).shortcut = "Alt+D";
        actions.update( "row-delete" );      
        
        // Add a keyboard shortcut to Save the changes
        actions.lookup( "save" ).shortcut = "Alt+S";
        actions.update( "save" );          
        
        // Add a keyboard shortcut to refresh the IG
        actions.lookup( "refresh" ).shortcut = "Alt+R";
        actions.update( "refresh" );   
        
        // Add a keyboard shortcut to focus on the Search Bar
        actions.lookup( "focus" ).shortcut = "Alt+F";
        actions.update( "focus" );    
        
        // Add a keyboard shortcut to reset the IG
        actions.lookup( "reset-report" ).shortcut = "Alt+C";
        actions.update( "reset-report" );                  

        }        
    return options;
}        

Note: You can define your own keyboard shortcut which best suit your users, keeping in mind the operating system and language.

There are other keyboard shortcuts already implemented in the Interactive Grid, such as:

Description Shortcut
To move through the IG using the arrows keys Esc
Edit the column Enter / F2


Review how to work with an Interactive Grid using all the shortcuts:

Finally, if you want to include these enhancements in your application, you don't need to copy and paste the same code multiple times for all the Interactive Grids in your application. John Snyders from the APEX Product Development Team has published a blog post which shows how to place code in a static application JavaScript file loaded for all pages. To learn more, visit: How to hack APEX Interactive Grid Part 1.

The APEX version used in this example is version 20.1.0.00.13.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.