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 KZread or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For KZread 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:
KZread- / @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

Пікірлер: 32

  • @arbieblasquillo4282
    @arbieblasquillo4282Ай бұрын

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

  • @toluvictor

    @toluvictor

    Ай бұрын

    That's great 👍

  • @MichaelDeBlasis1369
    @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!

  • @TinaDerby01
    @TinaDerby01 Жыл бұрын

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

  • @toluvictor

    @toluvictor

    11 ай бұрын

    Thanks for watching!

  • @wendymeyer1250
    @wendymeyer12504 ай бұрын

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

  • @toluvictor

    @toluvictor

    4 ай бұрын

    Glad you like them!

  • @toluvictor

    @toluvictor

    4 ай бұрын

    Glad you like them!

  • @user-jk3tf9wl9i
    @user-jk3tf9wl9i10 ай бұрын

    This is wonderful, thanks.

  • @boda4413
    @boda44136 ай бұрын

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

  • @toluvictor

    @toluvictor

    6 ай бұрын

    Glad it helped!

  • @thecloudmission
    @thecloudmission Жыл бұрын

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

  • @toluvictor

    @toluvictor

    Жыл бұрын

    Thanks for the kind words 😁

  • @MichaelDeBlasis1369
    @MichaelDeBlasis13692 ай бұрын

    Great Video! TY

  • @toluvictor

    @toluvictor

    2 ай бұрын

    Glad you enjoyed it!

  • @gabrielosaji8920
    @gabrielosaji8920 Жыл бұрын

    Thanks for this, please can you make more videos weekly

  • @maheshgupte1495
    @maheshgupte14954 ай бұрын

    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

  • @ParaagPatel
    @ParaagPatel4 ай бұрын

    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

    @toluvictor

    4 ай бұрын

    Hi Just hold down the alt key

  • @hernandomoreno7608
    @hernandomoreno76086 ай бұрын

    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

    @toluvictor

    6 ай бұрын

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

  • @rogerbovell5074
    @rogerbovell50743 ай бұрын

    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

    @suryanshkushwaha

    2 ай бұрын

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

  • @suryanshkushwaha

    @suryanshkushwaha

    2 ай бұрын

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

  • @rogerbovell5074

    @rogerbovell5074

    2 ай бұрын

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

  • @ianhamid
    @ianhamid3 ай бұрын

    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

    @toluvictor

    2 ай бұрын

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

    @toluvictor

    11 күн бұрын

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

  • @MichaelDeBlasis1369
    @MichaelDeBlasis13692 ай бұрын

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

  • @toluvictor

    @toluvictor

    2 ай бұрын

    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

    @MichaelDeBlasis1369

    2 ай бұрын

    @@toluvictor TY

Келесі