Random Image Switching in Power Apps

[Marc_Gutzwiller]

Hello everyone,

I want to have two images on the startscreen of my app that change every time the app starts. For this purpose, I have a SharePoint folder where various .jpg images are stored.

I currently have the following formula, but sometimes no images (BLANK) are displayed, or the same images appear at the same time. What can I do to fix this?

LookUp(
RandomisierteStartbilderPowerApps,
Rand() * CountIf(RandomisierteStartbilderPowerApps, !IsBlank(Miniaturansicht.Large) && !IsFolder) <= 1
).Miniaturansicht.Large

Many thanks for you help!  

[AmínAA]

Greetings!

As far as I can tell, this should be somewhat easy to accomplish . . . First, you would need to set up a LoadData() / SaveData() in your App.onstart, after which, you could make an If statement, in which you check what was the last image, in case there was no image, you set a variable to the default image, and in case there was an image, to check what image it was, and select the other one. Here's the code I'd use to achieve something like this!

Bear in mind you should enable the "SaveData, LoadData, ClearData in your web browser" option  in your configuration of the App, otherwise it won't work on web browsers!

OnStart property of App

//CREATE A COLLECTION WITH THE COLUMN IMAGE
ClearCollect(
    colMyUserData;
    {Image: Blank()}
);;
//LOAD THE LAST SAVED USER DATA
LoadData(
    colMyUserData;
    "lastImageSaved"
);;
//IF STATEMENT TO CHECK IF THERE IS AN IMAGE SAVED. 
//IF NOT SET A DEFAULT, IF AN IMAGE IS FOUND SET THE OTHER IMAGE
If(
    IsBlank(First(colMyUserData).Image);
    Set(
        varImage;
        "YOUR FIRST IMAGE"
    );
    First(colMyUserData).Image = "YOUR FIRST IMAGE";
    Set(varImage;"YOUR SECOND IMAGE");
    Set(varImage;"YOUR FIRST IMAGE")
);;
//SAVE THE VAR TO YOUR COLLECTION
ClearCollect(
    colMyUserData;
    {Image: varImage}
);;
//SAVE THE DATA FOR THE NEXT LOGIN
SaveData(
    colMyUserData;
    "lastImageSaved"
)

Hopefully this solves your problem, otherwise feel free to reply!

[Marc_Gutzwiller]

Thank you very much, @AmínAA . I adjusted the formula  to avoid showing the same pictures on both 'images'. However, I'm still encountering issues:

1. Ensuring that 'image1' and 'image2' are always different.
2. Handling situations where blank images still appear, and ensuring they are replaced with another random picture."

do you have a solution for that?

// CREATE COLLECTIONS WITH THE IMAGE COLUMN
ClearCollect(
    colMyUserData1,
    {Image: Blank()}
);
ClearCollect(
    colMyUserData2,
    {Image: Blank()}
);

// LOAD THE LAST SAVED USER DATA
LoadData(
    colMyUserData1,
    "lastImageSaved1"
);
LoadData(
    colMyUserData2,
    "lastImageSaved2"
);

// RANDOM IMAGE SELECTION FOR FIRST IMAGE
Set(
    varRandomImage1,
    LookUp(
        RandomisierteStartbilderPowerApps,
        Rand() * CountIf(RandomisierteStartbilderPowerApps, !IsBlank(Miniaturansicht.Large) && !IsFolder) <= 1
    ).Miniaturansicht.Large
);

// RANDOM IMAGE SELECTION FOR SECOND IMAGE
Set(
    varRandomImage2,
    LookUp(
        RandomisierteStartbilderPowerApps,
        Rand() * CountIf(RandomisierteStartbilderPowerApps, !IsBlank(Miniaturansicht.Large) && !IsFolder) <= 1
    ).Miniaturansicht.Large
);

// CHECK IF THERE IS A SAVED IMAGE AND SET THE APPROPRIATE IMAGE FOR FIRST IMAGE
If(
    IsBlank(First(colMyUserData1).Image),
    Set(varImage1, varRandomImage1),
    If(
        First(colMyUserData1).Image = varRandomImage1,
        Set(varImage1, "YOUR SECOND IMAGE"), // Toggle logic, can be adjusted as needed
        Set(varImage1, varRandomImage1)
    )
);

// CHECK IF THERE IS A SAVED IMAGE AND SET THE APPROPRIATE IMAGE FOR SECOND IMAGE
If(
    IsBlank(First(colMyUserData2).Image),
    Set(varImage2, varRandomImage2),
    If(
        First(colMyUserData2).Image = varRandomImage2,
        Set(varImage2, "YOUR SECOND IMAGE"), // Toggle logic, can be adjusted as needed
        Set(varImage2, varRandomImage2)
    )
);

// SAVE THE SELECTED IMAGES TO THE COLLECTIONS
ClearCollect(
    colMyUserData1,
    {Image: varImage1}
);
ClearCollect(
    colMyUserData2,
    {Image: varImage2}
);

// SAVE THE DATA FOR THE NEXT LOGIN
SaveData(
    colMyUserData1,
    "lastImageSaved1"
);
SaveData(
    colMyUserData2,
    "lastImageSaved2"
);

[AmínAA · Accepted solution]

Hi there @Marc_Gutzwiller, glad to hear you almost got this solved!

For your first issue, there are two ways . . .

1. When picking a random image, make an IF statement, to check if both images are the same, in case they are the same, make another iteration of that random image. This won't really ensure that both images are never the same, but it makes it exponentially harder, while maintaining the randomness.

2. When picking a random image, make an IF statement to compare both images, if they're both the same, point to a default image that is only used for that specific use case. In this case, while it's not truly random, it would be hard for anyone to notice that fake randomness.

I'm sure there could be other ways, but those two are the best solutions I can come up the top of my head as of now!

Now, for the second Issue, it depends on why the blank images appear. If it's a matter of loading time, in which a blank image appears and after some time, usually less than a second, an image appear. Your best bet is to use a loading page with a second delay. At the very least that is how I solve those kinds of problems in my Apps, for a lack of a better response to this problem (And being honest, my own lazyness to come up with a better solution). And in case blank images appear and stay, that might be because your random image picker, can come up with image directions that do not exist, in which case you would have to rethink your way of selecting those random images . . .

I'll be making some tests in a few hours, since I am about to go out, but hopefully this explanation can point you out in the right direction!

Edit: When saving the user data, you don't need to save two different collections, since we're using collections, you can save the data from different images with a single collection, which will be better performancewise, or at least I think so . . . And you will have far less lines of code, since you can outright delete redundant code!

ClearCollect(
    colMyUserData,
    {Image1: Blank(), Image2: Blank()}
);
// LOAD THE LAST SAVED USER DATA
LoadData(
    colMyUserData1,
    "lastImageSaved1"
);

Hopefully, this is enough for you to solve your situation, otherwise feel free to reply, and I'll make my best to reply within a reasonable timeframe!

[AmínAA]

Hi there @Marc_Gutzwiller!

Did the explanation I gave you yesterday help you enough, or do you need anything else?

[Marc_Gutzwiller · Accepted solution]

Hello @AmínAA . I'm sorry I didn't get back to you sooner, but I've just moved and tried out your ideas. Yes, the issue was that the code wasn't good with the randomized images, and I had blanks that weren't loading problems. Thanks to your inputs, I've now adjusted the code and it's working as desired. Many thanks for your input and efforts!

here the code that works for me:

// CREATE AND LOAD COLLECTION WITH THE IMAGE COLUMN
ClearCollect(colMyUserData, {Image1: Blank(), Image2: Blank()});
LoadData(colMyUserData, "lastImageSaved");

// FILTER VALID IMAGES
ClearCollect(
    colValidImages,
    Filter(
        RandomisierteStartbilderPowerApps,
        !IsBlank(Miniaturansicht.Large) && !IsFolder
    )
);

// GENERATE RANDOM INDEXES FOR IMAGE 1 AND IMAGE 2
Set(
    varRandomIndex1,
    RoundDown(Rand() * CountRows(colValidImages), 0)
);

// Ensure varRandomIndex2 is different from varRandomIndex1
Set(
    varRandomIndex2,
    RoundDown(Rand() * (CountRows(colValidImages) - 1), 0) +
    If(varRandomIndex2 >= varRandomIndex1, 1, 0)
);

// SELECT RANDOM IMAGES FOR IMAGE 1 AND IMAGE 2
Set(
    varRandomImage1,
    Last(FirstN(colValidImages, varRandomIndex1 + 1)).Miniaturansicht.Large
);
Set(
    varRandomImage2,
    Last(FirstN(colValidImages, varRandomIndex2 + 1)).Miniaturansicht.Large
);

// SET THE APPROPRIATE IMAGES
Set(
    varImage1,
    If(
        IsBlank(First(colMyUserData).Image1),
        varRandomImage1,
        If(
            First(colMyUserData).Image1 = varRandomImage1,
            "YOUR SECOND IMAGE", // Toggle logic
            varRandomImage1
        )
    )
);
Set(
    varImage2,
    If(
        IsBlank(First(colMyUserData).Image2) || varImage1 = varRandomImage2, // Ensure varImage2 is not the same as varImage1
        varRandomImage2,
        If(
            First(colMyUserData).Image2 = varRandomImage2,
            "YOUR SECOND IMAGE", // Toggle logic
            varRandomImage2
        )
    )
);

// SAVE THE SELECTED IMAGES TO THE COLLECTION AND SAVE DATA
ClearCollect(colMyUserData, {Image1: varImage1, Image2: varImage2});
SaveData(colMyUserData, "lastImageSaved");