Saturday, June 7, 2014

ADF UI Shell Usability Improvement - Tab Contextual Menu

In my previous post - Improving ADF UI Shell - Tab Closing Icon Adjustment, I was describing how to implement ADF UI Shell tab closing icon to be located directly on the tab itself. Today I would like to share one more usability improvement - tab contextual menu. You could implement such functionality as - 'Close', 'Close All' and 'Close Others' with contextual menu invoked from the tab.

Sample application with ADF UI Shell tab contextual menu - MultiTaskFlowApp_v4.zip. Here you can see how ADF UI Shell tab contextual menu looks:


User can select a tab and choose to 'Close Others':


All tabs, except current will be closed - quite useful:


Contextual menu is implemented for ADF UI Shell tab with Client Listener calling custom Java Script function and Client Attribute to pass current tab ID:


Custom Java Script function is calling ADF popup, displayed as menu list. This popup is implemented with ADF command menu items - representing each option from contextual menu. Action Listener for menu item is configured with JSF attribute to pass current tab ID:


Here you can see methods responsible to close current tab, all tabs and other tabs. When closing all tabs or other tabs, it is important to check and close only those currently active:


You may face a conflict between tab contextual menu and regular browser menu for contextual action (typically right click). To block browser menu for contextual action, you could use code given above:

at

8 comments:

  1. ssAugust 11, 2014 at 3:08 PM

    Very nice sample app, In sample application,
    after closing the Dynamic tab from close icon, when i am refreshing the browser the same Dynamic tab is appearing automatically .. please check the issue.

    ReplyDelete
  2. Andrej BaranovskijAugust 11, 2014 at 5:07 PM

    Which JDEV version you are using?

    Regards,
    Andrejus

    ReplyDelete
  3. AnonymousDecember 2, 2014 at 12:12 AM

    "When refreshing the browser the same Dynamic tab is appearing" happends in JDeveloper 11g R2. Is because on refreshing re executes ActionListener method "regionLaunch". Sorry about my english but this is happening to me too.

    ReplyDelete
  4. Andrej BaranovskijDecember 2, 2014 at 7:03 AM

    I will test this.

    Regards,
    Andrejus

    ReplyDelete
  5. Andrej BaranovskijDecember 8, 2014 at 3:39 PM

    You should change option to always load new tab, to reopen existing tab instead. Simply change true fall to be false in launchDepartments and other methods.

    Regards,
    Andrejus

    ReplyDelete
  6. AnonymousFebruary 27, 2015 at 11:48 PM

    Nice Article!. I am facing one issue though. while doing "Close others", if multiple tabs are dirty, the close others does not work. Any solution for this?

    The behavior should be similar to how notpad++ "close others" work. For each dirty tab the focus should go to that tab and a popup should come. If user want to go ahead with closing, then, the tab should get close and we should go further processing other tabs in the same way

    ReplyDelete
  7. Andrej BaranovskijFebruary 28, 2015 at 6:15 PM

    I think this should be possible, but it goes beyond the example in this post. I will put this into my todo list.

    Regards,
    Andrejus

    ReplyDelete
  8. UnknownDecember 19, 2015 at 7:56 PM

    Andrejus,

    There is a problem with the popup aligId in the javascript - in 12.1.3 and 12.2.1, "alignId : comp.getAbsoluteLocator()" dos not work. This can be resolved by setting clientAttribute to true for the af:commandNavigationItem, and then use "alignId : comp.getClientId()".

    Best regards,
    Vladi

    ReplyDelete