Creating a sitemap page dynamically

A sitemap page is essential for websites, especially large ones, as it helps users navigate the site more easily and understand its structure. It also benefits SEO by providing search engines with a clear view of the site’s pages. In Power Pages, creating a dynamic sitemap means generating this page programmatically based on your portal’s current content structure. This can include links to pages, forms, lists, and other portal features that may change over time.

Here’s a step-by-step guide on how to create a dynamic sitemap page in Power Pages:

---

Step 1: Understand the Structure of Your Portal

Before creating the sitemap page, it’s crucial to understand the structure of your portal. A sitemap generally includes:

• Pages: The main pages and subpages of your portal.
• Forms: Any forms present in your portal.
• Lists: Collections of data or documents.
• Views and Records: Specific records and views from data sources.

This can vary based on the content types in your Power Pages portal. Identify these structures, as they will be included in your dynamic sitemap.

---

Step 2: Use Liquid Templates for Dynamic Content

To create a dynamic sitemap, you can use Liquid Templates to programmatically fetch and display the different elements of your site (pages, forms, etc.). Liquid is a powerful templating language that allows you to query and display data based on conditions and user roles.

Example Liquid Template for Dynamic Sitemap:

<h1>Sitemap</h1>
<ul>
  {% assign pages = site.pages %}
  {% if pages %}
    <li><strong>Pages</strong>
      <ul>
        {% for page in pages %}
          <li>
            <a href="{{ page.url }}">{{ page.name }}</a>
          </li>
        {% endfor %}
      </ul>
    </li>
  {% endif %}

  {% assign forms = site.forms %}
  {% if forms %}
    <li><strong>Forms</strong>
      <ul>
        {% for form in forms %}
          <li>
            <a href="{{ form.url }}">{{ form.name }}</a>
          </li>
        {% endfor %}
      </ul>
    </li>
  {% endif %}

  {% assign lists = site.lists %}
  {% if lists %}
    <li><strong>Lists</strong>
      <ul>
        {% for list in lists %}
          <li>
            <a href="{{ list.url }}">{{ list.name }}</a>
          </li>
        {% endfor %}
      </ul>
    </li>
  {% endif %}
</ul>

Explanation:

• site.pages: Fetches all pages available in the portal.
• site.forms: Retrieves all forms in the portal.
• site.lists: Grabs all lists (for records and views) available in the portal.
• for loop: Loops through each element (pages, forms, lists) and generates a list of links dynamically.

---

Step 3: Customize the Sitemap Layout

To ensure that your sitemap is easy to navigate, you should consider using some simple CSS to style the generated page. This will make it visually appealing and user-friendly.

Example CSS for Sitemap:

.sitemap ul {
  list-style-type: none;
  padding-left: 0;
}

.sitemap li {
  margin-bottom: 10px;
}

.sitemap a {
  text-decoration: none;
  color: #333;
  font-size: 1.1em;
}

.sitemap a:hover {
  text-decoration: underline;
}

.sitemap h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

CSS Explanation:

• list-style-type: none: Removes the default bullet points from the list.
• sitemap a:hover: Adds a hover effect for the links, making them interactive and visually engaging.
• font-size and padding: Adjusts the size and spacing for better readability.

---

Step 4: Handling Dynamic Content Changes

Since the sitemap is dynamic, it should automatically reflect any changes in the portal’s structure. For instance:

• When a new page is added, the sitemap should display it.
• If a page or form is removed, the sitemap should update accordingly.

To achieve this, ensure your Liquid template dynamically pulls all the current pages, forms, and lists each time the sitemap page is loaded, ensuring that it’s always up-to-date without requiring manual intervention.

---

Step 5: Implementing User-Specific Sitemaps (Optional)

If you want to provide a user-specific sitemap, such as showing only the pages or forms a user has access to, you can use Liquid conditionals based on user roles, permissions, or other attributes.

Example for Role-Based Sitemap:

<h1>Sitemap</h1>
<ul>
  {% if user %}
    {% assign userRole = user.roles[0].name %}
  {% endif %}

  {% if userRole == "Admin" %}
    <li><strong>Admin Pages</strong>
      <ul>
        {% assign adminPages = site.pages | where: "role", "Admin" %}
        {% for page in adminPages %}
          <li>
            <a href="{{ page.url }}">{{ page.name }}</a>
          </li>
        {% endfor %}
      </ul>
    </li>
  {% endif %}
</ul>

Explanation:

• user.roles[0].name: Fetches the user’s role.
• Role-based filtering: Only displays pages that are tagged or designated for the “Admin” role.

---

Step 6: Add Dynamic Links for Sub-pages or Hierarchy

In some cases, your portal may have sub-pages or a hierarchical structure. You can dynamically build nested lists to represent this hierarchy in the sitemap. For example, if a page has child pages, these should be displayed as sub-items under the parent page.

Example for Nested Pages:

<h1>Sitemap</h1>
<ul>
  {% for page in site.pages %}
    <li>
      <a href="{{ page.url }}">{{ page.name }}</a>
      {% if page.has_children %}
        <ul>
          {% for childPage in page.children %}
            <li>
              <a href="{{ childPage.url }}">{{ childPage.name }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

Explanation:

• page.has_children: Checks if the current page has child pages.
• page.children: Loops through the child pages of the current page and generates nested list items.

---

Step 7: Test and Final Adjustments

After implementing the sitemap:

• Test the page to ensure all links are correctly displayed.
• Verify that it reflects changes in the portal (new pages/forms added, old ones removed).
• Optimize the layout for mobile and desktop views to ensure it works seamlessly across devices.