Building a Module for sitefinity (part 4) : Creating mock-ups

Posted on April 10, 2007. Filed under: Building a pluggable module, Projects |

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.
Contacts module > View mode

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 deparments. One can add, delete, edit or reorder those deparments. By clicking on any of the deparments 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.

Contacts module > Insert / edit mode

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…

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: