Change layout via button

[Anonymous]

I am using PA for personal use, mostly to learn. The other day my daughter was intrigued with the app and asked more about it, so we are both now learning how to use it. We decided to come up with a simple movie collection app. The app draws data from Excel and contains simple things such as Movie title, cover image, release date, runtime, etc. Currently the layout is set up as 2 movies across and 2 down. We wanted to have a button at the top that when selected would change the layout to a single movie view. We cannot figure out how to do this. My current workaround was to just create a second screen with the layout that we want. The problem that we are running into with this is what happens at the OnSelect, which have set to the image. On the first screen with the multiple movie titles, the OnSelect navigates to a screen with more details about the movie. When we select the single movie screen, the OnSelect navigates to the movie detail that was last viewed from the previous multi-movie screen. I cannot screen capture, so I'll try to explain. MultiScreen has 4 movies, Movie1, Movie2, Movie3, Movie4 in a 2x2 layout. If I select Movie1, it navigates to the DetailScreen for that movie. If we move back to MultiScreen and press a button setup for navigation to SingleScreen, this of course shows us 1 movie per page starting at the top of the list. If I scroll down to Movie4 and then navigate to the DetailScreen, PowerApps will navigate to the DetailScreen for Movie1, the previous movie detail viewed from MultiScreen. Ultimately I would like to just program the layout via button OnSelect but will use two separate screens if I have to and can get it to work properly.

Thanks in advance,

Randy

[hpkeong]

Hi Randy

Glad to have more friends here enjoying Apping with PowerApps.

May I know if you are:

- Using the Create Apps from Excel (say, in Dropbox) and autogenerate 3 screens apps?

- If yes, then whatever you click on gallery will navigate to detail screen and so on and so forth.

- You can always change the layout by choosing from Right Pane

However, if you are creating manually, then please let me know and I can try to guide you.

FYI, Manual navigation was ONLY explained in Tutorials from Jan ~ Ape 2016. After that, it was replaced with auto-generated apps.

Thanks.

[Anonymous]

I think my explanation was unclear; however, I am now able to upload screen capture that will hopefully better explain what I am trying to do. I have the two screens below. 'MultiScreen' was auto-generated by the app. I set the layout as shown. I want to have a button that would change the layout from 'MultiScreen' to then look like 'SingleScreen'. I don't know if that is possible. My workaround was to manually create an additional screen as shown 'SingleScreen' and then have a button, in this case an icon shown between "Movie List" and the refresh icon. The OnSelect for this icon navigates to 'SingleScreen' and viceversa. There are no problems with how this works. The trouble lies in what happens from here. If I view the details of a movie, the OnSelect is tied to the CoverImage of the movie, the app will navigate to a 'DetailsScreen' as shown below, this works fine. If I change view to 'SingleScreen' and then navigate to the 'DetailsScreen', the app will not navigate to the proper 'DetailsScreen' for that movie. For example, if I view the details of "(500) Days of Summer" from the 'MultiScreen', everything works great. If I go back to the 'MultiScreen', change view to 'SingleScreen', scroll down to another movie say "13 Going on 30", and select its detail view, the app brings me to "(500) Days of Summer" again, not the movie selected. Somehow the app is retaining my original selection and not looking at my new choice.

I hope this better explains what I am trying to accomplish. Thank you again for your help.

MultiScreenSingleScreen

 DetailsScreen

[murali]

@Anonymous

The detail screen is tied to the gallery that is displayed in 'MultiScreen' as that was how it was auto-generated. You could change it as follows:

1. You can flow context from one screen to another via Navigate function. Change the OnSelect property of the cover image (on both 'SingleScreen' and 'MultiScreen' to tack along the selected movie detail via Navigate(DetailsScreen, {SelectedMovie: Gallery.Selected}) where Gallery needs to be replaced with the gallery control name on 'MultiScreen' for that screen and the same goes for 'SingleScreen' as well.

2. The form control on 'DetailsScreen' should have an 'Item' property. Change that to SelectedMovie to indicate that it is being used to view the contents of SelectedMovie

Hope that helps.

Thanks

Murali

[Anonymous]

Thank you for your help. I am having difficulty with the wording of the OnSelect. In your example, what is 'Movie' refer to in "Navigate(DetailScreen1, {SelectedMovie: BrowseGallery1.Selected}) "?  I understand the principal but is it referring to a column in my db or something else? When I change the text to refer to my gallery as shown above, I am receiving an error that states, "Invalid argument type (Record). Expecting a Text value instead. The function 'Navigate' has some invalid arguments."

On the DetailScreen, the 'Item' property, should it be just SelectedMovie, Movie being the same as what is listed above or is there additional text that I am missing?

Again, thank you for your help!

[murali · Accepted solution]

It just refers to the selected movie. That's exactly what BrowseGallery1.Selected provides (in does provide addition information which we don't care about here).

It's not the Text property that we should change. It's the 'OnSelect' action of whichever control that helps you navigate to the 'DetailsScreen'. Is clicking on the image the one that takes you to the next screen? If so, it should be OnSelect action of Image control.

Hope that helps

Murali

[Anonymous]

I copied everything exactly as described but was still receiving the error mentioned before. Looking at the OnSelect though was missing the Transition Argument. Once I added that into the context, it worked brilliantly!!  Thanks for your all of your help!

[murali]

Oh, yes. I missed that. Glad to know that it worked.

Thanks

Murali