cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Mikello-6626
Helper III
Helper III

Display tabs based on dropdown choice selected in landing tab

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?

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
OliverRodrigues
Super User
Super User

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/

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

OliverRodrigues
Super User
Super User

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%20Adva....

 

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();

}
}

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

7 REPLIES 7
OliverRodrigues
Super User
Super User

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/

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

THank you, this worked great!

@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
Helper III
Helper III

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

OliverRodrigues
Super User
Super User

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%20Adva....

 

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();

}
}

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

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 !!

.

Helpful resources

Announcements
2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Users online (1,930)