From the course: SharePoint Online: Migrating from InfoPath to PowerApps

Tabbed forms: Create the tabs

From the course: SharePoint Online: Migrating from InfoPath to PowerApps

Start my 1-month free trial

Tabbed forms: Create the tabs

- [Instructor] So as we've seen in some of the examples that we've been looking at, lists that have a lot of columns are going to result in forms that users will have to scroll down to see everything. A lot of people find this unacceptable for UI and aesthetic reasons. So what can we do about it? Well, we've already looked at resizing the form and the data cards, so that might do the job, but how about setting up a tabbed form where only certain fields are visible at a time? You can think of this process as having three major areas. Creating the tabs and the associated aesthetics, associating the data cards, and the final programming that ties it all together. The thing is, you can't really do them in a completely logical order without throwing up error messages while you go. You eventually fix them, but it's kind of disturbing, so I'm going to jump around a little bit. You may be wondering why I'm doing what I'm doing when I'm doing it, but please, just bear with me. Now I've already created a new list and started my form. For the sake of time, there aren't a huge amount of fields, but the principle would be the same with 10 times as many. Now I'm going to start by changing the fill for the form, the color fill for the form, and let's pick, that's nice, that looks good, okay. Now I want to also drag the form down a little bit from the top of the screen so that we give ourselves a little room to work with. Now here's something I want to show you. I don't like the way that Microsoft labels things generally in PowerApps, like the name form screen one for the screen. Now since forms and screens are very different things, I think this nomenclature is kind of confusing. So I'm going to use sort of standard programming abbreviation, and I will call the screen, we'll rename that to just be screen one. And then the form, we will rename that to be F-R-M, form one, but watch this. While I select that name, watch what happens. Look. (chuckles) This is great. All of my data cards disappeared. So now this is one of those really weird things that I warned you about in PowerApps where occasionally, the program will just mysteriously decide to change things. And what's happened is that it set all of the widths of the data cards to zero when I changed the form name. Crazy, but the good news is, it's really pretty easy to fix. I'll hold down control and click on the different cards. Is that all of them? Yes, we've selected all of them and I can change the width on all of them at once, and since I know my form is 444 pixels wide, I make that the width and bam, everything's back in place. Hurrah. Okay, now I'm going to create tabs. So what I want to do is I'm going to insert a button and it's going to put my button in there. Now I want to set the size on this to 100 wide and 50 tall, and I also want to set the font a little bit bigger we'll say 15, and I'm going to change the name that here, the text that is showing the label from button, I'm going to call it tab number one. And I am also going to rename it over here, just so that we have a simpler name and we know what it is, tab one. Okay, I know that tab this and tab that, it's all very highly original. That's the way it's going to be. Now the other thing I want to do on this, I'd like it to have like, rounded corners, you know, like a tabbed file does. So I'm going to click on the advanced properties and I'm going to scroll down to radius top left. I'm actually, I have to click more options so I'm going to make radius top left 15, and radius top right 15, then you can see I've got nice, rounded edges now. And I'm going to take it and I'll drag it up to the top and then I'll click on the form, make sure I get the whole form, and I'll just drag that up to meet. There we go. So we have a tab now. Okay, that's all we're going to do for right now. In the next video, we're going to start working on complicated stuff.

Contents