So, you've dabbled in Power Apps, and you're ready to tackle a common issue - image handling. Whether you're building an app for your organization or a personal project, dealing with user images can be a bit tricky. Fear not, for we've got you covered with this step-by-step guide on how to become a pro at image handling in Power Apps.
If you are a video person, you can see the full video tutorial here:
Problem Statement
Imagine this: you have an app that displays user profiles, but not everyone has uploaded a profile picture. You want to ensure a polished and error-free experience for your users by displaying a default image when no user picture is available. Let's get to it!
Solution: A Step-by-Step Guide
Step 1: Connect to Office 365 Users
- Start by connecting to Office 365 Users. This is your gateway to accessing user information, including profile images.
Step 2: Create a User Image Gallery
- Build a gallery to display user images. This is where the magic happens. Use the
Office365Users.UserPhotoV2function to fetch user images.
Step 3: Handling Missing User Images
- Not everyone has a profile picture. Create a formula to check if a user has an image (
HasPhoto). If they do, display their image. If not, show a default or generic image.
Step 4: Adding a Generic Image
- Upload a default or generic image (you can find free ones on sites like Pixabay).
- Integrate this image into your app so that it seamlessly replaces missing user profile pictures.
Step 5: Error Handling
- Power Apps might throw errors when dealing with non-existent users. Use the
IfErrorfunction to gracefully handle these errors. No one likes seeing error messages!
Benefits
By following these steps, you're not just solving the problem; you're also:
- Enhancing the user experience by displaying user images.
- Maintaining a polished look by replacing missing images with default ones.
- Demonstrating professionalism in your app development.
Conclusion
Handling images in Power Apps can seem daunting, but with this step-by-step guide, you're well on your way to becoming an image handling expert. Your users will appreciate the effort you put into creating a seamless and error-free experience.
Remember, Power Apps is all about making life easier, and mastering image handling is a significant step towards achieving that goal. So, go ahead, implement these steps, and watch your app shine with professionalism!
Now, put your skills to the test and create user-friendly apps that leave a lasting impression. Happy app building!
Full video transcript:
[Music] Hello, guys! Rudy here, and this is what we're gonna do in this video. We have a gallery with the pictures of the users based on their email, and in case the user doesn't exist or there is no picture, we are just gonna show this generic picture here. So, we are going to start from these points where you have only a simple picture, and we are gonna end at this point with all the pictures and the generic image. So stay tuned, like, subscribe, and let's get started. Thank you. Right, let's understand better what I have here right now. Here is just a gallery showing data from an Excel table. Right now, because this is just a demonstration app, and I'm using Excel to show the capabilities of Power Apps, here we are connected to TB Contatus. That's the TB Contacts. If we look at the data, we basically have some information here: the name, the email, departments, comments, and a phone number. That's all. I want to get the image based on the menu of the person. Okay, so how can I do this? How can I know what's the image for Rudimar? What's the image for Diana, for Bruce, and so on? Well, we have one connector that queries the image from the Office information, and this connector is the Office 365 Users. So let's type here in the connections data, add new data, and then I can create a new connection. That's this one, Office 365 Users. Once I connect to it, I'll need to select an existing connection, or if you don't have it, just create a new one. Since I already have one, I'm going to use this one. I'm going to click and the connector is loaded to the app. Here we have the connector right now, and there is one call to this connection that brings the user image. Let's try bringing it right here into the picture. We are going to do some adjustments later, but let me show you it working right now. Here we have the sample image that comes by default. Let's remove that and then use this connector to try getting the image of each user. So, let's type Office 365 Users. And we see that if you put the dots, we have several functions here that we can use. And the one we are going to use right now is user photo V2. Once we click here, it shows that we need to provide the user principal name or ID. In this case, it's the user email. So let's put this item, because I'm inside the gallery context: `ThisItem.Email`. That's the attribute that has the user's email. Okay, so `ThisItem.Email`, and I close the parenthesis. Once I close the parenthesis, it will try getting the image for each user of the gallery. Let's play and see what happens. We only have pictures right now for Rudimar (that's me), Diana, and Bruce. Why is that happening? Because the other users don't exist in my tenant. They are not users from my organization. They are here; they are just fake emails, and they don't even exist. That's why they don't have pictures. And I want to show that default picture or just a generic picture instead, because I just want to show something. What I want to show right now is this image here that I just downloaded from Pixabay. That's a site for downloading free images, and I uploaded it inside my app. So I downloaded an SVG, went here to the media and imported it here. It's the `UserWithNumber.svg`. If I click here, I will see this picture. Right now, this is the one we want to show inside each item of the gallery, right here, if we don't have any image. Okay, so how can we do that? We need to put some condition here to test if we have the image, and in case we don't have it, then we show that image in the place of the one that doesn't exist. So how can we know if one user has an image or not? There is another function that we can use to get the image metadata and then check if the image exists. Let's do that. First, let's put an `If` to pass the condition. So let's call again `Office365.Users`. In this case, we have a metadata, so let's see the correct name, because I don't remember, but if I see it, I will remember. Why is it not showing? Let me just put that comma here and try again. Yes, now I'm seeing the options. Okay, and the one I want right now is the `UserPhotoMetadata`. Again, I need to inform the user email. That's in my case, `ThisItem.Email`. And then, I have to put the dots to access the properties, and the property I want right now is `HasPhoto`. This will return if the user has a photo or not. If the user has it, I'm going to show their photo by using this function to get the image, as we just did. So, the first condition, if true, and the second one, if false, that the user doesn't have a picture. I'm going to show the generic one. That's this one: `User-33`, and so on. So let me type the name and get the name of the picture I just uploaded. That's this one. Okay, now I'm going to close the parenthesis, and it will do the tests. We are still not done; we still have one error to face. See, it's just showing this message because those users don't even exist in my tenant, so it's giving an error because the function doesn't work for users that don't exist. We need to treat this error inside the function. Otherwise, the users will always see this message; they will get bored, and it's also not working properly yet. So how can we do it if the user doesn't exist? Well, there is one function that's the `IfError`. Okay, I'm going to open the parenthesis, pass the first argument. That's this one. In case it works, it's fine; it will return true or false. But in case it gives an error, it will return the second argument. In this case, it's false, which means it doesn't have a picture because it doesn't even have any user; right, it's like an if, but that tests for errors. Okay, now we have the complete formula. So we try to see if the user has a picture or not. If the user has, we get the image. If not, or if there is an error, and we return false, we return the generic picture. Let me play the app and see the result. Right here, it's working properly and not giving us error messages. What do you think about this explanation? Let me know in the comments. Let me know if this was useful. I myself use this formula a lot, so I think it would be useful for a lot of people. Please like and subscribe if you liked it for more videos like this. Thank you. Bye-bye. [End]
