In the first part of our series I’ve focused on overall reasons why we’ve chosen Vaadin as a next development platform for our future applications. Utilizing our almost 20 years of experience with Notes applications we’ve tried to bring “the best” of Notes platform to new web apps. So here is how we replace the main components of apps.
Desktop look and Navigation
We get quite good response from users about the basic navigation in Notes apps. By this I mean the left navigation panel, from which you can open the content to the right panel using tabs to display multiply content. The same we try to replicate to web Vaadin applications. Fortunately Vaadin includes so called layouts elements which you can use for drawing the components like views, forms, and navigations. You can see an example below, there is no HTML code behind and everything is created from Java classes.
For the navigation we use Vaadin Tree component which is quite flexible to create even complex trees. Every item can be styled and visible according users rights, so it very similar to Notes Outline.
Views
For data display we’ve implemented Grid. That is quite powerful element and lot of things can be done with that. It displays the data in the form of clickable rows and you can use the pager to browse the pages of you can display entire view using lazy loading. What else you can do with grid:
- Show/Hide columns
- Filter in columns
- Display icons, HTML elements in row
- Allow one click, double click and even keyboard shortcut to open the document
- Sort items not only by one column but also by several columns at once specifying the sort order
- Allows going through the view with arrows keys
Total column
Using so called Footer or Header, you can display the total of selected columns.
Categorization
Grid allows to do some kind of categories in the view similar to Notes but we’ve ended up with filtering fields, which can do similar job but here you don’t have to specify the order in the design and leave it up to users if he starts by selecting Year or Manager or Company to get proper data.
Searching
That is not exactly related to Vaadin but rather to the database behind which in our case is Elastic. Anyway it gives you almost endless possibilities how to search the data. You add your filtering fields, like Manager, Company. You can implement the search which is in specific date or number range and you can also use full-text search. And for that Elastic give you numbers of options:
- Which fields should be included in search
- The boost of each fields, which means that, for example, phrase found in Company Name matters more then in Body.
- Analyser for each language which is able to search for different word variation
- “Fuzzy” search which searches data using misprints
As a results you don’t have to search for the exact word, you don’t have to use AND/OR operator in your search, but the chances still are that it finds what you are looking for.
In the next part we will focus on other design elements.