Powerapps Components - Navigation

[Slaverty]

Hi Folks,

Just getting started with Components, really want to migrate over to using them but getting stuck at two points.

The first, and most important, is it possible to set a formmode from a component?  For example, if you had a header component with an "Add" and an "Edit" option, how would you do the usual "NewForm()" / "EditForm()" commands?  

Entering them as I normally would doesn't work, trying to create a custom input property with the form name contained within doesn't seem to work.  Is this just not possible?

Second problem is passing values from one screen to another via Navigate (eg Navigate(screen1, transition.None, {variable1: Value1}).  Tried a few variations on this without success.  Best work-around I came up with is having the component trip a timer which, on timer end, performs the navigate passing the value taken from the component, which is pretty convoluted and messy.

I've tried googling for hours and the lack of content lead me to believe either I'm missing something obvious or no ones really using components..

Cheers!

[v-yutliu-msft · Accepted solution]

Hi @Slaverty ,

Do you want to use buttons inside component to change form's mode and navigate?

Since there's no custom action property inside component, so you need to use controls outside the component for these two feathers.

I've made a similar test for your reference:
1)use buttons inside component to change form's mode

Since you want to change form's mode between edit and new, so I suggest you use toggle.

In component, insert two buttons.

button1's OnSelect:

Set(var,"add")

 button2's OnSelect:

Set(var,"edit")

create a new custom property:

set component's varvalue:

var

outside the component, in the app.

insert this componnet

insert a toggle

set the toggle's Default:

If(Component1_1.varvalue="add",true,Component1_1.varvalue="edit",false)

set the toggle's OnCheck:

NewForm(Form1)

set the toggle's OnUncheck:

EditForm(Form1)

Then if you click button1, the form's mode will change to new. If you click button2, the form's mode will change to edit.

2)use buttons inside component to  navigate

in the component, insert button3 and a timer

set button3's OnSelect:

Set(var1,"navigate")

set Timer's AutoStart:

var1="navigate"

set timer's duration:

100

set timer's OnTimerEnd:

Set(var1,"back")

create a new custom property:

set the component's navigatevalue:

var1

outside the component, in the app

insert this component, insert another timer

set timer2's AutoStart:

If(Component1_1.navigatevalue="navigate",true)

set timer2's duration:

200

 set timer2's OnTimerEnd:

Navigate(Screen1, ScreenTransition.None, {variable1: "test"})

Then if you click that navigate button, you will navigate to another screen and pass that variable.

(The reason why I also use a timer inside the component: to change var1 to "back" inside the component after you trigger the action of navigating. Or else the feather of navigating could only work once.)

 What's more, you could set the toggle and the timer's visible to false.

Best regards,

[Slaverty]

@v-yutliu-msft 

Hi,

Thanks for your detailed reply, this really helped a lot, particularly the 2nd option with the timer inside the component and outside.

It's for header and navigation components, so figure what I'll do is have the button's OnSelect do:

Set(var: "whatever screen this button represents")

Then the component timer will start when 

var <> "RESET"

OnTimerEnd will then be

Set(var: "RESET")

Then the timer outside the component, in the app, would also start when

Component1.var1 <> "RESET"

And finally the outside OnTimerEnd will be a switch like

Switch(
   Component1.var1,
   "HOME", Navigate(HomeScreen),
   "Edit", EditForm(Form1); Navigate(EditScreen)
ect
ect
)

Initial testing all looks positive!  So thanks again.

[PJamez]

Whilst I appreciate your very thorough and detailed answer, what in the actual hell!!!!???? This is not directed at you, but the power app team, why is it not possible to navigate from inside a component!? I want a home navigate button on every screen and I have to use extra variables and timers, seriously. Another case of the Microsofts strikes again, 3/4 of the way to being something great and then mark it done. Happens with pretty much everything Microsoft does and it is so sad and annoying.

[Slaverty]

Yeah, the components are a bit to get your head around.  If all you're looking for is a single navigation button, using components might be a bit overkill.  I wanted to use them cause I was creating a navigation bar with 6 buttons across about a dozen screens.

For your home button, personally I would just create one home button on one of your pages, make sure you get it working and looking how you like then just copy/paste it to the other screens you need it on.

If you want to future proof a bit you can assign variables to your button's design properties (font, colour ect).  This way, if you want to make a design change down the line you'd just need to update your variable and not each of your buttons individually.

[PJamez]

This is basically what I did. Fortunately I do not have that many screens. I created an invisible button over the home button displayed on the component. I lose the click animation but I don't think that will be an issue.

[Anonymous]

I came across the same scenario that i need to navigate to the New Form while clicking on the button in the Navigation component. It puzzled me some time and i finally figured out a simple easy way.

All you have to do is to Enable the Access App Scope of the component. 

Set the button.OnSelect = Set(varProjectFormMode, FormMode.New);Navigate(ApplicationHeader.ManageProjectScreen, None);

In the application screen  OnVisible = If(varProjectFormMode = FormMode.New, NewForm(ProjectForm), EditForm(ProjectForm))

Check out more details about the component scope: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-component

Hope that helps. 🙂

Thanks

[Slaverty]

@Anonymous Thanks for the update.  Looks like this is a feature that was introduced in August this year, will need to keep that in mind for next time, definitely a lot easier than the old method!