The New ADempiere UI
Why a new ADempiere UI?
During the lifetime of the ADempiere project, there have been two standard UI developments (Swing and Ajax ZK). There were also individual developments on other user interfaces (UI HTML, two for UI Mobile). This all has been highly expensive, both in time and resources. Synchronizing the functionality for each UI is now practically impossible.
This issue limits the growth and the implementation of improvements for any of the interfaces. Moreover, according to the document ADempiere Cloud Architecture road map , the path leading to modernizing ADempiere requires the applications be deployed in the cloud. Doing so would require a UI capable of managing much more that the current implementations would allow.
Recently, Oracle has deprecated support for Swing as cloud-based applications increase in popularity and the model of a large client application has lost favour. At the same time, the version of ZK used by ADempiere is becoming obsolete, making the migration to the latest ZK version essential if ZK continues to be used. However, the current implementation of the ZK interface a web based version of the same Swing interface, leading to a non-responsive design that is difficult to migrate to a cloud architecture. A new approach is required.
Given these problems and the challenges of the future documented in the ADempiere road map, a number of consulting companies joined together to finance a project with the goal of developing a new, modern, responsive ADempiere interface for any device, including Mobile Phones, Tablets & Desktops that could drive the move to a cloud-based application
This paper is a request for other companies and individuals to join the effort by providing financing and/or human resources to complete the work..
What work been sponsored?
- Developers and Testers : There were 4 developers involved.
- Timeline : The initial talks were carried out in August , 2018.
Studies took place in Septem ber-November, 2018.
Development of working prototype was started in September , 2018.
Prototype was finished in October, 2019.
Total months invested: 15 .
- Expenditure to Date : The amount invested summed up to $10,790 USD by Dec 2019.
Who has financed the development so far?
Starting from the initial concept, up to testing and development, the following people were involved:
- Yamel Senih ( ERPCyA )
- Eduardo López Vessena ( OpenUp )
- Víctor Pérez ( e-Evolution )
- Mario Calderón ( Systemhaus Westfalia )
What is needed to finish the work?
Finishing the work means implementing all features still missing, so that ADempiere can be used in a production environment.
A list of the necessary features can be found at the end of this document.
Based on the work already completed, we estimate the resources necessary to complete the features will be:
- Developers: 4 Developers.
- Costs/month : USD 2,000
- Estimated Time: 12 months
- Estimated expenditure to date: USD 24,000
What is the status of the project?
The project can be seen in Github ( https://github.com/adempiere/adempiere-vue/projects/1 ) and looks as follows:
How can I contribute?
Interested parties can contribute making donations, or by undertaking part of the remaining work and contributing it to the project.
If you contribute work, the ADempiere project does not require any form of assignment of the copyright in your work to any party but does require the work to be licensed under GPLv3 terms.
To make a donation, please contact the ADempiere Foundation by e-mail at firstname.lastname@example.org . We will send you instructions on making a donation through our PayPal account and also gather information from you that we can post on our website, such as your company name and logo.
The new ADempiere UI
What does the new ADempiere UI contain?
ADempiere UI is the new ADempiere interface for the reactive management of the layer in charge of user interaction. It will replace the existing UIs based on Swing and ZK. It will also supercede the mobile UI and various other partly complete Uis.
ADempiere currently has a very high dependence on a few core classes. The new UI will avoid the need for obsolete class linkages by adopting a server-side service architecture.
The development of the new ADempiere UI delivers many changes including::
- Vue as a client-side framework
It is at the forefront in terms of development trends in web interfaces of the SPA type (Single Page Application).
- gRPC as a link to remote procedure calls
gRPC is the chosen communication interface for remote procedure calls; superior by far for the serialization level and transmission speed.
gRPC uses http2 as a communication channel and is used in platforms such as Netflix as well as the entire Google cloud communications niche.
- Element-UI as a style framework
It was selected because of its simplicity and practicability.
Element-UI is one of the most used UI-KITs within Vue.
- Vue-Element-Admin as a set of development tools
For developing SPA business applications, Vue-element-Admin is a collection of different tools for the rapid development of Element-UI-based applications.
Why Vue and not React?
The main reason why Vue was preferred to ReactJs was that Vue was born in a free world and not under the governance of, nor subject to the interests of any particular company. This is not the case by ReactJs.
Style Framework Selection
After studying and realizing how reactive Vue is, a style framework was chosen.
This was accomplished by comparing the main style framework existing in Vue:
The framework finally selected was Element-UI . Reference comparison: https://www.npmtrends.com/element-ui-vs-vuecidity-vs-iview-vs-bootstrap-vue-vs-vuesax-vs-at-ui-vs-muse-ui-vs-framework7-vue-vs-vuetify
Vue-Element-Admin was chosen because it is complete and provides the features necessary for the development of any SPA application.
For references please read the following : https://panjiachen.github.io/vue-element-admin-site/guide/
The main objective of developing the new UI is to reduce the maintenance costs of the multiple UIs (Swing, ZK, HTML). Having a single responsive UI adaptable to any device will allow concentrating efforts to improve usability and functionality.
Today, the functionality of the interface cannot evolve rapidly since it is necessary to implement each new feature for all interfaces, which is very expensive.
Another important drawback is that all interfaces are built with obsolete technology, which prevents using the advantages of more modern frameworks to build a responsive application, this situation ties the evolution of the interface to the current frameworks and their limitations.
Many of the current frameworks that offer many advantages to deploy applications in the cloud could be used to improve the user interface. Today this is not possible since they are not compatible with ADempiere's license; Swing, ZK, HTML interfaces are dependent on server-side code with GPL2 licenses because the interfaces were not designed as an independent UI View of the ADempiere's core.
The independence of the User Interface implementation (also called "the View") is one of the most important issues to solve. This is why much attention has been paid to ensuring that the new ADempiere Vue interface should be totally independent of the ADempiere core or the GPL2 license.
This way the communication between the Business Logic and UI will be through gRPC, a high-speed protocol implemented by Google that enables cloud applications to become efficient.
The independence of the UI will also allow it to adopt the GPL3 licence compatible with a wide variety of other free software licenses such as Apache 2, . (See the gnu.org website for a full list of compatibilities.)
Gained Experience During Development
On Vue Home please watch the video " Why VueJS ". It allows evolution based on the needs of the project since we can move from a small scope to a very large one without the framework becoming insufficient in the future. The short learning curve and the excellent documentation allowed the formation of a a skilled team that became productive quickly.
VueJS is a Framework designed to make component-based applications: it will allow us building in a very orderly and efficient way the components required for an excellent UI for ADempiere.
VueJS has a software ecosystem that is similar to ADempiere, it provides synergies of collaboration and methodology.
Some large companies such as Facebook, Adobe, Xiaomi, Alibaba, Nintendo, etc. have adopted VueJS as their platform to develop applications for the cloud.
We believe Vue will work equally well for Adempiere. Please see the following links. 
New ADempiere UI Implemented Functionality [a]
Currently, the first version of ADempiere UI is under development.
It has passed the feasibility stage. Below a description of the implemented components now working in ADempiere:
Process Activity (History of processes per session)
Although considerable progress has been made on ADempiere UI, there are still several components needed to be incorporated:
- Dynamic Elements
- Account Combination
- Resource Assignment
- Business Partners
- Location (Address)
- Location (Warehouse)
- Preference Value
- Field Info
- Record options
- Document Workflow
- Change Log
- Sending Email
- Dashboard Content Edit
- User Favorites
- Table Lock
- Record Lock
- Record Lock Dialog
- Private Access Dialog
- Quick Entry
- Focus Sequence
- Info Forms
- Business Partners
- Material Transactions
- General Ledger
- Active Asset
- Document Archiver
- Export Records
- Report Editor
- Advanced Tabs
- User ASP
- Smart Browser
- Default Parameters
- Save Advanced Search
- Context Info
- Field Style Definition