cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Slaverty
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
v-yutliu-msft
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

5 REPLIES 5
v-yutliu-msft
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

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

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
Advocate III
Advocate III

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
Frequent Visitor

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.

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

Top Solution Authors
Top Kudoed Authors
Users online (39,506)