Power Pages - Clickable Advanced Forms - Tab Like Forms On Portals

clickable tabs stand out as a user-friendly solution that simplifies navigation and improves the overall user experience. In this short blog post, we will explore how we can get a multi-step form with clickable tabs functionality.

At the end of this post, you'll be able to make something like this.

1. Create a page with n number of subpages

2. Create a web template using the code below

<div id="multiple-tabs" class="wrapper-body">

<div class="container">

<div class="page-heading"">

{% block breadcrumbs %}

{% include 'Breadcrumbs' %}

{% endblock %}

{% block title %}

{% include 'Page Header' %}

{% endblock %}

<!-- ENTER TABS CODE HERE -->

{% assign depth_offset = depth_offset | default: 0 %}

{% assign current_page = current_page | default: page %}

{% assign current_depth = 0 %}

{% assign parentpage = current_page.parent %}

{% assign totnum = current_page.parent.children.size %}

</div>

<div class="tab-section">

        <nav class="reportsteps">

<ul class="nav nav-pills nav-justified" role="navigation">

{% assign crumb_count = 0 %}

{% for sibling in current_page.parent.children limit:12 %}//set limit to the number of pages

{% assign crumb_count = crumb_count | plus: 1 %}

{% if sibling.url contains "some-text" and request.params.id.size > 2 %}//you can add conditions using liquid code

<li class="step">

<a href="{{ "URL" | append: "?id=" | append: request.params.id }}" title="{{ sibling.tooltip | escape }}">

{{ sibling.title | escape }}

</a>

</li>

{% elsif sibling.url == current_page.url %}

<li class="step active">

<a href="{{ current_page.url | append: "?id=" | append: request.params.id }}" title="{{ current_page.title | h }}">

{{ current_page.title | h }}

</a>

</li>

{% elsif request.params.id.size > 2 %}

<li class="step">

<a href="{{ sibling.url | append: "?id=" | append: request.params.id }}" title="{{ current_page.title | h }}">

{{ sibling.title | h }}

</a>

</li>

{% else %}

<li class="step">

<a href="javascript:void(0);" onclick = "return submitForm();" title="{{ sibling.tooltip | escape }}">

{{ sibling.title | escape }}

</a>

</li>

{% endif %}

{% endfor %}

</ul>

</nav>

{% block main %}

{% include 'Page Copy' %}

{% if page.adx_entitylist %}

{% include 'entity_list' key: page.adx_entitylist.id %}

{% endif %}

{% if page.adx_entityform %}

{% entityform id: page.adx_entityform.id %}

{% endif %}

{% if page.adx_webform %}

{% webform id: page.adx_webform.id %}

{% endif %}

{% endblock %}

        </div>

</div>

</div>

3. Create Page Template and associate the newly created web template with it.

4. Associate this page template with sub pages.

5. Associate your basic form with your subpage, add each tab of your basic form on each subpage this is how you can navigate between the tabs of same form.


Reference : 
https://ulrikke.akerbak.com/2021/10/20/clickable-tabs-navigation-for-power-apps-portals/