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

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

Posted on April 09, 2007 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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 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.

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…

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation