How to create reusable Form Tabs component (tabbed Forms) or Form Sections in Power Apps

In this tutorial, you will learn how to organize your power apps forms using Form tabs or Form sections i.e. how to create tabbed forms or Form tabs in PowerApps. We would be leveraging components so this Tabbed form functionality can be easily reused across apps or screens.
Video ID: #PP_0001
📥 App and Dataset Download for Members (on KZbin or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For KZbin Members: Check the membership tab on the channel page for the download links.
For Patreon Members: Download links will be available on the Patreon Page
🎁Not a member yet. Join the Tolu Victor Community:
KZbin- / @toluvictor
Patreon- / toluvictor
Table Of Contents
00:00 - Intro
01:18 - Create Form Tabs Component
17:18 - Toggle Form Fields visibility based on selected Tab
21:50 - Create Form sections
26:15 - Toggle Form Fields visibility based on selected Section

[@arbieblasquillo4282]

Amazing! New subscriber here. ☺️ Hope to learn more on your modern designs.

[@toluvictor]

That's great 👍

[@MichaelDeBlasis1369]

TY for all you help and for taking the time to share this. I just learned you can also make these tabs for a gallery as well. Very useful info. You should do a second video showcasing that and you could piggy back off this video so you don't have to show building the component again. It could showcase things like reusing a component in other places in your app, how you can add tabs to a gallery to save on space, and with the time savings from not having to remake the tabs, you can go into other related topics or use cases for the feature. ;) Cheers Sir!

[@wendymeyer1250]

Love your stylish app designs. Always a beautiful and modern UI. So inspirational!

[@toluvictor]

Glad you like them!

[@toluvictor]

Glad you like them!

[@maheshgupte1495]

Thank for making this Tutorial, May Request you to please create 1 more Tutorial with Adding input data to a share point lists and also we can leverage user for editing. it will help a lot to new folks like use who is trying to learn power App Thanks in Advance

[@MichaelDeBlasis1369]

Great Video! TY

[@toluvictor]

Glad you enjoyed it!

[@TinaDerby01]

You are wonderful! Thank you sooo much for sharing your knowledge and skills!

[@toluvictor]

Thanks for watching!

[@user-jk3tf9wl9i]

This is wonderful, thanks.

[@boda4413]

That helped me a lot. Thanks for your valuable videos!

[@toluvictor]

Glad it helped!

[@gabrielosaji8920]

Thanks for this, please can you make more videos weekly

[@thecloudmission]

I really appreciate your videos, it helped me a lot. God bless you 🙏

[@toluvictor]

Thanks for the kind words 😁

[@rogerbovell5074]

Hi Tolu, thank you for sharing. Great tips. My SharePoint list form opens with all tabs deselected, but works when i select a tab. How do i ensure the form opens with the first tab ID=1 is selected by default when the form opens? I have tried adding Set(outCurrentTab , 1) to OnStart property of App as well as OnView\ OnNew without success

[@suryanshkushwaha]

hey dude! Did you find a workaround for this? I am stuck at the same stage!!

[@suryanshkushwaha]

I realised, he has already given the answer below, please go do check!

[@rogerbovell5074]

Thanks, that's essentially what I did after googling.

[@ParaagPatel]

Great Video! How are you testing in the same window as you are putting the component together? Like when you are testing the buttons.

[@toluvictor]

Hi Just hold down the alt key

[@hernandomoreno7608]

Thank you very much for sharing this video. This such a fantastic feature to consider. I have a question, though. How do you set the default in the gallery tab so it will always highlight the first tab?

[@toluvictor]

Since this was created as a component, I added this code to the OnReset property of the component " Set(currentTab, First(FormTabsComponent.inTabLabels).TabLebel)" and then onVisible of each screen I just reset the component as so "Reset(componentname)". If you dont want it to default to the first always, just configure it however you want in the OnReset property. e.g. Set(currentTab, "Other Details")

[@ianhamid]

Hi Tolu, am testing out the form section. It works okay when DefaultMode is FormMode.Edit. But when I changed to FormMode.View, the chevron button would not work. I did quick check and the UdpateIf could be the issue. Would like to hear from you on this one.

[@toluvictor]

Hello Not really sure whats causing your issue, but If I had to guess, I'd say the "DisplayMode" property of your chevron button is set to get its value from the Form, either indirectly through "Parent.DisplayMode" or Form.DisplayMode. The solution here would be to set the display mode of your button to always be DisplayMode.Edit. You can also check to see if nothing is blocking the button while the form is in edit mode

[@glennbullion9069]

Why do you set the height and width as custom properties? Can you set the height and width from the app container where you call the component?

[@toluvictor]

I noticed some sizing inconsistencies doing it that way. But in theory either way should work fine

[@MichaelDeBlasis1369]

How do I set the form to always open to the same tab?

[@toluvictor]

Since this was created as a component, I added this code to the OnReset property of the component " Set(currentTab, First(FormTabsComponent.inTabLabels).TabLabel)" Then onVisible of each screen I just reset the component as so "Reset(componentname)". If you dont want it to default to the first always, just configure it however you want in the OnReset property. e.g. Set(currentTab, "Other Details")

[@MichaelDeBlasis1369]

@@toluvictor TY