Direct user to relevant page based on dropdown selection

[inanoffice23]

Hello, 

In Power Pages, based on dropdown value the user selects, I want to redirect user to the relevant page, it could be 5 other pages

I have 25 basic forms, I am passing the id parameter from one to another 

Dropdown value has values 1, 2, 3, 4, 5 - I am not sure where to specify go to to an HTTPS page, if value == 1, then go to https: url1, if value ==2, then go to url2

Code below hides/shows field based on user selection

$(document).ready(function () {

$("#querytype").change(onDisplaySectionChange);

onDisplaySectionChange();

});

function onDisplaySectionChange() {

var varQuery = $('#querytype').find("option:selected").text();

if (varQuery === "1" || varQuery === "2"){

$('#querytype').parent().parent().hide();

$('#fieldtohide').parent().parent().hide();

}

else {

$('#fieldtohide).parent().parent().show();

}

}

Code below has a 'Previous' page button

$(document).ready(function () {

   $("#EntityFormPanel").eq(0).append("<button type='button' id='btnReturn' class='btn' style='color:#fff;background-color:#0B7F99;border-color:36f;' onclick='exitApplication()'>Previous</button><br><br>");

});

function exitApplication() {

    var prevurl = "{{ request.url | base }}{{ page.parent.url }}?id={{request.params['id']}}&relid={{request.params['relid']}}";

    window.open(prevurl, "_self");    

}

Below I try to insert the 'go to a different page, but it then throws an error in the next basic form, saying we can't find the form', and it depends what code I add, it doesn't remember the previous page and it goes back to the main page

Culprit line: window.location.href = "http://stackoverflow.com";

$(document).ready(function () {

$("#querytype").change(onDisplaySectionChange);

onDisplaySectionChange();

});

function onDisplaySectionChange() {

var varQuery = $('#querytype').find("option:selected").text();

if (varQuery === "1" || varQuery === "2"){

$('#queryytype').parent().parent().hide();

$('#fieldtohide').parent().parent().hide();

window.location.href = "http://stackoverflow.com";

}

else {

$('#fieldtohide).parent().parent().show();

}

}

$(document).ready(function () {

   $("#EntityFormPanel").eq(0).append("<button type='button' id='btnReturn' class='btn' style='color:#fff;background-color:#0B7F99;border-color:36f;' onclick='exitApplication()'>Previous</button><br><br>");

});

function exitApplication() {

    var prevurl = "{{ request.url | base }}{{ page.parent.url }}?id={{request.params['id']}}&relid={{request.params['relid']}}";

    window.open(prevurl, "_self");    

}

How can I redirect user to the correct page, and where would I place the code, is in the Javascript basic form, or in the 'submit' button?

How can I ensure that it remembers the previous page properly?

Thank you 

[OliverRodrigues]

Hi, have you considered using Multistep Forms? 

You can define Conditional Steps that would redirect the user to expected step, and this would keep track of the previous step.

[inanoffice23]

Yes, it was my first option, however when adding 8 forms and a couple of conditional steps, I seemed to have reached some sort of 'hidden' limit, as it was throwing the last form out of the multistep form, and at some point even though I had 8 steps, when re-adding it to the page, it would only show 2, I wished Microsoft would clarify the limit, so we can skip that option straight away. (posted it in here Re: How many Step forms can you add to a Multiform... - Power Platform Community (microsoft.com))

I can't seem to redirect user with dropdown to another page, as that 'breaks' the connection and the parameters aren't being passed, so at the moment I did: 4 basic forms, 'hide/show' with a lot of Javascript if and switch statements & functions to hide form sections, the problem is the last basic form has 12 possible forms that user might or might not have to fill. I added 'tab' components to form number 4, so it would retain the parameters and so it would be 'the end' for every scenario.

Now the issue is that it shows either as a very long page, or if I do the 'autogenerate steps from tabs', it will force every single user to go through all the 12 forms, even if the contents are hidden

So back to square 1, how do I ensure that the form is submitted, and users don't have to see irrelevant tabs, or having to have all the forms in one long page?

[OliverRodrigues]

Do you still have the configuration you used for the multistep forms? because that "limit" doesn't exist afaik, so it should have worked fine.

One thing to note here is that every when you create a record based on a Multistep Form, this creates another record of "Multistep Form Session (adx_webformsession)".. I find that if you are making changes to the Multistep Form configuration after creating records, the sessions get all confused because they might have lost their path basically.

What I do when making changes to the Steps definition, is make sure to delete the Session records (assuming you are doing this in DEV/TEST) to avoid that kind of issue. 

[inanoffice23]

Thank you Oliver, I did wonder why sometimes the form behaved so strangely. I have to deliver the project asap so I had to move on and do it all with basic forms and use Javascript to hide sections/fields instead. I don't think I can tackle the 'direct user to a different page based on dropdown value' without breaking the connection, thus creating 2 dataverse records, so sticking to one way forward, one form at a time

[Fubar]

You have a couple of different options

• Multi Setup form
• JavaScript redirect on the selection of the Dropdown to different pages
• Use Liquid to control the Form to load

//For JaveScript redirect
<script>
  window.location.href='./page/?id=.....&param1=.....'
</script>

For the Liquid option

1. Have different Forms for your different types (to minimise show/hide etc)
2. In a new Web Page use Liquid (if or case) to load a specific form.  Use the "id" from 3 below to get the value from the dropdown and based on that value load the correct form.
3. On your first form with the Dropdown, set its "On Success" settings to redirect to the new Web Page in 2.  (tick the "Append Record ID To Query String" and give it a name e.g. id

https://learn.microsoft.com/en-us/power-pages/configure/liquid/liquid-objects#request

https://learn.microsoft.com/en-us/power-pages/configure/liquid/liquid-objects#entities

https://learn.microsoft.com/en-us/power-pages/configure/liquid/dataverse-liquid-tags#entityform

https://learn.microsoft.com/en-us/power-pages/configure/liquid/control-flow-tags

[inanoffice23]

The Liquid options seems rather complex compared to Javascript, how would you pass the parameter with the window location? Is there a sample where I can see the whole code? 

[inanoffice23]

Although checking it seems that the safest way to pass parameters is with POST which is not possible with window location, I wished Microsoft could implement an easy way to direct user to another page without losing the parameter for basic forms. The multistep form didn't work for me as I have too much data but thank you, Javascript saves the day so far