cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper V
Helper V

Can I do this with forms?

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?

 

formissue.png

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Impactful Individual
Impactful Individual

Re: Can I do this with forms?

Yes, I would recommend that you put this on a scrolling screen.

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/add-scrolling-screen

 

I have attached an example of this.

 

Updates, based on what we already discussed.

  • Each Form is placed in a DataCard of the scrolling screen canvas
  • Each Canvas DataCard
    • Visible = Form visibility Boolean
    • Height = The 'embedded' Form's Height + locBuffer
  • Each Form's properties
    • Visible = Form visibility Boolean
    • Height = Last Data Card in form's Y + Height + locBuffer

 

This works pretty smoothly in my testing. The main catch is ensuring the Form's height is dynamic, and prevents scrolling on the Form itself. Then the User would only experience scrolling on the app screen itself. NOTE: You can and should copy and paste your existing forms into the Canvas data cards.

You will want to figure out how to also add controls to SubmitForm, and whatnot, but I'll leave that up to you.

View solution in original post

13 REPLIES 13
Highlighted
Resolver III
Resolver III

Re: Can I do this with forms?

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!

Highlighted
Helper V
Helper V

Re: Can I do this with forms?

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?

Highlighted
Resolver III
Resolver III

Re: Can I do this with forms?

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."

Highlighted
Helper V
Helper V

Re: Can I do this with forms?

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.

Highlighted
Resolver III
Resolver III

Re: Can I do this with forms?

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)

 

Highlighted
Helper V
Helper V

Re: Can I do this with forms?

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)

 

 

Highlighted
Resolver III
Resolver III

Re: Can I do this with forms?

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.

Highlighted
Impactful Individual
Impactful Individual

Re: Can I do this with forms?

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

Highlighted
Helper V
Helper V

Re: Can I do this with forms?

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. 

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (9,572)