Justinmind Blog

This is the second we’ll post here for JIM Prototyper. We’ll do a simple wireframe form, with real data, using the Data Master panel.

We’ll start with a blank screen.

Then we’ll create a Data Master.

JIM will open the Data Master Details screen. There, you can put all the fields you want in your form, even if some of those doesn’t appear initially. Then you choose what info you need. In this example, name, email, opt-in and comments. Note that you can choose any kind of data field you want. If it’s number, the form won’t accept text, and so on.

Then, we’ll click on the >> button, and all this data will be on our form. Click ok, and it’s done.

We drag and drop the Data Master to the screen, and JIM will put all the data fields on our canvas. Simply as that, you have the form. But now, we want it to really work. Let’s create a button.

Just drag and drop any label, and configure it to look like a button. Change it’s properties to have rounded corners, colours, as you like. Since it’s a wireframe, we won’t put anything fancy right now.

Then, we select all the form’s items, including the button. With a right-click, we can group them into form.

So, we tell JIM it’s a form that works together, including the Submit button. Right now, it’s just the wireframe of the form. But we need to simulate it, allowing the users to fill in real data and store it in our files. So, we click on the Submit button and edit it’s Events.

Let’s add an Event by clicking on the wheel with a green + symbol. It opens the Events Properties screen. We want our button to execute an action, creating a new contact item. So we choose Execute Action, and then the option New Contact Action (pretty easy, but this option only appears when you’re dealing with a Form Item).

Click ok and you have a working button.

But it won’t do anything else, so our users won’t know if it happened. We know the button will do something because it has the wheel over it.

So we’ll create a thank you screen. Simply drag the Screen 2 on our Screens panel and drop it over the button. It will add another Event to the Submit button. So, when you click, it will store another user to the form and go to Screen 2.

For testing, let’s put a Thank you note on Screen 2, and test it.

This is how the whole process goes through. You can click and enlarge to see better:

So, after simulating, when we go to the viewlist of our Data Master called Contact, we’ll see 3 sample texts that JIM Prototyper creates automatically, and the test text I’ve added in the video.

Here you see that the simulation records all input data, and you can use it later for other pages, forms, etc.

In the next tutorial, we’ll show you how to use these information on a page.

If you have any doubts or comments, drop a line via email to alex.luna@justindmin.com, twitter to @just_in_mind or comment the tutorial on our blog.

See you in the next one.

Tags: mockup, mockups, Usability, Wireframe, wireframes

This entry was posted on Tuesday, July 14th, 2009 at 6:14 pm and is filed under Tutorial, Wireframe. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.