Save Additional Image with airSlate SignNow

Save additional image

okay so what we're gonna do in this video we're actually going to walk through the process of creating a power app that allow you to upload multiple images and save those images into SharePoint as well as retrieve those images in the efficient way to where we're not bringing heavy images from SharePoint into power apps so if we take a look at my screen here let me just show you an example of the application that we'll be using so I have this repair tracker here and this is one that I've been playing around with and as you can see I'm using these standard screens that comes with power apps when you create a canvas app so really there's there's no surprises there but you can see how fast these images are loading or fast relatively and then if you click on the image you have a gallery to where you can actually scroll through and see the photos there now the experience from the end user when they go here to create a new request item they can go ahead and hit the plus sign hit sample request and they can also use the cool thing about this they can use the microphone on their phone and now you have voice over text capabilities to where you can actually speak into the text box oh I didn't detect my voice in them so this is the voiceover text capabilities to where you can actually speak into the text box or not oh it's probably because I'm sharing but yeah trust me that works so you know you can submit a description there because I'm sharing my phone my microphone is probably being used by another app which is why it's not working so now if I hit upload you see these options here allows me to either take a photo so but now what I can do I can't take a photo of this coffee and then I can send a complaint to say that this coffee is not tasting good or you can say you know whatever but the fact that I can sit here and take multiple photos with multiple angles right is one of those things that in the real world is a necessity because now whether it will allow you to do is that you can take multiple angles maybe you know before-and-after pictures and things along those lines and it's not multiple angles in the sense that one photo for before and another photo for after you maybe like maybe it's a machine lockout situation because you have to clean or there's a repair you can take photos of before the action is as taken what you know what does it look like multiple angles and then once the action is completed take additional photos and multiple angles so again it sets you up some to some really really positive and capabilities so now what's happening is that as you can see my screen is I've updated the photos oh it's not being captured here so if I click on this item you would notice who says photos are still processing and basically what's happening is that there is a flow that runs in the backend that's actually taking these attachments and dumping them into a SharePoint library so let me let's kind of diagram what we want to build here in this session so here you're gonna have your SharePoint list and it's going to have all the information from the request right and then as you get that information yes you saw there's going to be an attachment that's my paperclip there to represent my attachment icon you click on the attachment and it's going to load those hanau that is pretty fluent I was pretty straightforward right there wasn't a lot of delay or really not that much latency so in the back end is adding all these attachments to the request and then once they hit submit what's going to happen is that this information is going to go to a SharePoint list right the request list that's the data source for that and then the attachments are going to go to the root to the request as well but then what we're going to do rig on this fire up a flow and that's going to take those attachments and extract them out and dump them into a document library great and this is a powerful architecture architecture design because taking these attachments out and dumping them to this library it gives you the ability to not only store the file and optimize the recommand meaning that you can get very small images right there's a thumbnail property that I will show you that you can extract those small images and that makes when you render this information in the gallery that much faster so not only do you have that but you also have the ability to add different metadata on each file and as I was talking through this scenario uh you know what if there is a machine lock out you have to take some before images and then take another set of images for the after that allows you to distinguish that says ok for this item and these images are captured these are the ones to show before and you can lay them out in a certain way and these are the ones that we're taking after and then you can lay those out in a certain way and we'll walk through what what it takes to to pull those solves so if I switch back quickly to my phone while this thing records everything if I switch back quickly to my phone and let me go and refresh and there is there are my coffee photos right and if I click on that you can see the gallery and I have all my angles and all this other good stuff so ok so let's go ahead and get started and build this out so I'm gonna just minimize that for now we can come back to it and right here I'm in my equipment request site and then I have my list items here on the right let's just go and do the full screen so that what you guys can see everything so once I get into the equipment repair let's let's actually let's actually start from scratch this is a sample you know what let's just this away this is a sample and this really not much here right I added the title I get for free either repair date I added a description and the attachments are still enabled so you know there's there's really nothing to this to this list but the one thing I do want to add there's another library to store my photos right now this is my photo snap and in here the only thing that I added this is a standard document library the only two things that I added was the item ID and then the state so to distinguish again before and after photos right so let's go over here to [Music] site contents and let's create a new library to store a photo so let's just call it and it has to be here's another thing it has to be a document library because we're dealing with photos your gut is gonna say hey let's go to apps and let's create a photo gallery right so I think if it if you search on photo or if you search on gallery I'll know if it's picture gallery or photo gallery or maybe there's no gallery let's see yeah so it's called picture library sorry so the first reaction to say oh let me just use a picture library the problem is is that I ran into an issue with the picture library that it did not for whatever reason allow me to view the photos when I was on my mobile so I pulled all this together using the exact same process and I'm about to show you but I used a photo library versus a document library and I can view the photos when I was in the browser playing the app through the browser but when I where was playing the app during the mobile phone I couldn't I couldn't see the photos and it seems like if there was an authentication issue all right so let me just do this or snap photos too and again this is just gonna be our library that we're going to store and like I said I only had two new columns so let me do a single line item for item ID right for single line text and then I'm gonna do a choice just gonna say state and then this is where I'm gonna just go ahead and drop in my before our right and I'm a default - before all right again this is the library this is where we're gonna store things I'd like to keep my IDs in front so let's store my IDs there so now let's go ahead and jump into creating our canvas app so I go into power app studios and then I just go to create here this is going to be a canvas app we want to have it a phone and we want to call it equipment you say equip request right and I think this student and distinguished from the existing ones I have and that's going guy who's gonna fire up so what's this fire up all that want to do now is just go hand and grab my data source okay there oh no I did not want to start there that's too that's too raw I went I want to jumpstart this into something so let me do start from this data please give me one second please thank you come on come on come on come on so I got puppy and child Duty all in one all right so now if I go into full sit the request here so imma start just with a template that's one pull from a document list right I'm sorry I sure pointless and then we got equipment repair to we're gonna reuse this guy yeah why do I have unsaved changes you know this is being why is this made difficult why is this being difficult reload I think at that I'm gonna understand why you didn't rating the first time so anyway it seems like is kicking in the gear it's going to do what it's going to do is think and this is fine so I have this standard template here right there is nothing I really need to do to that app so I'm gonna just take all those default settings and this is gonna be the name of the app I'm gonna give it an icon a color let's just select that for now so I quit request to still phone there's no Advanced Settings we need to modify and then go ahead and hit save all right so I have several of these right from playing so our is gonna be the equip request - so let's remember that and this guy is going to go ahead and do its thing right so now if I switch back over we should be good to go so let me switch over here let me go to the one that we just create a hit refresh here and the equip request okay that's gonna be a purple one at the bottom here so just like that I mean we're good to go so I can go in here and hit new I have my title I have my date I have my attachments if I here the attached you know I have the option to take a photo and all this other stuff so all that kicks in so we're good we go with that so now let's go ahead and go to start building out our power automate flow and again this is the piece to where we want to take all those attachments and dump them into a document library so let me just go to my flow and create new let's say automate and then we want this to flow the trigger when it's created or modified when the item is created or modify so all right and then it creates and yeah I select the list that we want to grab this from so it's going to be the equipment request site and then equip request I'll repair too right so that's gonna do its thing and then hit next so the first thing we want to do is grab all the attachments so let me say get attachments then we want to get the attachments from the list item on this list and then the ID is the one that triggered this process so let me just filter on ID and again pay attention to these headings here for all these tokens or properties when the item is created because they're super important because you know once we start building this out you're gonna have like four different IDs so grabbing the right one that represents what you're trying to do is going to be key so you grab the attachments and then once we have the attachments the next thing you want to do is create a file so we're gonna create this file in that document library again we just want to move the attachments from the list to the library and everything in the collection right so that if they take in multiple photos we want to grab everything so we're which library do we want to create this in so that's going to be the my browse key here this is going to be my photo snap photos - I'm getting confused with all the names right all right so now it has a create file the file name that's going to be the file name from get attachment right again paying attention to this guy so just hit that display name as soon as I select our property it says hey I got a collection you're dealing with a collection we need to build and apply each loop so that way you're looping through and touching each item in the collection or each file in the collection so now it's asking me for this file content so far I don't have an action to do that so let's go ahead and grab it again if you just search on attachments and there is one that says get attachment content so that's exactly what we needs and this is going to be in the wrong or so let me just slide this guy down this might get a touch miss content now where do we want to grab that from so we want to grab it from the list I on that trigger this and that list is going to live and there's a library the name of that list is repair to the ID this is the ID of the item that trigger this process right so that's going to be this guy and cuz this is the ID this is a list item that's going to have all of the photos that were taking now now it's going to ask okay which photo or which attachment do you want and I have to do the ID for that attachment so now if I do this get attachment it's going to be that ID and that's going to be the current one that's in this loop right so if they've taken nine pictures this is going to be photo one it's going to loop through do the same thing for photo to loop through photo three until we get everything done and now I can and the what's going to do is gonna get the content for each photo create the file for that photo and then dump the content in that create file step right and that's why I do get attachment content the other attachment content and right there is where that file goes so is it once you get used to this it seems Milwaukee especially coming from you know a different app platform or something like that but yeah in short I mean when you creating files all you really need is a spot to drop it the name of the file and the the data that goes inside of the file right and that's what that create file is going to do for us now once that sound let's just save this all and now what we should be able to do we should be able to pop back over here into our app so let's go see what we got going on here they cancel out of this let me go back to the start just refresh this real quick hit the plus sign and new test one two three and then description and then let's just grab some photos it's just mouse this Mouse needs to be repaired you know just girl crap all of our photos seems like it's gonna be three clicks together I get a photo in there are different angles right all right so now we hit the plot save right there that's going to save it and again those those features are pretty big right I mean they're this is this is a Google pixel 3a so I mean the photos on the quality on those photos is pretty good so they're going to come over pretty big and that's what they're doing so they saved that up into SharePoint to the to the actual list now if we kick out here just hit refresh here doesn't seem like it triggered it yet let's go - yeah they are why you say you didn't trigger how they show oh there it is it was running and by time we snapped out and snap back in and within those seven seconds that complete it right so it took them out it extract them we just really just moved them from the item collection and dumped them here right so the one thing we didn't do was add in our item so if we get a bunch of these we have no ID to tie this to and the ID we want to tie this to is going to be this equipment requires is ideal for this guy here and we'll pop this open a new tab so if I eat let me just show an hi and get the ID column right and again I like my IDs at the top so this is going to be item ID 3 and if they if there's a separate request you need to tag the idea of that request to those photos or else they're going to get confused so let's fix that so if we go into our power automate all we doing now is creating a file so now there's this another step that says once the file makes it to the library oh we didn't check and make sure those files were working correctly let's click on one make sure yep there are something else if you click next and go so next I know look at that and they're there and they're huge trust me they're huge okay so now let's get the idea in there so if I go the back to power automating creating the foul is wanting but updating the file properties it's a separate thing so you're gonna have your files there and then you're gonna select this action here that says update file properties and then again we have to go through the rigmarole again of selecting the site selecting which library have the photo and then it's going to ask you ok so this is the ID of the photo in the library again ideas context-sensitive in the sense that you have to grab the white and the right one so the ID when we did that create file to create the file in the document library that's the idea is looking for so now it exposes all of this metadata to me for those files or for those photos so for the display name I'm gonna just keep it simple let's just use the title that's from the item that created this trigger and therefore the ID let's do let's let's do the idea of the item that generated this trigger right I almost created or modified this gonna be that guy and let's default to before State for now right unless you're go ahead and save this all in the initial work as expected so now what we want to do we want to be able to read these items back right so let me I'm running out of things to take a picture so let's see here so if I go back into this guy here actually what I wanted to do let's let's delete this because it doesn't have the ID associated to it so let's get rid of that and then hit the plus sign let's do something else so let's just sue no pads feather pads alright and then let's go ahead and take a picture of some note the hats and that's gonna be that kick that up there and get another angle that's going to be that all right Indian let's just say that all okay so while that's working now we have a request that's actually gonna be save as' ID with that let's go back into powerup studio and let's spruce up our our our app okay so for the details screen we do want to show the gallery right yeah so the details screen we want to show our gallery so all we want to do here let's let's go ahead and draw our gallery in here so let's do it insert and in gallery and I'd like to I like it when the photos go left and right so let's just drop this in there let's close this it's gonna have a title I don't think we really need a title I'm screwing this up so let's just say view full gallery let's rename this of gallery view photos all right and if I scroll down here I don't really need the I don't need these titles right so I just get rid of these labels that's all I'm dealing with it's just straight up photos and now I can let's move this gallery into position let's just move this right on there a description or something like that stretch it out right and I love the fact that this is a horizontal gallery because now it's going to allow me to thumb through that and it's going to come through really nice so let's just load this gallery up with some items so let's go over here to our data sources add in a SharePoint data source and we want to bring in our document library right so let's do equipment request and then my snap photos document libraries gonna be here here's another thing if you created a picture library or a picture library it will not show up here by default you can force it by typing in the name to force it in but I think because they realize when you get to the mobile app you won't be able to access those files that's why I think they kind of hide those types from you alright so once so you get the photos the snap photos data source in here let's go ham plugging into our our data our gallery so snap photos answer right now of course we want to put a filtering or so so but for right now we're going to keep it as his now my image isn't saying okay which image do I win display so for each file in that library here's the trick the trick is do not do not do not use link to item right it looks like a good idea and it feels like that's going to work but those are they're all photos and right now this is seem like it loaded pretty quickly but those are gonna take oh they're gonna weigh on you and they're gonna be very tough on your mobile device instead what you want to do oh let's just try it okay you don't believe me fine so let's do link to item not only are these photos heavy this is not a let me show you something let me if I bring in this label let me bring in this label and I and I want to take the time to go through this because because you may be dealing with a different scenario I'm sorry let me presume that you may be dealing with a different scenario and you made to have me understand this data so you can position yourself for your app better so in this label what I'm gonna do and so they're dumping in title I'm a dump and link link to item and you can see that URL let me drop the font to something that's more manageable no this is what I found out if this if the reference to this item starts with HTTPS and the name of your tenant you're not going to see it on the mobile app I can see this in the browser this would work fine in the browser and there's going to be every day all day look fantastic and then you push this out and you test it out on your mobile device and you're not going to see those items so let's and and that's the authentication piece I was trying to explain earlier but here I can demonstrate it here a little bit so let me click in here I hit refresh on this guy for notepads didn't click on to this guy oh sorry power apps you actually have to go out and then go back in to see the latest and greatest alright so there's my notification at the tippy-top hit that he says hey you got an update to this app click here to see the latest and now you see what's happening I can see the actual link reference right but I don't see the actual photo right you see that no photo and it's there you go to the new scratcher here I'll and the browser I can see you but on my phone I can't see it what's up with that okay so here's the deal the deal is if I go through here and you explore these properties a little bit going to my text property here and hit thumb if you hit thumbnail and then thumbnails you have several different sizes you have let's do small take to take a look at the difference in this URL right this is and actually it's a lot larger than we have a real estate to show listen let me expand my gallery out get some more head space here steel is still a lot but anyway this is wait is this the actual image yeah so like the bite size of the image yeah I thought this is a URL all right let's try large yeah see I thought that was he actually it looks like the bite size of the images so but anyway so if you hit small right the narrative for this is that you want to don't use link use the thumbnail reference and use the right size to where it makes sense for you right so for this one I'm gonna just hit small and that's gonna give me this is gonna be very pixelated I can even go smaller here especially if I wanted to display this you know just play around what if it make you get the right balance that's right for you for the images what you can do you can do feel right and that's going to bring that's gonna fill it up and small seem like that maybe too small of a thumbnail so let's do medium alright and now let's get rid of our I told you so I told you so stuff and let's squeeze this up a little bit so it's not taking up more real sadness neither and then let's say the self and then see if our photos start to pop up published is right all right so now if I switch back over here login and go here hit refresh here click into my app I should get a notification you up there so Latos virgin and later version clicking here now and there we go there are my photos and now I can look through so now but you will know this I have two requests right so that the one with the miles that's why I deleted the one with the note paths or the ones that that actually goes with the notepad request so Ness and this is why the item ID is super important because you want to do a filter so on this gallery what you want to do is do a filter on don't give me all the photos in the library only give me the ones where the item ID is equal to the selected ID from the Browse gallery right so understand that understand let me zoom out of here understand the flow the flow is when the screen first opens is going to show all the requests right and then once those requests go through let me see if I can rename this was gallery requests and hopefully I don't break anything about renaming this so once those go through they're gonna select one of these navigate to this detail screen so now what we want to do is get the gallery selected ID so Gow requests dot select it whichever one they clicked on and they're from that one grab the ID and that's gonna match that's gonna match my item ID now these are two different types right so if I mouse over here you see it has a data type number if I mouse on this one there's gonna have a data type it's not going to tell me it's actually text right because we like with a single line so to fix that I need to convert this number into a text so my my equal test condition will work as expected and as soon as I do that you can see these are starting to kick in and work as expect so let me drop these down here go ahead and say this off and we should be good to go publish this version all right so we're gonna have to wrap this video up because you know it's the beginning of the day and we gotta get going with our work day but you know and I can come back with a part two and show you how to drop those metadata's in but it's really going to be in that power app request right update process so in the power app when you do the update file properties any metadata on the item that triggered that request you can save it then right and that's how you're going to be able to add metadata to these items right okay so that's cool so now let's just double check and make sure that we're we are actually indeed getting distinct images so now let's go to let's say speaker repair and then here this sample speaker wow it's just I kind only really say let's see if that emoji icon saves alright so now let's take a photo of speaker get another photo side of the speaker all right and then save it off may have that icon saves us everything so now you can put hearts and smiles and all this other cool stuff that is awesome that is fantastic all right so what's happening here so what's happening here is that your photos are actually being processed by the power automate right because we don't show the attachments but the user has no idea they think that oh man my photo sense8 and they come back in here and they actually start uploading more so let me just show you this one last trick and it will come back and confirm that's working and then if we need to do a face - we can do a face - a part two of this what you want to do because that power on me it will take some time it only takes seven to eight seconds to run as we saw but you know to get everything through it does take time so we need to communicate something to the user so what we are doing this guy's going to be empty so what we can let's just drop in a label right and just some a quick message and we can put it over here and we can say your photos are being processed or something like that your photos are processing your photos or whatever so here I can do a boat text here and if I have like one of those gifts that have like the dot dot or a spinner I mean you can inject that right and now what you want to do is put some smarts behind this right because you don't want you only want this to show when the gallery is this is not popular that are there it's not been it doesn't have anything in the show so in order to do that what you can do is that on this label go down to the view and you say only make visible if my gallery view for those dot items all items and just count there's a count method so if the count is less than 1 so it else don't show it I think it was a single item table account so you have to select the property I mean it's arbitrary right you can do whether it was saying this I hey you got too many properties this is return it multiple columns the count is only looking for a single column table so you just select a property all for that alright so if the count is less than one then show it else else hide it right so in this case that's going to be hidden alright so now let's go back to let's just push this up let's go back save this off and confirm that our ID I'm sorry our new request came back us expected alright so now let's do this let's go back let's get our power-ups to do and that hopefully you as you can see I mean this really sets you up the this I'll tell you the secret the secret they're saving it adding flow to this process and save and moving those attachments out of the list item and storing them hey it works the rest of my photos and storing them and come to my photos that's just one that's weird storing them into a document library and they're from the document library you can add metadata and the fact that you can add metadata to them opens it up to where you can store you can save a lot of information though this is alright it's just wonderful though some one number five right for some what reason was this one oh it's mine see that's what we were testing with the ones that don't have an ID those are the ones we were testing with in the ID sense show up but I don't know why this guy is not showing up though that's weird I had to refresh it I got it now I had to refresh it and it popped up so maybe we do a part two to this and then maybe add and so what new Thursday they're still apart too and then we can also add in the the approver logic right and that was another question FAQ that came out say okay how do you lock down certain features or capabilities based on the current users either role or if they're an admin or if they're a standard user or whatever the case may be so let's add in more smarts to this because you know ideally what we want to do next is be able to click on these images and have them pop up to where you can get a better view of them we can go through and test this out with multiple images and then also you've already put in the logic for before-and-after right so let's so we can layer those in so let's do that Thursday I'll go ahead and let's get back on Thursday and and give it a try and we go from there all right thanks a lot of cash and GG and your Kula yeah Kula I really appreciate everyone joining if there's any questions or any questions about what you've seen today put drop them in the comments that's why I'm here that's why I do these live sessions so that way we can learn together I can put together some PLC's and figure out dig deep and try to figure out some some really cool patterns and techniques I really enjoyed doing this because you if you're like me you are you know that power apps power automate powerful power bi they all can be game changers within the organization and the more the tricks and tips that we learn together you know how to pull this off the quicker we can accelerate our organization to go to that next level to you know be competitive and you know and what times like these where things are you know a lot remote now and you know technology is is more important now than ever before because of the social distancing or whatever this new world order we're gonna find yourself into these types of things who are really really helped with communicate the communication in information between individuals in between workforce and people in the field or people in the office or wherever connected right because you know taking the photo of an item speaks volumes than writing a very long description about what the item is and having historic sorem the photo this is what it looked like before this is what it looked like after you can add any other you know additional metadata along with those photos it's very very powerful and then the fact that you can do all of this on your mobile device is everything I mean it's everything it really really changes the game in that sense so pretty excited so let's jump back on Thursday we do Thursday lets you for I think I can do 9:00 a.m. but either way I always say it would be between 9:00 and 10:00 Eastern time to get it done to get it cranked out all right thanks a lot and see you Thursday any questions leave it in the comments take care [Music] you