Default tab closing icon in ADF UI Shell is located in the top right corner. Users are not really happy about this and there is a demand to have the same positioning as you can see in the Web browsers - directly on the tab. Tab placeholders are implemented in ADF UI Shell with af:navigationPane and af:commandNavigationItem components. Component af:navigationPane supports item removal, this means we can implement tab closing functionality directly in the tab. Unfortunately, out of the box ADF UI Shell template in ADF 11g and 12c is not updated with this adjustment. I will explain how you can implement by yourself, you would need to change ADF UI Shell source code.
Sample application is packaged with ADF UI Shell source code, including adjustment for tab closing icon - MultiTaskFlowApp_v3.zip. This is how ADF UI Shell tab looks with adjusted closing icon, directly in the tab:
User can click X icon to close Employees tab, it works perfectly fine:
This adjustment is implemented directly in ADF UI Shell template source code:
Default icon for tab closing is removed, see commented code:
Component af:navigationPane is set with itemRemoval="all" property. This renders and supports tab closing directly in the tab itself:
Component af:commandNavigationItem must be set with itemListener, this allows to implement a custom listener method to close current tab:
By default, close icon becomes visible, only when user moves mouse focus on top of the tab. This could be misleading for the users. However, there is a fix with custom CSS - you can define icon for disclosed and undisclosed tab:
Sample application is packaged with ADF UI Shell source code, including adjustment for tab closing icon - MultiTaskFlowApp_v3.zip. This is how ADF UI Shell tab looks with adjusted closing icon, directly in the tab:
User can click X icon to close Employees tab, it works perfectly fine:
This adjustment is implemented directly in ADF UI Shell template source code:
Default icon for tab closing is removed, see commented code:
Component af:navigationPane is set with itemRemoval="all" property. This renders and supports tab closing directly in the tab itself:
Component af:commandNavigationItem must be set with itemListener, this allows to implement a custom listener method to close current tab:
By default, close icon becomes visible, only when user moves mouse focus on top of the tab. This could be misleading for the users. However, there is a fix with custom CSS - you can define icon for disclosed and undisclosed tab:
14 comments:
Hi Andrejus,
Thanks for posting this nice tip.
I used the same thing as you specified in the blog but the close icon become visible only when mouse hover the tab.
I tried with the sample application you given. It also behave similarly.
After creating CSS do i needed to do anything else other than configure trinidad-config.xm and trinidad-skins.xml.
Gijith.
Sample app must work, there is nothing extra. In your case, probably CSS is not picked up.
Regards,
Andrejus
Yeah.. Issue was with css. close icon is visible now.
I noticed another problem. I opened three tabs departments,employees,location. So now location tab is disclosed. Then i tried to close department tab using close icon but location tab get closed.
This is happening because we are calling this.removeCurrentTab(); in tabRemoveListener.
How can i correct this ?
Regards,
Gijith.
Hi Andrejus,
I solved the tab closing problem i mentioned above by modifying the tabRemoveListener as below. I set the selected tabIndex just before closing tab. Its working fine.
public void tabRemoveListener(ItemEvent itemEvent) {
RichCommandNavigationItem tab = (RichCommandNavigationItem)itemEvent.getComponent();
// get tab index from id
Object tabIndex = tab.getAttributes().get("tabIndex"); // NOTRANS
setSelectedTabIndex((Integer)tabIndex);
this.removeCurrentTab();
}
i hope you will let me know if any pitfalls in the above code.
Regards,
Gijith.
Hi,
Yes, correct. I know there was this issue in the sample app. However, issue is fixed in the updated app from today blog - http://andrejusb.blogspot.com/2014/06/adf-ui-shell-usability-improvement-tab.html
Thanks,
Andrejus
There is no need to set selected tab index, you could simply close tab by index. This is implemented in the updated app (plus contextual menu is supported now): http://andrejusb.blogspot.com/2014/06/adf-ui-shell-usability-improvement-tab.html
Regards,
Andrejus
Hi Andrejus,
Great article but I cannot figure it out how to skip validation when closing the tab. Do you have any suggestions? Is there a way to set Immediate property?
I have tested it just now - tab closing works fine in my sample app, even when there are empty mandatory fields (I have added Create in Departments).
Regards,
Andrejus
I cannot check right now with your sample app. However, it happens to me only if the tab is marked to be dirty. Try changing the default value of the Tab class _dirty property to true. The error popup is triggered even before the removeTab method is called and the dirty popup is shown.
This is different use case, I would need to test it.
Andrejus
Hi Andrejus,
Thanks for posting these tips. I have slightly different question on the look of the tabs, can the tabs be more square looking (rather than circular or rounded) and the tab title to be of fixed length and title overflow shown with "..".
This is a business case for us and trying to figure the best way..
Thanks,
You could have square tabs with CSS. Also you should check 11.1.1.7 or 12c, tabs are more square in these versions.
Andrejus
Hi Andrejus,
thanks foe awesome post , i want to ask you , how to change the tabs to dark blue
in the UI tempalte?
thanks in advaance
Baraa
I need to execute service method at the time of dynamic tab navigation(in this method execute only selecting the particular tab).I don't know how to do that.
Kindly guide me any one.
Post a Comment