Display tabs based on dropdown choice selected in landing tab

[Mikello-6626]

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?

[OliverRodrigues · Accepted solution]

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]

THank you, this worked great!

[Mikello-6626]

@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]

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 · Accepted solution]

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

}
}

[Mikello-6626]

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]

.