Use Web Link Sets to manage a task list and a multi-stage process in Power Apps Portals

A task list can be used to provide an overview of a multi-stage process and the user’s status against each. See the GDS Design System for more details on this pattern. 

A screenshot showing an example of the task list page, includes a heading, and three grouped sections that each contain tasks, some of these tasks are marked as completed.

Use Web Links and a Web Link Set to manage the configuration of the contents of the task list: 

  1. Create a Web Link Set 
  1. The ‘Navigation’ attribute on the Web Page record provides a reference to web link sets to avoid having to hard code this in the web template. 
  1. In the web link set, create a first level of web links to detail the top level headers, e.g. 

    • Check here before you start

    • Prepare application

    • Apply

These 1st level web links are not consumed as links and therefore do not require a Web Page reference. 

  1. Under each web link above, create child web links for each page in that section, e.g. under the ‘Check here before you start’ link 

    • Check eligibility 

    • Read declaration 

  1. Create a re-useable Web Template to read the current web page’s referenced web link set and loop through the results to generate the task list, e.g. 

Ensure that both levels of web links have the ‘Display Order’ attribute populated both for numbering and to control the order of display. 

{% assign links = weblinks[page.adx_navigation.id] %}
<ol class="task-list">
<!-- List "title" links (i.e. those with no parent, in display order -->
{% for link in links.weblinks %}
<li>
<h2 class="task-list-section">
<span class="task-list-section-number">
{{ link["adx_displayorder"] }}.
</span> {{ link.name }}
</h2>
<ul class="task-list-items">
<!-- Put a link for each child link -->
{% for child_link in link.weblinks %}
<li class="task-list-item">
<a class="task-name" href="{{ child_link.url }}">
{{ child_link.name }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ol>
view raw blog_pattern-task-list_1.html hosted with ❤ by GitHub