Hello everybody!
With Napkee 1.2 I started to introduce some “invisible” features that will make your web exports more interactive.

Today I will show you how to pass parameters from one mockup to the other!

Preparing the files on Balsamiq Mockups

I created two files, a submit form with a text field and a button

and a welcome screen

and saved them as submitForm.bmml and welcome.bmml.

The first mockup is linked together with the welcome screen through the “Submit” button. Please notice the use of {username} on the welcome screen: that is a placeholder that will be substituted by what the user will input in the form.

Exporting with Napkee

Create a new project in Napkee, import the Balsamiq Mockups and click on “Export”. Yes, it’s that easy

Overview of the exported files

This is the typical exported project structure for the web project

Open the two HTML files with your favorite text editor – I personally use TextMate on my mac.
You can see in there some common areas: the css, the javascript code and then HTML at the end of the file. We will work with javascript, so in the area that is defined by

<script type="text/javascript" charset="utf-8">

Let’s move to the real hack.

Writing a bit of jQuery code

What we need to do is to pass what the user writes on the text input of the submit form

to the placeholder of the welcome screen

    {username}

On the file submitForm.html change the javascript line

showMockup('welcome.html'});

to

showMockup('welcome.html',{username: "nap2"});

this will tell to the browser to pass the value written on the field with ID nap2 to the page welcome.html.

On the file welcome.html write the new applyValue line inside the existing jQuery block

$(document).ready(function(){
      applyValue("nap5","username");

this tells the browser to change the placeholder {username} inside the element with ID nap5 to the value passed from the submit form.

See it live here: submitForm.html

Resources

You can download the BMML files, the Napkee project and the two exports (original + “hacked” one) from here.

Happy hacking!

This post is tagged