This documentation has moved. For the most recent documentation, check out https://docs.adaptavist.com. Please update your bookmarks and links.

Skip to end of metadata
Go to start of metadata

Wiki Markup to Storage Format

Many macros can be converted to storage format using the Confluence conversion that happens when a page with wiki markup is saved, See David Simpson's blog for more information on that process.

For deprecated ThemeBuilder macros that don't convert using that method we will be listing their equivalent HTML or storage format in this page.

HTML Macro

When working with HTML or storage format in the ThemeBuilder panel editor you do not need to use the HTML macro.

So, for example, this wiki markup

Wiki Markup
{html}<ul id="mynav">{html}
    {html}<li id="myId"><a class="myclass" href="#">My Link</a></li>{html}
{html}</ul>{html}

becomes

HTML
<ul id="mynav">
    <li id="myId"><a class="myclass" href="#">My Link</a></li>
</ul>

Align Macro

The align macro should be replaced with an HTML span (for inline items) or div (for block items), together with a CSS class that is added as a style in ThemeBuilder Custom CSS. Adding the styling as a class means it can easily be reused for any HTML element that needs to be centred.

{align:center}My content{align:center}

becomes

<div class=”center”>My content</div>

Then add in the ThemeBuilder Custom CSS

.center {
	text-align: center;
}

Menu Macros

In ThemeBuilder 4 and earlier there were macros to help create a dropdown menu. When rendered these macros created their equivalent HTML elements and this is the key to translating wiki markup menu macros to storage format.

Tip: You can add valid HTML directly into any ThemeBuilder storage format panel.

  • Menubar = <ul>
  • Menuitem = <li>
  • Menulink = <a>
    • Similar in function to the 'compound-menuitem' macro which has also been deprecated

We have documented how to add resources in ThemeBuilder that will create a dropdown menu that looks similar to the one that was produced by the deprecated menu macros, and will refer to those instructions as part of this guide.

First we will cover the HTML equivalent of each component and then describe how to combine them.

Note: The storage format version of the menulink macro is dependant on the function required.


Macro NameWiki MarkupHTMLComment

Menubar

menubar
{menubar:id=myId}
...menu items and links...
{menubar}



div and ul
<div id="myId" class="adpt-dropdown horizontal">
    <ul>
        … menu items and links…
    </ul>
</div>



The Id is not required as it was with the wiki markup version but you may want to keep it in the parent <div> or the <ul> if you have styles associated with that Id.

The classes in the <div> are needed for the dropdown functionality.

Menuitem

menuitem
{menuitem}
...links...
{menuitem}
li
<li>
     … menu item and link…
</li>

To External or Hard Coded Location

menulink hard coded
{menulink:custom|link=https://www.adaptavist.com}
	Adaptavist.com
{menulink}
a href
<a href="https://www.adaptavist.com/">
	Adaptavist.com
</a>
Note: for Confluence pages you should use the <ac:link> macro as described below, or if you need to make use of ThemeBuilder flag logic you can use the Link macro.

Menulink

To Confluence Page

menulink to confluence page
{menulink:custom|link=/display/spacekey/pagetitle}
	Page Title
{menulink}
ac:link
<ac:link>
    <ri:page ri:content-title="Page Title" ri:space-key="key"/>
    <ac:plain-text-link-body><![CDATA[Page Title]]></ac:plain-text-link-body>
</ac:link>

For Confluence pages always use the Confluence link function because it keeps pages linked even if they are moved. You can create these links by adding a link into a Confluence page then copying the storage format for the link.

Tip: Add a list menu on a Confluence page using the standard editor methods and then include or import that page into your menu.

See an example of this menu in action.

Menulink

To Relative Page

menulink to relative navigation
{menulink:firstchild}
	First Child
{menulink}
panel-pagenav
<ac:macro ac:name="panel-pagenav">
    <ac:parameter ac:name="mode">firstchild</ac:parameter>
    <ac:rich-text-body>
      	First Child
  	</ac:rich-text-body>
</ac:macro>
Use the Page Navigation macro to create relative links.

Menulink

To Home Page

menulink to home page
{menulink:home}
	Home
{menulink}
panel-sitehome
<ac:macro ac:name="panel-sitehome">
    <ac:rich-text-body>
        Home
	</ac:rich-text-body>
</ac:macro>
The Panel Sitehome macro has options to link to the dashboard, site home and space home.

Menulink

Site or Page functions

menulink to profile
{menulink:profile}
	%fullname%
{menulink}
web-item profile
<ac:macro ac:name="web-item">
    <ac:parameter ac:name="section">system.user/user-content</ac:parameter>
    <ac:parameter ac:name="item">user-profile</ac:parameter>
    <ac:rich-text-body>Profile</ac:rich-text-body>
</ac:macro>
For Confluence functionality you should convert menulink macros to single web-items or grouped web-sections using the destinations listed from Web Ui Links - Confluence 5.


Combined Menu Example

Using some of these examples we can create a dropdown menu with a combination of HTML and storage format.

example dropdown menu
<div class="adpt-dropdown horizontal">
  <ul id="level-1">
    <li>
      <ac:macro ac:name="panel-sitehome">
        <ac:rich-text-body>
        Home
	</ac:rich-text-body>
      </ac:macro>
      <ul id="level-2">
        <li>
 			<a href="https://www.adaptavist.com/">
				Adaptavist.com
			</a>
        </li>
        <li>
          <ac:link>
            <ri:page ri:content-title="Mouse" ri:space-key="TR"/>
          </ac:link>
        </li>
      </ul>
    </li>
    <li>
      <ac:macro ac:name="panel-pagenav">
        <ac:parameter ac:name="mode">firstchild</ac:parameter>
        <ac:rich-text-body>
      	First Child
      	</ac:rich-text-body>
      </ac:macro>
    </li>
    <li>
      <ac:macro ac:name="web-item">
        <ac:parameter ac:name="section">system.user/user-content</ac:parameter>
        <ac:parameter ac:name="item">user-profile</ac:parameter>
        <ac:rich-text-body>Profile</ac:rich-text-body>
      </ac:macro>
    </li>
  </ul>
</div>


Combined Menu Result

Related Content

Working example of a ThemeBuilder style dropdown menu that imports a standard Confluence list of links from another page.


  • No labels