How to move through a series of web pages in #PowerApps Portals with liquid, without using Basic (Entity) Forms

In June, I published a series of patterns on how to manage page navigation when you aren’t presenting a data capture, using Basic/Entity Forms, Site Markers, or just plain old HTML:

Pattern: Web Pages without data

Since then, I’ve implemented one more version using Liquid which progresses through web pages based on their Display Order.

The requirement here is have a series of child Web Pages with Display Order populated. The hierarchy is important to implement this pattern

Example child pages with Display Order populated

Then we can use the sitemap.current liquid object to get a list of all the pages (ordered correctly) and retrieve the URL of the next page in the list

{% assign stop = false %}
{% assign next_url = "" %}
{% comment %}
Loop through all siblings of the current page (i.e. this page's parent's children)
Unfortunately, I haven't found any other liquid object that allows us to get "next sibling" 😉
{% endcomment %}
{% for child in sitemap.current.parent.children %}
{% comment %} If, in the last itteration, it found the current page, this is the next page, set URL and exit {% endcomment %}
{% if stop == true %}
{% assign next_url = child.url %}
{% break %}
{% endif %}
{% comment %} If this sibling is the current page, the next one will be the one we want {% endcomment %}
{% if child.url == page.url %}
{% assign stop = true %}
{% endif %}
{% endfor %}
{% comment %} Use URL of next sibling page, appending any URL parameters (e.g. ?id=xxx) {% endcomment %}
<a id="anon-submit" href="{{ next_url }}{{ request.query }}" class="submit-btn btn btn-primary form-action-container-left">Continue</a>
view raw blog_portal_itterate_through_child_pages.liquid hosted with ❤ by GitHub

It’s unfortunate that there isn’t any “next sibling” liquid object, meaning that the resulting liquid is a little verbose, but it works well, is much faster than using Basic Forms, and allows us to use a single, generic Web Template with configuration contained within the Web Page record itself.