Included tabs as Horizontal tab in Adempiere


Problem Statement

Often business users question about the user friendliness of Adempiere solution. While the question is primarily due to initial look and feel of the Adempiere with raw theme, after they start interacting with the solution they find that it is actually user friendly and VERY consistent. Once they know the basic navigation on one window, they start anticipating stuffs to come on the new windows. However, they had a constant feedback regarding depth of tab and look and feel of the included tab. Following problems were often talked about

  1. If a tab has more than one included tabs, then they appear one after another, which means that you have to keep scrolling down and keep looking for the tab of your interest
  2. User Navigation experience is not so great with vertical tabs. Specially when you have many vertical tabs, finding the information becomes challenging

Business often recommends to put these information (where items in included tabs are not depending on each other) on single tab so that the information is in front of their eyes and it is available on one click on the desired information.

Prerequisites

Configuration for tab to have more than one included tabs. For Example we have ”Business Partner Info” window, where we can all the details related to business partner i.e his/her invoices, payments, assets, orders and Shipments.

How do we do this in Adempiere?

Using standard mechanism, we have two ways to show the child elements of a window.
1) Using Included Tab
2) Defining a tab at next level

Since we want to see all the information in the single tab, let’s include the child tabs as included tab, as shown in below image:

After configuring the tabs as included tab, the window looks like below image where user can see information of the business partner:

The problem here is that the user needs to scroll down to see the invoices and other details about the business partner.

Now do some minor change in your code. In ADTabPanel.java, instead of creating a group, create a tab box and set each included tab as a tab panel in the tab box. It works even for included tab inside a included tab. The included tab would start appearing as shown in below image:

Now the navigation becomes easy and Adempiere becomes further user friendly 🙂

Summary

We saw that a minor change in Adempiere’s default behaviour has helped us to meet the exact need of the business. With that change in place, if a tab has any more than one included tab, all of them will appear in horizontal tab box, which provides better navigation. You could very well retain the included tab feature as well as introduce horizontal tab property.

I hope you have enjoyed reading this blog and it helps you in making better use of Adempiere ERP. In case you need professional assistance to be able to achieve your business need, you can always reach us by visiting our Contact Us page. If you have any specific question then feel free to post the same on our forum or the blog related to your topic of concern.

Tagged with: , , , , ,
Posted in ADempiere, EagleRP
5 comments on “Included tabs as Horizontal tab in Adempiere
  1. tommy says:

    Hi, many advanced zk programmer will easily grasp your idea but unfortunately not to the rest of us. Would be you be so kind to share with us ? Thx and btw, great stuff you have here!

  2. tungvt says:

    Help me file ADTabPanel.java. Thanks.

  3. Jemal says:

    I saw this on edgeerp online demo, it looks great. Can you give some details on how to achieve – the codding as you did on others like the Cashbook-to-Cashbook transfer… Thank you.

    • Walking Tree says:

      It is encouraging to know that you liked it. Are you saying that the comment “In ADTabPanel.java, instead of creating a group, create a tab box and set each included tab as a tab panel in the tab box”, didn’t help you to write your own logic?

      • Jemal says:

        Thank you for your valuable reply, but I am not such a good programmer for adempiere, I do not know how to manage codes of some area mainly the UI. Can you give me a working code of changes in the “ADTabPanel.java”. Thank you again.

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

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Recent Publication
%d bloggers like this: