Learn how to prototype web and mobile apps

How to create a document template with Microsoft Word: Examples

In this tutorial, you will find examples of document templates create with Microsoft Word. 

We are going to make three examples step by step to illustrate you on how to do a few templates of your own. We’ll go from easier to not too hard on these examples:

  • Print the sitemap and all the comments from the prototype, if any.
  • Print all the screens and its comments, if any.
  • Print all the screens with its other states, if any.

Print the sitemap and all the comments from the prototype

We’ll start with a blank document and insert an image. This image will represent the site map. Below this image, we’ll put a text. This will represent the comments from this prototype. We can divide the text line in parts to represent the comment, the author and the date.


Now we put a control around the image, to indicate that this image will be substituted by the data from our prototype. Also, we have to put plain text controls around these three parts of the text and we can make it pretty as well, putting some styles and words interconnecting the controls, some title announcing the comment list, etc… The title of these controls must follow the xml hierarchy, so we have to look in the xml file for the comments node. These are the fields you can get information from the prototype. As explained before, you need to put one of these names in the controls surrounding the Word document elements.

The sitemap node is at the root of the hierarchy, so we have to put NavigationMap in the title and tag from our control. For the comments, this is the hierarchy:


So, for the author’s name, we’ll use the CommentAuthor tag, for the date, we’ll use the CommentDate and for the comment itself, we’ll use the CommentContent tag:


Once done, we have to put a rich text control around the element, which will iterate all the comments from the prototype. Seen from the hierarchy, we need to use the Comment tag, which already has the repeat modifier. This indicates, that this control is going to be repeated for all the comments the prototype has.


If you want to make it better, you can include a conditional. If there are no comments, anything inside the conditional will be printed on the final document. To do it, you need to put a rich text control around all the elements that you want not to print if there are no comments. In this case, as a main category, we must use the IncludeComments tag.


If everything goes smooth and you have comments on your prototype, you should be able to have something like this:



Print all the screens and its comments

We’ll start with a blank template and fill it with a pretty big image and a text over it. This will represent the screen image and the text will be the screen name.


Under this image, we’ll insert a line of text which will represent the comments this page has. As seen in the previous example, we can format all the text to give it orthographic sense.


Once this design is done, we’ll proceed to put controls around these elements. We’ll put an image control around the image and a plain text control for the screen name. For this case, we have to look at the xml hierarchy and find the Screens node. All the information we need to put in the controls must be children of this node.


Here we can see that we can have the screen name and image, by only taking the first two tags from Screen. So, for the screen name, we’ll use ScreenName tag and for the image, ScreenImage.


For the comment, we’ll divide the text line to represent the marker value and the comment text. So, we will insert two plain text controls around each one of the parts. This is done exactly as explained in the previous example, but in this case, the tag names must be children of Screens, so we have to look inside the hierarchy for ScreenComments and put ScreenCommentAuthorinstead of CommentAuthor, etc.


Once the controls are done, we need to put the global controls around the elements. We need to put the repetition tags around the information we want to be repeated. So, we will put a rich text control around the comments and another control around all the elements in the document that represents a screen. In this case, we’ll use the tag ScreenComment which has the repeat modifier to surround all the elements which compose a comment and the tag Screen, with also the repeat modifier, to surround all the elements that make a screen.


Now we can save the Word document in our computer and use it from Justinmind. If everything has gone well, you should have something like this:


Print all the screens with its other states

To do this, we’ll need a big image representing the screen image and another image to represent the other states. We’ll set up something like this on our document:


Now, we must put the controls around the images. We need a picture control for the screen image and another picture control for the other states image. Following the same structure in the previous examples, we’ll look for Screen tag and its children. As seen in the previous example, we’ll have the ScreenName tag and ScreenImage tag to bind the name and image from the screens from our prototype. For the other states, we’ll need to look further into the xml hierarchy and find the ScreenDynamicPanels tag:


We can see lots of similarities between the Screen tag and this, so we only have to take the ScreenDynamicPanelImage tag and surround our other image with it.


After this, we need to set the recursive controls, so we need to put a rich text control around the other states’ image and another one which includes all the elements to indicate the screen iteration. Based on the previous example and the hierarchy for the other states above these lines, we must use the ScreenDynamicPanel tag, which has the repeat modifier. That will give us all the other states from a given screen. As we use the Screen iterator, we end up having all the screens from our prototype plus the other states for each screen we have.


After this, we can generate the documentation in Justinmind and see the result:




Click here to learn about the basic steps to create a document template with Microsoft Word.