Solved: Navigation from Dialog Components

Anonymous · ‎03-09-2020

Hi All,

I have created a pop up as component in Power apps. Imported the component in the form.

There are two buttons created in the component - Cancel and Home

On click of Home it should navigate to Welcome Screen - the first screen in my app.

I am trying to do it by Navigate(Welcome) but its not working. Is there any other way of doing this ?

Thanks a lot . Appreciate your response.

v-yutliu-msft · ‎03-10-2020

Hi @Anonymous ，

Do you want to

navigate to the “Welcome Screen” by the button in “pop up” component?
make the “pop up” component” invisible by clicking the cancel button in “pop up” component?
make the “pop up” component” visible by clicking the submit button outside “pop up” component?

Firstly, let me explain why you met the problem that you can’t navigate to the “Welcome Screen” by the button in “pop up” component:

I’m sorry to inform you that the navigate function is not available because the component has no behavior property.

In order to improve the use experience of component, I sincerely invite you to vote for this idea:

https://powerusers.microsoft.com/t5/Power-Apps-Ideas/Actions-on-Components/idi-p/238399

What's more, you could not directly use the variable that is created inside the component.

To solve these problems, you could use the solutions mentioned in the above link:

1)create a custom property for the component to call these variables created inside the component

2)use Toggle's OnChange property to connect the variables and the behavior

I’ve made a similar test for your reference:

Step1:create a new component(Component1_1) and add two new custom propertys(CustomProperty1\ CustomProperty2).

Step2:Add a button(Home) and set it’s OnSelect property to:

Set(var,!var)

/* ‘var’ is a custom variables in component1*/

Step3:Set the Component1’s CustomProperty1 property to:

var

Step3:Add a button(Cancel) and set it’s OnSelect property to:

Set(var2,!var2)

/* ‘var2’ is a custom variables in component1*/

Step4:Set the Component1’s CustomProperty2 property to:

var2

Step5:Back to the screen and add the Component1

Step6:Add a toggle control(Toggle3) and set it’s default property to :

Component1_1.CustomProperty1

Step7:Set Toggle3’s OnChange property to :

Navigate(Welcome)

Step8:Set Toggle3’s visible property to :

false

//toggle3 call out the variable when you click the Home button

Now you can navigate to welcome screen by clicking the “Home” button.

Step9: Add a button(Submit) and set it’s OnSelect property to :

Set(var3,true)

/* ‘var3’ is a custom global variables*/

Step10:Add a toggle control(Toggle4) and set it’s default property to :

 Component1_1.CustomProperty2

Step11:Set Toggle4’s OnChange property to :

Set(var3,false)

/* ‘var3’ is a custom global variables*/

Step12:Set Toggle4’s visible property to :

false

Step13: Set the Component1’s visible property to:

 var3

//Toggle4 call out the variable when you click the Cancel button

Now you can “close” the “pop up” component by clicking the” Cancel” button

The “pop up” component will be “awakened” by clicking the “Submit” button.

Since you use component, I think this link may help you a lot:

Create a component for canvas apps: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-component

If you still have any question please don’t hesitate to let us know.

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

PowerAddict · ‎03-09-2020

Hi,

Are you getting any error? Are you able to Navigate to any other screen?

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Hardit Bhatia
The Power Addict
https://thepoweraddict.com

Anonymous · ‎03-09-2020

No ia m not able to naviaget to any screen . I am not able to even close the dialog box if i click on Cancel button in pop up box.

pop up box is created as component and imported to my form.

PowerAddict · ‎03-09-2020

Is it possible for you to show how the component looks like and its properties? If it's just used for navigation, why not use buttons? At least for testing purposes, can you use Navigate function on the OnSelect property of a button and check if you are able to navigate?

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Hardit Bhatia
The Power Addict
https://thepoweraddict.com

Anonymous · ‎03-09-2020

1. Created the component - Dialog Box which has

a) Label Description

b) Header

c) Button - Cancel On select property - set (var,false)

d) Button - Navigate to Home On select property - Navigate(Home) ERROR dont know why while the same code is working inside the form but not from the component

2. Grouped all the above

Properties of component and Group Attached

2. Import the component in the form .

visible property of component - If(var,true)

3. On button submit of the form set (var,true).

On submit button , pop up box appear when click on Cancel / navigate to home - button inside the pop up box nothing happened.

Hope i have explained the steps.

can you help?

PowerAddict · ‎03-09-2020

So it's a pretty straightforward component with no custom properties.

A few more questions:
1. "dont know why while the same code is working inside the form but not from the component" - are you saving when you have a button inside a form, it works fine?

2. Can you show me the these controls within group on the left navigation (where you see all your screens and controls)?

I am interested in knowing the sequence in which these components exist in your group.

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Hardit Bhatia
The Power Addict
https://thepoweraddict.com

Anonymous · ‎03-09-2020

here you go , attached

PowerAddict · ‎03-09-2020

Can you click on the 3 dots next to the Label in your group and select Send backward and bring it down below the 2 buttons? Basically, I want the order of controls within your group to be:

Button4
Button3
Label1
Form Heading_1
Rectangle1

Let me know if this helps.

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Hardit Bhatia
The Power Addict
https://thepoweraddict.com

Anonymous · ‎03-09-2020

I did the same .doesn't make any difference .

PowerAddict · ‎03-09-2020

Ok. Now I want to see where the group fits in with the rest of the controls on that screen. Can you show me the list of all controls on that screen along with the group?

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Hardit Bhatia
The Power Addict
https://thepoweraddict.com