CODEWITHSUNDEEP
jsfarchitectureuser-interfaceprimefaces
perissf
perissf

Reputation: 16273

Design of PrimeFaces web application

First of all, I am aware that this question might be considered off-topic with respect to StackOverflow. In case, please advise where it could fit better inside StackExchange sites.

I need to develop a simple but complete User Interface for the following (simple) situation: handling the attendances of a number of users to a number of events. The target user of this app is a superuser, i.e. a person who need to monitor and count how many events has taken part each user, and how many users have taken part to an event. The superuser should be able to do any kind of CRUD operations on users, events, attendances.

The db structure is composed of the tables: user, event, attendance.

User has a OneToMany relationship with attendance: one user is linked to many attendances.

Event has a OneToMany relationship with attendance.

The layout I have thought is the following (using PrimeFaces widgets): a TabView with 2 Tabs: Users and Events. Each tab shows all records of its type, through DataTables with LazyLoading, filtering and sorting on each column.

Each DataTable has additional columns with buttons for Edit-Delete operations. Moreover, an additional column in the User table contains a "View Events" button for viewing the events related to that user. In a specular way, a "View Users" button is present in the Events table.

The "View Events" button opens a modal Dialog that contains another DataTable with the events related to the user.

Here comes the question: what's a reasonable way of letting the superuser update this list of events related to the selected user? Should I show all events, including the ones not related, with a column with radio buttons showing the relation? Or should I show only the related events? How will the superuser add new related events? Do I need another DataTable showing the not-yet-related events? Or should I use a PickList? If using a PickList, what happens when the list is long? I don't see pagination or filtering features in PickList component.

Upvotes: 0

Views: 1015

Answers (2)

Fallup
Fallup

Reputation: 2427

Primefaces pickList adds scroll if it doesn't fit inside the parent component. But it is not efficient to use for large datasets. Use dataTables instead. But @Namphibian already said this.

Now to the design:

Having Users and Events in separated tabs is good. If I were you I would put 3 dataTables inside each tab, e.g. for User tab I would have these:

  • All Users
  • Events related to particular User
  • All Events

Only All Users dataTable(with multiselection) would be visible on the initial open of the tab.

This table would have controll buttons in footer which will manage showing of another 2 tables, e.g.: "RelatedEvents","AssignToEvent" and "AddUser" buttons.

After clicking on "RelatedEvents" the Related Events dataTable would be shown (e.g. handle it with jQuery). In this table would be all Events related to the selected User from the All Users table. Here you can manage "Unassigning" of the User from the event, "Updating" of particular Event and also of course "Hiding" this table (jQuery again).

After clicking on "AssignToEvent" the All Events dataTable would be shown (jQuery). In this table would be all existing Events. Here you would select particular Event and then "Confirm assigning" of selected Users from All Users to selected Event. It would also contain "Hide" button.

Similar approach for Event tab. Since dataTable has many advantages like filtering, sorting, highliting of rows, etc. imo it's the best choice.

This way you will be able to let superUser to browse through all Users and edit them without having all tables visible, but also letting him manage everything within 2 clicks. (same for Event)

These are just my thoughts. Maybe it will inspire you somehow.

Upvotes: 1

Namphibian
Namphibian

Reputation: 12221

Simple rule of thumb I would apply is that for longer lists the datatable is much easier to use. You can apply filters and sorting to the tables. Picklist are generally better suited for smaller lists.

Grab a pen and papper sketch out the layouts you are thinking about. I find this is a quick way to review different layout ideas and can help to eliminate problematic designs quickly.

Upvotes: 0

Related Questions