Clickable tabs navigation for Power Apps Portals

Last updated on 31/05/2022

This blog article will show you how to create clickable tabs at the top of forms in Power Apps Portals, like navigation. User experience will be much improved by being able to jump back and forth between forms and then be restricted to only using back and forth buttons. This is the number one requirement that always makes me choose Basic Forms over Advanced Forms.

The finished result

This solution is created by adding some custom liquid code at the top of our web template that automatically creates navigation links to these sibling pages. This approach can be used for all types of pages to create “local” navigation – not just pages with forms.

Web Template “Form with tabs”

For this example, I create a simple web template that I will create as a page template later. This web template has a header with a breadcrumb and a title, and then the main area where lists, basic forms and advanced forms will render.

<div 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 --> </div> {% 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>
Code language: HTML, XML (xml)

Add the code for tabs

This is the code that creates tabs from sibling pages. This works best if you have pages in a hierarchy. Each page has a form, like this:

When you have forms and pages in this structure you can use the liquid “page” object to automatically get the sibling pages and create a tab navigation element based on the pages.

Documentation for the Pages liquid object:
https://docs.microsoft.com/en-us/powerapps/maker/portals/liquid/liquid-objects#page

We add this code to the “Form with tabs” web template.

{% 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 %} <nav class="reportsteps"> <ul class="nav nav-pills nav-justified" role="navigation"> {% assign crumb_count = 0 %} {% for sibling in current_page.parent.children %} {% assign crumb_count = crumb_count | plus: 1 %} {% if sibling.url == current_page.url %} <li class="step active"> <a href="{{ current_page.url}}" title="{{ current_page.title | h }}"> <span class="number">{{crumb_count}}</span> {{ current_page.title | h }} </a> </li> {% else %} <li class="step"> <a href="{{ sibling.url }}" title="{{ sibling.tooltip | escape }}"> <span class="number">{{crumb_count}}</span> {{ sibling.title | escape }} </a> </li> {% endif %} {% endfor %} </ul> </nav>
Code language: JavaScript (javascript)

Your finished web template looks like this:

Page template: “Page with Form and Tabs”

Create a page template for your web template

Forms

Create the forms you need and place each form on its own page, like the structure I described earlier. This is what one of my forms looks like.

Pages

Create one page for each form and add the form as Basic Form. Choose the “Page with Form and Tabs” page template.

Display order

To ensure that the pages are displayed in the correct order as tabs use the “Display Order” on the pages. Set “Display Order” to “1” for Form 1, etc.:

Content Page

Each web page has one or more content pages; one content page for each language on your portal. Make sure you add the form to the Content Page for each web page too:

Save your changes and refresh the cache.

Navigate to the “Form 1” page in your portal and see that at the top of your portal page there is a line of tabs.

Note! I already have some branding in place in my portal – yours might look different.

Portals use Bootstrap version 3.3.5 and you can use classes and components from Boostratp directly into your portal code without writing CSS to get the Boostrap loook&feel. More on “Tabs” in Boostrap 3.3.5 here: https://bootstrapdocs.com/v3.3.5/docs/components/#nav-tabs

Have fun with it and good luck!

Get new blog posts right to your inbox

Ulrikke Akerbæk Written by:

Ulrikke has a BSc in Multimedia from Karlstad University, and has since worked with front-end development and advisory consulting in Microsofts product portfolio. She is a Power Apps Portals professional at Skill AS in Norway.

3 Comments

  1. McKenna j O'Donnell
    09/11/2021
    Reply

    Can i do something similar within advanced forms?

  2. Rivai
    13/05/2022
    Reply

    Hi Ulrikke, thanks for sharing this,

    but where is button save for every page?
    can I used this for 1 form in CRM which have 3 tab and then create 3 pages for each tab in Portal but only 1 save button?

    • 09/08/2022
      Reply

      Hi Rivai. Sorry for the late response. You can use an Advanced Form for Portals and have one form in CRM witch have 3 tabs and then have the form create one page for each tab – and then have the submit-button at the end. This way the advanced form session keep track of the data entered into the form across the form steps (tabs) and create a record at the last page. Read more about it in the documentation here: https://docs.microsoft.com/en-us/power-apps/maker/portals/configure/load-form-step. Look for “Auto Generate Steps From Tabs” in the “Settings” table to learn more about how it works. Hope this was helpful and not too late. Good luck!

Leave a Reply

Your email address will not be published.