web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
Your Invited to Keeping It Real with the Power Platform
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Display tabs based on ...
Power Pages
Answered

Display tabs based on dropdown choice selected in landing tab

(0) ShareShare
ReportReport
Posted on by Mikello-6626 90

I have a 3 tab form in Dataverse, displaying on the portal using a progress bar. 

 

1-Contact tab -> 2-Details of X tab -> 3-Signature and submit tab

 

I have created Advanced Form steps and I am able to display the 3 tabs properly. However, the issue is that there is a dropdown field in Contact tab, and depending on the value selected in the dropdown, the appropriate Details tab needs to display.

 

The landing Contact tab and the last Signature tab are constant.

 

Ex.

In the Contact tab, if user selects choice A from dropdown -> Details of A tab -> Signature and submit tab

In the Contact tab, if user selects choice B from dropdown -> Details of B tab -> Signature and submit tab

In the Contact tab, if user selects choice C from dropdown -> Details of C tab -> Signature and submit tab etc. 

 

Dropdown choices are 20 or so... How can I implementing switching of tabs depending on choice selected?

 

Categories:
Power Apps portals
I have the same question (0)
  • Verified answer
    oliver.rodrigues Profile Picture
    oliver.rodrigues 9,457 Most Valuable Professional on at

    Hi, what you can do is add a section into Tab B and Tab C with the Contact dropdown (I normally call that tabB_section_hiddenfields)

    Then on the Portals, you need to apply JS to hide the section, and validate the value from the dropdown, finally showing/hiding the expected fields in your step

     

    Check this article if you need the JS code to hide/show elements: http://oliverrodrigues365.com/2020/07/19/power-apps-portals-javascript-tip-01-hide-show-elements/

     

  • Mikello-6626 Profile Picture
    Mikello-6626 90 on at

    THank you, this worked great!

  • Mikello-6626 Profile Picture
    Mikello-6626 90 on at

    @OliverRodrigues Sorry to have to get back on this, my issue is that these sections don't have unique fields. There are lot of common fields between Section A, B, C etc. So if I create a section with repeating fields, the form barks at me on the portal. It would be ideal to show one section at a time since I can arrange the fields to show better. I just don't know how to display repeating fields in multiple sections all in one form/tab. Below is my Javascript, I probably need help with this since I haven't done a good job. It seems to be hiding those common fields since another IF statement hides them.

    In my below script, the dropdown has 3 choices: Call, Email, Text

    Call dropdown -> Call section

    Email dropdown -> Email section

    Text dropdown -> Text section

     

    I also have common fields between Email and Text section (Fullname). So some unique fields in each section and some common fields. I tried to take the common fields out and display them separately but it hides it. Any guidance is appreciated

     

     

    $(document).ready(function() {
 $("#form_dropdownchoicecolname").change(onDisplaySectionChange);
 onDisplaySectionChange();
});

function onDisplaySectionChange(){
 var varDropdownchoice = $('#form_dropdownchoicecolname').find("option:selected").text();

//When Call is selected
if (varDropdownchoice === "Call")
{
 $("table[data-name='Call_section']").parent().show();
}
else{
 $("table[data-name='Call_section']").parent().hide();
}

//When Text is selected
if (varDropdownchoice === "Text")
{
 $("table[data-name='Text_section']").parent().show();
 $("#form_Fullname").closest("td").find("div.control, div.info").show();
}
else{
 $("table[data-name='Text_section']").parent().hide();
 $("#form_Fullname").closest("td").find("div.control, div.info").hide();
}

//When Email is selected
if (varDropdownchoice === "Email")
{
 $("table[data-name='Email_section']").parent().show();
 $("#form_Fullname").closest("td").find("div.control, div.info").show();

}
else{
 $("table[data-name='Email_section']").parent().hide();
 $("#form_Fullname").closest("td").find("div.control, div.info").hide();
}
}

     

     

     

     

  • Mikello-6626 Profile Picture
    Mikello-6626 90 on at

    If possible, could you please explain to me how I could just create multiple tabs with all the fields in it, and then just call the required tab as per dropdown choice in 1st step. 

    In my actual form I have 20 such sections and it is looking clunky since the bottom sections have a big white space above it. Is it possible to have them in separate tabs and then display for ex Call tab only, based on "Call" selected from dropdown

  • Verified answer
    oliver.rodrigues Profile Picture
    oliver.rodrigues 9,457 Most Valuable Professional on at

    Hi, are you currently using an Entity Form (Basic Form)?

    If you have a lot of fields, you might be better off using Web Forms (Advanced Forms).. with that feature you can add multi-step to your Application form

    https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/web-form-steps#:~:text=The%20Advanced%20Form%20Step%20provides,a%20form%20and%20additional%20behavior.&text=Each%20Advanced%20Form%20will%20be,has%20one%20or%20more%20steps.

     

    You can add condition between each step and redirect to different steps, showing different tabs of your Dataverse form

     

    A few tips that might help:

    • Advanced Form Conditions VS JavaScript logic:
      • my opinion Advanced Form Conditions should be used when you have a branch of your Application Form, and need the user to enter completely different steps
      • if we are just talking about hiding/showing a few additional fields, I would stick with JS logic
    • Same field multiple times in a form
      • there is a known Portal issue for when you have the same field multiple times within the same form, I would recommend you avoiding that
      • if the fields are common, perhaps create a section with the common ones, and then create another section with the specific fields
    • JS logic
      • what I normally like to do is on the top of my "on change" functions, is first hiding all the options, and then depending on the condition I show what's necessary, this is to avoid messing with show & hide all the time, for example:
    function onDisplaySectionChange(){
 var varDropdownchoice = $('#form_dropdownchoicecolname').find("option:selected").text();

 $("table[data-name='Call_section']").parent().hide();
 $("table[data-name='Text_section']").parent().hide();
 $("#form_Fullname").closest("td").find("div.control, div.info").hide();
 $("table[data-name='Email_section']").parent().hide();

//When Call is selected
if (varDropdownchoice === "Call")
{
 $("table[data-name='Call_section']").parent().show();
}
//When Text is selected
if (varDropdownchoice === "Text")
{
 $("table[data-name='Text_section']").parent().show();
 $("#form_Fullname").closest("td").find("div.control, div.info").show();
}

//When Email is selected
if (varDropdownchoice === "Email")
{
 $("table[data-name='Email_section']").parent().show();
 $("#form_Fullname").closest("td").find("div.control, div.info").show();

}
}

     

  • Mikello-6626 Profile Picture
    Mikello-6626 90 on at

    Never mind, I was able to do this via Advanced Form steps. Key was to create Condition steps between "tab steps". Thank you again @OliverRodrigues !!

  • Mikello-6626 Profile Picture
    Mikello-6626 90 on at

    .

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Your Invited to Keeping It Real with the Power Platform

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the March Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
rezarizvii Profile Picture

rezarizvii 71

#2
DP_Prabh Profile Picture

DP_Prabh 36

#3
oliver.rodrigues Profile Picture

oliver.rodrigues 32 Most Valuable Professional

Last 30 days Overall leaderboard

Featured topics

Solution to LinkedIn Authentication in Power Apps Portals
Welcome to the Power Pages forum!

Product updates

Microsoft Power Platform Community release plans