cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Post Prodigy
Post Prodigy

Progress Indicator - Tabbed Form

Hello Everyone,

 

I have an application of Travel Request, in which I have created a Tab based Create From
Tab_Based_Form 2.jpgTab_Based_From.jpg


There are some required fields in each tabs as well, I actually want to guide the user that he/she have to go tab by tab to enter the information and then press the save button to save the record.

 

but I can't find a way to do like that, if the user fills the title box, then the 2nd Tab should reveal, and then user inputs some required fields in there then 3rd tab should reveal this will help the user that he/she have to enter information in a step by step format.

 

Any Help!!
@WarrenBelz  @aprildunnam 

7 REPLIES 7
Super User II
Super User II

Hi @MH3!

 

You can do this in a number of ways, one of them is to use variables.

 

So during the OnChange event of your Title textInput within Travel Request Tab, you set a variable to show that this form has been entered:

Set(TravelRequestEntered, true)

 

And then the Traveller Information tab's Display Mode setting becomes:

If(TravelRequestEntered, DisplayMode.Edit, DisplayMode.View)

That way it will grey-out/disable the button until something has been entered.

 

Then we'd do a similar thing for the other tabs:

 

OnChange of the Name Dropdown within Traveller Information tab (or any other control, for example maybe you only want the tab to show after TeamLead is filled, so you'd set it on the OnChange of that) :

Set(TravellerInformationEntered, true)

 

Then have your Trip tab's DisplayMode set to:

If(TravellerInformationEntered, DisplayMode.Edit, DisplayMode.View)

 

Then repeat this process for the other tabs.

 

Happy to help further if you get stuck with anything! 😺

 

Cheers,

Sancho


@iAm_ManCat

Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


Dear Sir @iAm_ManCat 

 

I did what you said, but I getting an error.

I actually want to hide those buttons, when the user comes at first in creating a new record he/she should see Travel Request button, and when the user inputs all the *Required* Fields there then the next button should show up.

 

in this way it will help the user that the next step is to enter Traveller Information and etc for all the buttons.

 

Help Please!

Ok, so in the Visible property of the other tabs, we add the check for the variable, but instead of just one variable we would have multiple conditions. Like: if this and that and that and that then set variable

 

What was the error you were getting, could you please paste a screenshot of the error by hovering over the part with red lines?

 


@iAm_ManCat

Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


Hello @iAm_ManCat 

I have fixed the error, it was a typo, but the thing is it does not hide the button, what I need is to hide the button when the (Required Fields) are all filled in and then the other button should show up.
title_Box.jpgTravelInfo_Box.jpg

Right now it's not happening like this

 

Help !!

ok, so if we don't want it to display at all unless there is a value,we wouldn't use DisplayMode, we'd use Visible:

Visible  = If(TravelRequestEntered, true, false)

 

Could you try that on the Visible property and let me know if that works for you?


@iAm_ManCat

Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


Hi @iAm_ManCat 

 

I did that, but nothing happend, that button is shown even there is no input on Title InputBox|

Before Input
Before inputBefore input

After Input
RunApp_2.jpg
Title Box:  > OnChange Property:
 = Set(TravelRequestEntered,true)

Travel Information Button: BtnInfo > Visible Property:
= If(TravelRequestEntered, true, false)

What's wrong here, why it's not working



If you have typed in that box already, before you took the 'before input' screenshot, then that variable will already have been set during this editor session - you can check if its set by either using a label set to that value or by using the formula bar and clicking on the variable, which should show its value below

 

If you want to debug, have a separate button that sets all of the variables back to false or have them on your App onStart so that you can run App.OnStart whenever you need a reset 🙂


@iAm_ManCat

Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


Helpful resources

Announcements
New Badges

New Solution Badges!

Check out our new profile badges recognizing authored solutions!

New Power Super Users

Congratulations!

We are excited to announce the Power Apps Super Users!

Power Apps Community Call

Power Apps Community Call: February

Did you miss the call? Check out the Power Apps Community Call here.

Top Solution Authors
Top Kudoed Authors
Users online (37,806)