NextGen Consulting

IT Consulting CRM BSS OSS

Implement Context Menu in Data Grid

Amdocs Smart Client Framework (ASCF) provides a rich set of functionality to allow flexible and attractive UI.

One very important requirement is to allow the user to perform an optional action on the selected row. More specifically, to allow the user select an option from a context popup menu. The context popup menu should be displayed when the user right clicks the grid.

Unfortunately, as of Amdocs CRM release 7.5.2, this visual requirement is not directly supported.

Luckily, we can add this functionality by adding several Java SWING components on top of our search grid.

In our example I shall use a plain case search grid. This form was created from scratch for simplicity..

The form bellow (X1CaseSearch) was created as a new form:

 

The Original Out of the Box Functionality

The grid contains three columns; the ‘title’ column is editable field. The out of the box functionality provides a special ‘copy paste’ context menu. This menu is displayed for editable grid columns, as shown below:

 

When right clicking on a none-editable column, a single option ‘Copy’ popup menu is displayed:

 

 

New Required Functionality

 We need to display our own customized context menu, without disrupting the above original functionality:

 

We shall override the original ‘Copy’ menu (this option can be later embedded in our new customized context menu) but leave the original ‘Copy Past’ context menu for editable columns:

 

Adding Customized Context Menu

 The following section describes how to add customized context menu to a grid:

Overview

We shall add to our search case form the following code components:

  1. Context menu form variables
         
  2. Define a Popup Listener object (form inner class).
    This object will be later attached to a native version of our search grid.
    It will intercept mouse events which are directly related with the search grid.
        
  3. Define an Action Adapter object (form inner class).
    This object will intercept menu events related with our new customized context menu.
    In other words, it will respond to the user selected context menu item.
          
  4. InitContextMenu() method to perform the following steps:
    – Create context popup menu and menu items
    – Add (attach) Action Listener to each of the menu items
    – Create popup mouse listener and attach it to our search grid
         
  5. Call InitContextMenu() in your form_Load event handler.

 

 

Code Snippets:

  1. Context menu Form variables
      

      
     
  2. Popup Listener
    Note: this is  a form inner class. It  is defined within the form class.
        

      
       
  3. Action Adapter
    Note: this is  a form inner class. It  is defined within the form class.
       

       
        
  4. InitContextMenu() Method
        

        
  5. form_Load event handler
        

 

Run and Test Context Menu

Select option A

 

 

Option-A Yields

 

 

Select option B

 

 

Option-B Yields

 

 

2 Comments »

  1. How would we embbed the original “copy” option?

    Right now, with this example, right clicking on a row does not select it, just display the contextual menu. Is there a way of selecting the row AND displaying the contextual menu with a single right click?

    thanks!

    Comment by Mike | 13/05/2011 | Reply

    • Step 1:
      ——
      Add the following to the form’s code:
      private static String MENU_ITEM_C = “Copy”;

      Step 2:
      ——-
      In InitContextMenu(), add a third menu item named ‘Copy’:

      // create third menu item for ‘Copy’
      menuItem = new JMenuItem(MENU_ITEM_C);

      // attach action listner to third menu item
      menuItem.addActionListener(new ActionAdapter(this));

      // add third menu item to conext popup menu
      ContextPopupMenu.add(menuItem);

      Step 3:
      ——–
      In the class ActionAdapter add the following
      to the method actionPerformed():

      else if (item.getText() == MENU_ITEM_C)
      {
      // option C ‘Copy’ selected
      JOptionPane.showMessageDialog(item, “Copy selected.”,

      “Message”, JOptionPane.PLAIN_MESSAGE);
      // add the code for ‘Copy’ here
      // You should know which record is selected,
      // copy relevant information from the
      // appropriate displayTDM record

      }

      Regarding your question about a way of selecting the row AND displaying the contextual menu with a single right click:
      It should be possible to perform both record selection and display context menu on a single right click. To achieve this you need to trigger the OOB UIF (Smart Client) grid row selection event on the right click event.

      However, although I do understand the need to minimize user clicks, I still don’t think this is the right approach.

      Selecting a record is always performed by left-click. You should avoid any ‘shortcuts’ which might confuse the user.

      In my humble opinion, selecting a record and invoking context menu are TWO distinctive operations which should stay separated and invoked by TWO clicks.

      Comment by Yuval R. | 13/05/2011 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: