In Pidoco you can easily edit elements using a specific notation, which is actually similar to what is commonly referred to as the wiki syntax. You can find this notation in stencils like the Table, Menu or Tree view as well as in the (un)ordered List. This post explains how to create and configure these elements. Here is how it goes …
1. In General
In Pidoco, stencils that contain textual content (e.g. menu, tree view, lists or even simple text) can be edited in order to alter that content and replace it with your content. To edit an element double-click on it and a simple text editor will open. But there’s more: When editing the content of certain elements in Pidoco, the Pidoco syntax allows you to tell Pidoco how you want the content to appear in your prototypes. For example, you can set formatting options by adding certain characters or symbols to an element’s content. The following conventions apply for all stencils that offer this option:
- Adding entries: Each line in the text field represents one entry and starts out with a specific symbol, e.g. an asterisk (*) or a hash character (#).
- Structuring entries: For stencils whose entries possess a hierarchical structure, the number of symbols marks the hierarchical level of the entry, e.g. one symbol stands for a top-level entry, two for a sub-level entry or three for a sub-sub-level entry etc. To add an entry, simply go to a new line and type your entry, preceeded by the appropriate number of symbols and a space.
- Linking entries to a prototype page: Links are marked by brackets around the linked entry ([]) and the ID or URL of the link target immedialy following the opening bracket (Example: * [page0001 First Entry]). In this example, “page0001” is the page ID and “First Entry” the actual entry that will be visible in the prototype. Note: There’s no space between the opening bracket and the link target. Let’s assume you have already typed up the various entries of the stencil: To link an entry, highlight the entire entry you wish to link up and choose the target page from the dropdown menu shown in the text editor.
- Linking entries to an external URL: The syntax is the same as for a link to a prototype page, but instead of the page ID, the external URL is written after the opening bracket.
2. Notation examples
a) Menu
In the Menu stencil each line represents one specific entry marked by one or more asterisks, depending on the level in the hierarchy. Only the top-level entries (one asterisk) are visible in the prototype, until the user opens the menu to display lower level entries. To add a new entry, go to the respective line, enter the asterisk(s) at the beginning, add a space character and type in the text of the entry, e. g. * Home. To link to a page within the prototype highlight the entire line and choose the desired target page from the drowdown of the text editor, for instance [page3243 Home]. To link up external content, paste the URL instead of the page ID, e.g. *** [https://pidoco.com/en/help/doc/stencil Stencil].
Notation specific for the menu stencil (including internal and external links)
Hint: Don’t forget the space character between the asterisk(s) and the opening bracket and between the page ID/external link and the name of the target page. If you cannot see all of menu entries in the menu, try to resize the stencil as it may require more space.
The formatted menu stencil (in the Simulation View)
b) Table
The Table stencil contains data structured in rows and columns. As usual, each row equals one line of text. The columns are marked by vertical lines | as a separator (also known as “pipes”). If you add a new row, remember that each row starts and ends with a vertical line that together represent the outer border of the table. To add a column, use the pipes and don’t forget to leave at least one empty space before and after each pipe, e.g. | Rank | Page | Impressions |. Each cell in the table therefore has an “opening pipe” and a “closing pipe”. Hint: Rows can have different numbers of cell entries, but the number of columns in the table is determined by the row with the highest number of cell entries.
You can also format the font style and alignment of the table entries. To display an entry in bold enclose the text with an asterisk (*), e.g. | *Rank* | *Page* | * Impressions* |. To align the text, enter one of the following letters directly following the opening pipe of a given cell without a space: c. to center the text, l. to align left or r. to align right.
Example: |c. 1 |l. Home |r. 1,333,000 |.
To link a cell entry to a page within the prototype, select the entry and choose the target page from the dropdown of the text editor, e.g. |r. [page3243 Home] |. To link to external content, insert the URL instead of a page ID.
Example: [https://pidoco.com/en/help/doc/stencil Stencil].
Notation specific for the table stencil (including formatinng)
Hint: Don’t forget the space characters! Add one before and after each pipe. To leave a column blank, just put a space between two pipes (| |).
The formatted table stencil (in the Simulation View)
c) Unordered and Ordered List
In the List stencil each line represents one specific entry either marked by asterisks if you use a unordered list or by hash characters if you use an ordered list.
Notation specific for the ordered list stencil
Hint: Don’t forget to add the space characters after the * or # !
The formatted ordered and unordered list stencil (in the Simulation View)
d) Tree View
In the Tree View each line equals one category, sub- or even sub-sub-category. This hierarchy either starts with + or – , depending on whether a category is initially open (and can be collapsed, thus showing a – ) or closed (and can therefore be opened, thus showing a +). To add a new entry, go to the respective line and type in + or – at the beginning. Then add a space character and type in title of the entry, e. g. + Content. To link an entry to a page within the prototype, select the entire entry and choose the target page from the dropdown menu, e.g. – [page3243 Home]. Pasting a URL instead of a page ID will create a link to external content.
Example: ++ [https://pidoco.com/en/help/doc/stencil Stencil].
Notation specific for the tree view stencil (including internal and external links)
Hint: Don’t forget to add the space characters after the + or – !
The formatted tree view stencil (in the Simulation View)
That’s how easy it is to quickly turn menus and other stencils into interactive elements! Do you need help with the Pidoco syntax? Just send us a message via support@pidoco.com or
Facebook, Twitter or Google+.
Happy Prototyping!