Can I do this with forms?

[kriggo15]

I have an app that allows a user to come in and choose a service and based on the service chosen, the user then goes and fills in the appropriate forms. My issue is that we have north of 30 forms (all from different SharePoint lists) and right now, each one is on a separate screen. To complicate things further, these forms all have different questions. Below is a mocked up scenario to illustrate what I'd like the user experience to be.

What I'd like to see: The user chooses an option and is taken to a single screen that has the appropriate forms. The height/size of the screen is dynamic and renders each form 1 after another. 

Can this be done? If so, how? If not, are there other designs I should take into consideration?

[KennethNicasens]

Hello @kriggo15 ,

This would be possible.

If you have a selection you can then store it in a variable:

Set(_ServiceOption, OptionToggle.selected);Navigate(FormScreen)

After this, you can change the visible property of each form:

Switch(_ServiceOption,"Option1",true,"Option2",true,"Option3",false)

 To make the Y position dynamic you could use the following on each form:

First form:
Switch(_ServiceOption,"Option1",100,"Option2",100,"Option3",100)

Other forms:
Switch(_ServiceOption,"Option1",Form1.Y + Form1.Height,"Option2",Form1.Y + Form1.Height,"Option3",Form2.Y + Form2.Height)

Something like this would work I think.

I hope this was helpfull!

[kriggo15]

Thanks for the response. I want to make sure I understand before testing... You are saying my form screen would contain all 30 forms, but I'm just going to edit the visible property for each, correct?

[KennethNicasens]

Yes, and to make the dynamic positioning you can use the Y property of each form.

Another option would be that you can create a screen for each option.

Personally I would work with the first option because if you want to change your design you only need to do it once.

---
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

[kriggo15]

I'd like for the user to be able to scroll and see the forms one after another but it doesn't look like I can embed a form into a card of a scroll-able screen.

I'm trying to replicate the far right image in my initial screenshot.

[KennethNicasens]

Can't you put the forms after each other with this formula in the Y property?

First form:
Switch(_ServiceOption,"Option1",100,"Option2",100,"Option3",100)

Other forms:
Switch(_ServiceOption,"Option1",Form1.Y + Form1.Height,"Option2",Form1.Y + Form1.Height,"Option3",Form2.Y + Form2.Height)

[kriggo15]

I'm sorry but I'm not following what you are doing here. When the box is checked, what am I setting the value of the variable to? 

---

If you have a selection you can then store it in a variable:

Set(_ServiceOption, OptionToggle.selected);Navigate(FormScreen)

After this, you can change the visible property of each form:

Switch(_ServiceOption,"Option1",true,"Option2",true,"Option3",false)

[KennethNicasens]

In attachment, you can see examples of options 1.

Option1
Option2
Option3

Form1: Visible - Switch(_ServiceOption,"Option1",true,"Option2",true,"Option3",false)

Form2: Visible - Switch(_ServiceOption,"Option1",false,"Option2",true,"Option3",false)

Form3: Visible - Switch(_ServiceOption,"Option1",true,"Option2",false,"Option3",true)

Form1: Y - Switch(_ServiceOption,"Option1",148,"Option2",148)

Form2: Y - Switch(_ServiceOption,"Option2",Form1.Y+Form1.Height) 

Form3: Y - Switch(_ServiceOption,"Option1",Form1.Y+Form1.Height,"Option3",148)

This is the code I used when I switch the Option radio button my variable will change to the value.

[GarethPrisk]

@KennethNicasensis on the right track with this.

The only other suggestion I would make is to account for your unique scenarios. It looks like there could be combos, or scenarios where different forms are shown based on a single selection.

I would propose that you code your navigate function to include a context variable.

Navigate(
    formScreen,
    ScreenTransition.Fade,
    {
        isVisibleForm1: true,
        isVisibleForm2: false,
        isVisibleForm3: true
    }
)

The way these Boolean variables are set is up to you. I hard-coded them here, but you could move your Switch statement here, as long as it results in a true or false.

Then you can use those values as simple Visibility properties on your forms. Form1: Visible = isVisibleForm1.

For stacking the forms. Determine the default order of all of the forms. Then for each subsequent form:

• Set the Y value based on the form which should be above it
• The exception is the top-most form, with a static Y value
• Recommended: add a variable like locBuffer, to set a fixed distance between forms

frmFirst.Y + If(
    frmFirst.Visible,
    frmFirst.Height + locBuffer,
    0
)

The example above is on the frmSecond (or the 2nd form in the stack). This is dynamically setting its Y value based on the form above it. It is taking into consideration the visibility to add/remove the height, otherwise it will collapse it.

[kriggo15]

Thanks @GarethPrisk , this works really well. One last question, is it possible to have this on a scrollable screen? I'd like for the user to be able to scroll and see all of the forms they need to fill out.