Solved: Reset Gallery.Selected value and passing values be...

UB400 · ‎03-25-2017

I'm using a "small image" gallery for the User to browse and select an image, on selecting the Image a larger image gallery is displayed, for which the DataSource is the "small image" gallery.

I've set the default value of the "large image" gallery to GallerySmallImage.Selected, so that when the user selects an image in the "small image" gallery, the "big image" gallery pops up showing the same image only larger.

If the User then continues scrolling through other images in "big image" gallery, on exiting the "large image" gallery, the same image that was last selected in the "large image" gallery should be shown in the "small image" gallery.

Currently once the User exits the large image gallery from a different image than the one that was orignally selected in the "small image" gallery the two galleries go out of sync and show different images when moving from one to the other.

Any way of resetting Gallery.Selected value?

mr-dang · ‎03-26-2017

I think I understand this: you want the small image gallery (thumbnail gallery) to move to whatever was last seen in the large image gallery (pop-up gallery). I would say that the behavior you're experiencing is working as expected though.

I asked a related question a while back--the premise is how do you get a gallery to reset to viewing a specific record. For any of this to work, you will need both galleries pointing to the exact same collection or datasource.

You will encounter circular logic if you want the pop-up gallery to view the selected thumbnail (Gallery1.Selected), and then the thumbnail gallery to jump to whatever pop-up you swiped to (Gallery2.Selected):

To solve this, you will need to use a context variable: upon selecting a thumbnail, you will set what record you want viewed in the pop-up gallery, and upon exiting the pop-up, you will set what record you exited on to view in the thumbnail gallery.

In my example, I set Image1.OnSelect in my thumbnail gallery to:

UpdateContext({view: ThisItem})

I also set my Image2.OnSelect in my pop-up gallery to:

UpdateContext({view: ThisItem})

Next, I set the Default property of the pop-up gallery to:

First(Filter(datasource,UniqueColumn=view.UniqueColumn))

This means the pop-up gallery will show the first record in your datasource which matches the item you selected in your thumbnail gallery and set as the 'view' variable (or whatever you named your context variable). You just need to use a column which has unique values so that the galleries can pull up the correct record.

Also set the Default property of the thumbnail gallery to:

First(Filter(datasource,UniqueColumn=view.UniqueColumn))

Since the two galleries point to a context variable for their Default property, there is no circular reference between the galleries. Note that this solution will cause the thumbnail gallery to make any record you click to be brought to the top of your view.

Microsoft Employee
@8bitclassroom

View solution in original post

mr-dang · ‎03-26-2017

I think I understand this: you want the small image gallery (thumbnail gallery) to move to whatever was last seen in the large image gallery (pop-up gallery). I would say that the behavior you're experiencing is working as expected though.

I asked a related question a while back--the premise is how do you get a gallery to reset to viewing a specific record. For any of this to work, you will need both galleries pointing to the exact same collection or datasource.

You will encounter circular logic if you want the pop-up gallery to view the selected thumbnail (Gallery1.Selected), and then the thumbnail gallery to jump to whatever pop-up you swiped to (Gallery2.Selected):

To solve this, you will need to use a context variable: upon selecting a thumbnail, you will set what record you want viewed in the pop-up gallery, and upon exiting the pop-up, you will set what record you exited on to view in the thumbnail gallery.

In my example, I set Image1.OnSelect in my thumbnail gallery to:

UpdateContext({view: ThisItem})

I also set my Image2.OnSelect in my pop-up gallery to:

UpdateContext({view: ThisItem})

Next, I set the Default property of the pop-up gallery to:

First(Filter(datasource,UniqueColumn=view.UniqueColumn))

This means the pop-up gallery will show the first record in your datasource which matches the item you selected in your thumbnail gallery and set as the 'view' variable (or whatever you named your context variable). You just need to use a column which has unique values so that the galleries can pull up the correct record.

Also set the Default property of the thumbnail gallery to:

First(Filter(datasource,UniqueColumn=view.UniqueColumn))

Since the two galleries point to a context variable for their Default property, there is no circular reference between the galleries. Note that this solution will cause the thumbnail gallery to make any record you click to be brought to the top of your view.

Microsoft Employee
@8bitclassroom

UB400 · ‎03-28-2017

@mr-dang Thank you for the instructions, while they did not work in my particular scenario, it's definitely something to keep for future use.

I had one more complication and it would not work as hoped. I have in effect three Galleries. The App basically contains a list of articles, selecting an article brings up a thumbnail gallery with images for that particular article.

The first one is a Navigation gallery which lists articles. On selecting an event in the first Gallery, it brings up Gallery No 2, which contains the thumbnails. Selecting a thumbnail in Gallery 2, brings up Gallery 3 which has the full size image.

When I first select an article in the first gallery, the behaviour is correct i.e. it brings up the correct thumbnails in Gallery2, selecting the thumbnail in Gallery 2 brings up the correct full size image in Gallery 3. If I then select a different image in Gallery 3, it will also take me to the correct image in Gallery 2.

However if I select a different article in Gallery 1, it then breaks the behaviour, while it loads the correct thumbnails in Galleries 2 & 3, it breaks the "sync" between them.

Any suggestions?