In this post we’ll only cover the mock-ups for the admin area of our module. Later on, we’ll get to the mock-ups for the public controls.
Since the contacts module we are building is pretty simple and straightforward, we really need just the mock-ups for two different screens in our admin area. One is the default screen with our contacts in the RadGrid (you could just as well use standard GridView control), while other one is the screen for inserting new or editing already existing contacts.
View Mode
The mode in which contacts are listed in the grid we’ll call View mode. Take a look at the following image to see how it should look like. Click on the thumbnail to enlarge it.
As you can see on the right side in CommandPanel we have a link that will show all contacts in case we want to cancel the filtering or we want to come back to the default screen.
Just under that we have a RadTreeView that manages different departments. One can add, delete, edit or reorder those departments. By clicking on any of the departments user gets only contacts that belong to that department.
Under that we have the ability to show only contacts that start with a particular letter.
On the right side we have a RadGrid with all the contacts. We can click on the “Add new contact” link to add a new contact. In the grid we can sort contacts, delete contacts or edit them.
Which brings us to our second screen. The one that will be used as an insert/edit screen for a particular contact.
Insert/Edit mode
In this mode we can edit or insert (depending on how we got to this screen) a particular contact. Take a look at the mock-up to see what kind of information we’ll be storing about each contact. Click on the thumbnail to enlarge it.
As you can see here we have some pretty basic contact info about each person inside of an organization. We can save that info or cancel.
And that’s all. In the posts to come we’ll be building the just described functionality, so stay tuned…