For a project I received some very unclear description for a change. After a conversation I came up with the suggestion to rebuild the UI and present a Bootstrap table with add and delete buttons. Something what developers would call a table walker.
So how did I do this?
First I had to extend the Model object of my MVC model. The table repeats rows with persons details so I added:
The Person class is simplified as followed:
On my model object I also added getters and setters and and an add method:
Then I had to build the table with the following important elements:
- a repeat control to represent my arraylist of Person objects
- input fields bounded to the Person name and email
- a button for each row to remove the Person from the arraylist
- a button to display a new blank row to register a new Person
The code is not that long or complicated. I highlighted the important parts with bleeding yellow:
In the next phase I decided to replace the input field the name field with namespickers (by first name or by last name) wrapped as Bootstrap field add-ons. Here is the rough code:
This all resulted in a nice BS table with add / remove buttons:
Now I am just waiting for customer approval. That is mostly the longest part in Rapid Application Design.