Navigation buttons (PageNavigationLink) in formatted content

Availability of functionality depends on the license and may not be available in all deployments.

Example - clicking the button Change redirects to a previously defined page.

Figure 1. Example content with a navigation button

• To create such a link, we need to place into Content (TextContent) a div with the appropriate class and attribute:

  • class page-link
  • attribute mid with the value of the page MID to which we want to redirect
• For example, it would look like this:

Example link element

<div class="page-link" mid="Page1">Change</div>

• The above link will redirect to Page1, if it exists.

HTML code creating the Content (TextContent) from the screenshot above

Example HTML

<div style="background-color: #eeeeee; padding: 20px; position: relative;">
  <div>
    <span style="font-size: 1.17em; font-weight: bold;">Selected card</span>
  </div>
  <div class="page-link" mid="Page1" style="position: absolute; padding: 20px; right: 0; top: 0; color: #003574">
    Change >
  </div>
  <div>
    <img src="form/biz/spotify-gift-card.png" height="83" width="127">
  </div>
  <div>
    <p>Card type<br>
      <span style="font-weight: bold">Spotify</span>
    </p>
  </div>
  <div>
    <p>Price<br>
      <span style="font-weight: bold">200.00 PLN</span>
    </p>
  </div>
</div>

Demo request: demoSidebar