Creating Multi-Step Forms in Power Apps | Tutorial
HTML-код
- Опубликовано: 28 май 2024
- In this Power Apps tutorial video, we will learn how to create a Multi-Step Modern Form control experience in Power Apps. Follow along as I guide you through the process of breaking up a modern Form control across multiple steps, including validation of form data within each step. Learn how to effortlessly navigate through various form steps using next and previous buttons & include a live status indicator for current Form step.
Let's get started with building multi-step forms within Power Apps!
#powerplatform #powerapps #microsoft
⬇️ Download App shown in video
➡️ The link is in Community Tab for Channel Members (Silver Club 🥈 or Higher)
Table of Contents:
00:00 - Introduction to building Multi-Step Forms in Power Apps
00:31 - Multi step forms scenario
01:52 - How to build a Modern Multi-step form experience in Power Apps
08:06 - Show Status indicator of current step number of Form
10:41 - Multi step form validations
14:22 - Demo of multi-step forms in Power Apps 
Наука
Dear @Reza. I built a similar app for a hackathon project with similar thought process last week. Went down the memory lane of what I did… Thank you for making such wonderful videos
Most welcome and glad to know you built something similar
Great job, Reza! You consistently make the difficult cases seem straightforward! I was working on this scenario (a bit different) a few days ago and ended up with a kind of 'enum' (records) for better control in 'if' cases. For example:
Set(
FormSteps,
{
Travel_Info: {Value: 1, Name: "Travel Info"},
Travel_Details: {Value: 2, Name: "Travel Details"},
Airface_Hotel: {Value: 3, Name: "Airface / Hotel"},
Attachments: {Value: 4, Name: "Attachments"}
}
);
Then, all you need to do is use Set(FormStep, FormSteps.Travel_Info.Value) and so on.
I'm eager to vote for that at your channel! Thanks for sharing Reza!
Thanks for sharing!
Various ways to do this. Goal was to keep it simple for the video.
Well done, sir! Such an elegant solution to a problem I've been wrestling with for some time now. Thank you!
Thank you Reza for this timely video.
My pleasure!
Always up to date content! Thank you Reza!
Wonderful technique for multi steps form Reza!. Thank you for your valuable time to educate & make it easy.
Most welcome
Very elegant process, and code minimized ! thanks Reza!
Great to hear
Reza the king strikes again!!! wonderful video
Thanks so much!
Content is King
Hi @Reza, very nice this demonstration. this will be very helpful content. Keep posting 🙂
Thank you, I hope to keep going as long as possible
Great video, one small issue - notice how when there's a validation on the first step of the form, all the fields are validated and once you go to the next step, there already are error messages displayed even though the user didn't choose anything yet. Is there a way around it?
I have not found a way around that. Little bit of give and take.
@exe5933 Did you find any solution for that? Im on the same boat buddy!
@@Asenay999 Yeah, found like yesterday although it's not perfect, sorry for not answering - for each step I have a label which value is set to a global variable - everytime I validate the form fields using the "if" statements like that:
If(
(!IsBlank(DateValue1.Value) && !IsBlank(DateValue2.Value) &&
DateValue1.Value >= Today() &&
DateValue2.Value > DateValue1.Value
// here add more steps if needed
),
Set(varStep, varStep + 1); Set(varStepValidation1Error, ""),
If(
DateValue2.Value
It was superb , small tricks but very useful as always
Thanks
Wonderful content. Thanks for these amazing content 🎉
Thanks for watching!
Hi Reza, I've been following you for a very long time. Your content is always helpful and easy to grasp. Could you please create some content on CoE or courses for Power Platform CoE? Thanks!
Thanks so much!
I want to make videos on a lot of topics. However, my rule for making videos is set.
“I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post“
Neatly done... impressive👏👏
Thank you! Cheers!
Another great video Reza!!!
Thank You
Thank you so much I was looking for this for a long time, amazing video. I have a question what if we have multiple content type in SharePoint list, how can we handle this?
Welcome!
Power Apps does not understand SharePoint content types.
@@RezaDorrani Is there a workaround then?
@@ibrahimabu-awad8511 it would require calling flow to get column details of content type and then showing or hiding columns. It can get complex quickly.
Nice. Informative video
Thanks
Another great one Reza!
Thank You!
Thank you @Reza - I'm currently working on similar travel authorization for our office. Would you mind adding multiple travel routes as staff can visit different locations for differnet work purposes. thank you.
The video idea is more around multi step forms than the use case. I don’t plan to expand on it further. Video description has link to download entire solution. Feel free to customize it based on your scenario.
Hi Reza! 🙂As of this month, If a user wished to create a new SharePoint data enabled Power Apps form, would you recommend a new modern responsive screen template with Gallery or a Table Control to list the data items?
Gallery for now as Table control is not GA yet
It would be nice content for skills improve with new approaches...
Thanks
Great stuff!!!
Thanks!
Hi Community and Reza!!! amazing video and I would like to know the next... is there any recommended technique to modify the table where all items are shown to add buttons which allow editing an item?
Your question is not clear
@@RezaDorrani thank you for taking the time to respond and my sincere apologies for not explaining myself properly in the first place. My question is about how can I create an experience to allow user selecting an existing item from the table to view/edit, something like adding a custom card with a view/edit button as I can see from tables there is no straightforward method for it and wanted to know if there is a recommended tutorial for it. Again, thank you for the time and amazing video :)
@@facun_OK I did a tutorial video on table control. Try checking that.
@14:25 when you hit the "View request" button how did the varStep setted to 4 and the steps list showed up all green? Did you add "set(varStep,4)" to the OnSelect property of "View request" button?
I check formmode and accordingly change color. I show that formula in video.
@@RezaDorrani what i didnt understand (and now i did) was the selection table column "Current: varstep=4" . At first it was weird for me cause i thought i was setting a value for varStep in "Current" column. And now i got that it works like "if varStep=4 then Current = true" so the circle turns to green. Great work, i liked your videos on youtube.
This is a nice solution, thanks for sharing. When I click on an item from the table, it does not take me to the specific item in the form display--it simply stays highlighted. At the end of your video, you have created a button to "View Request". Can you explain how that works?
Video description has link to download entire solution (members only - check description for details)
I have not come across the mentioned issue and hence not sure what is the cause for your issue.
Once again there is a great lecture. will you please make a video on userphotometadata blank value on userid
Welcome!
I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post.
That is a novel way to use the Approval screen template.
Reza, is fhere a way to have the required fields show in red font? A lot of end-users will zip through forms like this, and not realize that they are missing required fields, without a more refined visual indicator.
Yes, if you notice my first screen, the require fields do show up in red font.
The modern controls are in preview and hence not all controls show the red font currently. But you could always check the validation state of the control and accordingly show the color.
In every card, there is a "ErrorMessage" controller. Click on that and go to the "Style and theme", there you can edit the Font weight and color 👍
Very Nice! and fast
Thanks!
Hey Reza! Love your videos. I want to join your channel as a premium member. But do your "gold" members really only have access to 90 days of flows and apps as mentioned in the description? I figured those you'd keep historically for that tier.
Gold members have access to all recorded videos. Access to app and flow resources is restricted to 90 days but I am always open to re-opening specific links upon request.
Hi @Reza. I want something like I'm creating a news post in a site and same news post will be copy to my another site by a power automate flow. News post is like site page and don't saving any data in sharepoint list.
Can you please help me to build a flow for this? It'll be kind enough.
Thank you.
I do not have a video reference on this scenario and would have to try it out to provide guidance. I will recommend checking or posting your query on forums in case someone has experienced something similar powerusers.microsoft.com
I'm a beginner, but I often feel limited by the form control. What would be the important changes to do, if I wanted to create the same experience but using patch commands instead?
I would have to try the scenario out to know what changes would be needed. I will recommend checking or posting your query on forums in case someone has experienced something similar powerusers.microsoft.com
Not sure if this is new or just appeared in our tenant, wondering if you know how to hide the "info" icon in the header. We don't want to hide the whole PowerApps header just that icon since the hover over is showing description/comments from the last published version and the created by person (not the owner) which is going to confuse end users.
Thanks for all the videos! Very helpful for our developer community!
Not sure what icon are you referring to.
In our PowerApps header we started seeing a circle with a lowercase letter i in it after updating our default tenant theme. When you hover over it the app description and created by values display which are not always relevant if this is an older app and the creator is no longer the owner.@@RezaDorrani
Also Reza… I had one request for future if you can do.. in our org, we build apps where we put images on home page and other relevant pages to create a UI. I have understood that there are limitations… but if you have had an opportunity to handle it better… please share or if there is any article that can help, I would appreciate it.
I have no plans for a video on this topic.
My rule for making videos is set - “I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post. “
Wow - a whole new way of doing things for me from now on. I have add to delete and add back fields - date fields were showing "object errors" but when I removed from Form and added back they worked. I am however left with one problem - in my list I have a Person field - and for some reason I can only pick from a 5 digit number - names not showing - I know Person fields are a pain with all the different elements to them - but I really want to use it. An alternative would be to use the name of the person completing my form to be the default for this field. Any help gratefully receveid.
Person fields are currently not supported by modern controls. Alternative will be to use classic combo box.
@@RezaDorrani thanks
Hi Reza, That Ctrl+Z logic for selecting DatacardKey & Datacard Value in a form does not work anymore. Right ?
You mean the one to select all data cards?
That does work
@@RezaDorrani Yes Correct. I don't know that's not working for me.
@@techwithchanchal Im not sure why
@@RezaDorrani No worries, Thank you for your reply. 😀
Hi Reza, the default view of the Table control's columns are in the Compressed state. The user has to expand all the columns whenever they refresh the app.
Is there any way to fix the width of the columns in the Table like we do in excel?
As an app maker, once you set the widths in edit mode and publish, the same width holds for users running the app.
But for modern Table control, there is no option to set the width for columns.
I tried to set the width by expanding the columns while app making, but after publishing the app the columns are compressed
I am talking about modern table control only. When editing the app, simply hold alt key and set the widths.
Great technique for creating Multi-Step Form. Certainly another tip to add to my armoury for subsequent projects. Thanks for sharing.
Very welcome!
Hi reza sir, how can I get power apps developer job as a fresher?
I have no clue about that.
Hi Reza is there a way to find whether the current logged user in powerapps male or female
I don’t know if that’s an option
@@RezaDorrani thanks for your confirmation 😍
Hi, I m new to IT field, can you pls make a small video how to use ur project from github and can create my own. Love ❤ fro. India
Which project?
Now I share all my apps/flows with channel members (silver and above)
It includes read me docs which includes steps on how to install.
@@RezaDorrani kanban board I m interested in which you made long time back 5 years ago...
@@sanskritisabhayta I have no plans to revisit content shared years ago.
My rule for making videos is set - “I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post. “
Ok sure, anyways good work thank you... I have learned a lot from you.
Please what if I want to edit?
Similar to viewform function there is an editform function.
Look good, but little difficult to understand as beginners that variable and other stuff
Thanks for the feedback