Button OnSelect Change Image

[Field]

Hello there,

I have 5 images that i want to put on my app. I have one image gallery and i want to show a new image everytime the user clicks a button.

So, i have image 1,2,3,4,5. It starts with 1, user clicks the button and goes to 2, and so forth. On 5, it goes back to 1 again.

How can i achieve this? I Have tried with variables but i can only use 2 images instead of 5.

Thank you

[Anonymous · Accepted solution]

Hi,

I had the same problem a week ago.

The problem is that images names have a certain type, and we cant make a mathematical operation on that.

That's what I did :

Screen.OnVisible :
Set(PageNumber,1);
UpdateContext({ImageTable:Table(    {img:'1',img_name:1},
                                    {img:'2',img_name:2},
                                    {img:'3',img_name:3},
                                    {img:'4',img_name:4},
                                    {img:'5',img_name:5})
})

Button.OnSelect :
If(
    PageNumber = 5,
    PageNumber = 1,
    Set(PageNumber, PageNumber + 1)
)

ImageField.Image :
LookUp(ImageTable;img_name = PageNumber).img

Add the number of images you want and it will be working always 🙂

I hope it helps you.

Best regards,

Louis

[SimonPiquer · Accepted solution]

Hi,

If you set the Image's 'Image' property to = SelectedImage and the images you have added to your app are named 1-5, you can use this formula on the button's 'OnSelect' property:

If(
    SelectedImage = '1',
    UpdateContext({SelectedImage: '2'}),
    If(
        SelectedImage = '2',
        UpdateContext({SelectedImage: '3'}),
        If(
            SelectedImage = '3',
            UpdateContext({SelectedImage: '4'}),
            If(
                SelectedImage = '4',
                UpdateContext({SelectedImage: '5'}),
                If(
                    SelectedImage = '5',
                    UpdateContext({SelectedImage: '1'})
                )
            )
        )
    )
)

[yashag2255 · Accepted solution]

Hi, 

You can use the below steps to configure this:

App -> OnStart ->  ClearCollect(imagecollection,'image1','image2','image3','image4','image5')

Screen -> OnVisible -> Set(ImageIndex,1);Set(SelectedImage,Last(FirstN(imagecollection,ImageIndex)).Url)

Button -> OnSelect -> If(ImageIndex = CountRows(imagecollection),Set(ImageIndex,1),Set(ImageIndex,ImageIndex +1));Set(SelectedImage,Last(FirstN(imagecollection,ImageIndex)).Url)

Image Comtrol -> Image -> SelectedImage

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[Field]

Hello guys,

Thank you for the help, all the solutions provided work!

Thank you so much.

[131]

in my case i have a button to show/hide the image
when selected i used the onclick to Set(counter,1)

addition navigation button will increase / decrease Counter value
since i have 3 images per category
the next button on click: If(Counter=3, Set(Counter, 1), Set(Counter, Counter+1))
the back button on click: If(Counter=1, Set(Counter, 3), Set(Counter, Counter-1))

the image.image:
If(logical test) = "matching condition",
Switch(Counter,1,image#1, 2, image#2, 3, image#3))

can have nested if also with same method of switch.
once image is closed the set Counter value to be 1 again - use as a default image you want to show on 1st show