cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate III
Advocate III

Powerapps Components - Navigation

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!

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Community Support
Community Support

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:

8102.PNG

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.

8103.PNG

 

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:
8104.PNG

 

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

8105.PNG

 

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

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

2 REPLIES 2
Highlighted
Community Support
Community Support

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:

8102.PNG

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.

8103.PNG

 

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:
8104.PNG

 

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

8105.PNG

 

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

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

Highlighted

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

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (7,166)