This page contains usage instructions for Mockups for Confluence.
The main Balsamiq Mockups help page is here.
Confluence Administrators: the Mockups for Confluence Admin Guide is for you.
Creating a new mockup
There are two easy ways to add a new UI mockup to your wiki pages. The easiest way to add a UI mockup to your page is to click on the "Add UI Mockup" link found in the "Add Content" menu section of your wiki page.
This will take you directly to the Balsamiq Mockup editor. Once you are happy with your mockup, just select "Save and Close" from the Mockup menu, and you'll be asked to give it a unique ID. This is required and allows you to include more than one mockup on the same page.
Once you name your mockup you'll be taken back to Confluence, with your mockup placed at the top of the page. To move it down to your preferred location, just edit the page, find the {mockup:your_mockup_name|1} macro definition at the top, cut it, scroll down to where you want your mockup to be and paste. Save the page and you're done!
Another way to add a mockup to a page is to simply write {mockup} where you want your new mockup to be. Once you save the page you'll see this:
Clicking on the link will take you to the editor...and you know what to do from there.
Editing a mockup
If you have editing rights on the wiki page that contains a mockup, you'll see a "edit this mockup" link right under the mockup image.
Simply click on the link and you'll be taken to the editor. Click "Save and Close" or "Discard changes" to go back to Confluence.
If you select “Save and Close”, you’ll have a chance to enter an optional comment about your edit:
As the dialog says, if you leave the field blank no notifications will be sent. Otherwise your comment will appear on the Issue’s comments list, and watchers will be notified.
Deleting a mockup
To remove a mockup from a page, simply edit the page, find the appropriate {mockup} macro, delete it and save the page again. You might also want to delete the mockup's XML and PNG attachment files from the page.
Looking at a mockup's history
Each ui mockup is saved as two separate attachments, one for the PNG image and one for the XML representation of the mockup. Confluence supports versioning of attachments, and Balsamiq Mockups takes advantage of it so that you can see how your mockup evolved over time, or roll back to a previous version.
Rolling back to a previous version of a mockup
This is a bit tricky but it can be done. Go to the attachments view for your page, find the mockup you want to roll back, get the XML for the version you want to roll it back to and copy it. Now you can go back to the page, edit the mockup and import your old XML via the "Import" dialog.
Moving a mockup on a page
To move a mockup to a different location on a page you edit the page, find the {mockup:your_mockup_name|1} macro definition for the mockup you want to move, cut it, scroll down to where you want your mockup to be and paste. Save the page and you're done!
Aligning a mockup on a page
If you'd like to left-align or right-align the mockup's image relative to your page, you can add an optional third parameter to the macro. For instance {mockup:your_mockup_name|1|LEFT} will left-align (as will "left", "L", "l" and any word starting with an "l"), while {mockup:your_mockup_name|1|RIGHT} will right-align the image (as will "right", "R", "r" and any word starting with an "r").
Specifying the width of a mockup on a page
To specify the width in pixels of a mockup on a specific page, add a number as a 4th parameter to the macro. For instance, this notation:
{mockup:your_mockup_name|1|LEFT|640}
means show the mockup called your_mockup_name, version 1, left aligned and 640 pixels wide. The image's height will adjust automatically to maintain the mockup's aspect ratio.
