Generate Barcodes inside of PowerApps!

hey guys what's up we're back again and today we're gonna be creating a barcode generator app so and when I'm one of my previous videos we created a barcode scanning app where you can scan barcodes with your power app but now we're gonna be creating an app where you can generate barcodes inside the app so you can show someone or something to scan it with that's gonna be really cool so I'm gonna show you how to do that today just quick note before connect with me on LinkedIn in the description below that'd be really helpful to me I love connecting with you guys I know or like all internet strangers but you know it'd be great to have more connections on LinkedIn and then also it would be great if you could share this video like it and also subscribe to me that would mean the world you don't have to do anything else just those two things would be great it's good for the YouTube algorithm so the YouTube stars recommending my videos and you know I like people watching my videos that's great too so let's go ahead and get started to make the video short and okay so here we are in our power apps and also the service we're gonna be using here is barcodes for dot me now one thing about this service let's check out the pricing free non-commercial use free for commercial use also that's really great because you don't have to pay a dime for this it's really great I am NOT a sponsor for this company or anything because I mean come on they're providing this service for free thank you so much the refinery and one thing to note to use this service you do need to give proper attribution right here for non-commercial and commercial use so it's free so you can just give them the credit guys come on so I'm gonna be showing you how to do this though so let's go to the API documentation and then we can add the attribution later so the thing with the API documentation is basically we're generating barcodes by just using the URL and we know from our last video if we just used the URL we can also insert some power apps elements in there too so you can use all these different codes and then you know you can also make it inside your power apps where you switch between whatever codes you want to generate maybe saying using a drop-down or something and then inserting it into that type right there but today I'm just going to be using the C 128 be showing you guys the concept and then you guys can go and do whatever you want with it so just how it actually works is the URL format is here you just type in this URL and then once you get to type here you just type in the types that you want and these are the available types by the way you type in the types that you want and the value of whatever you're doing so this can be like you know hi my name is Henry or something and then you scan it and hi my name is Henry literally appear in the barcode and then dot image type which is just PNG gif jpg whatever you want right and then you also have some additional options you can add at the end of this string this URL code right here and it'll do that as well so I'm gonna make sure I'll show you guys how to do that also because that's kind of important if you want a good resolution or you want to change the height of it or gonna change the margin reverse the colors of the barcode whatever and then we also have the QR codes right here so this is actually a really easy thing to do and I'm gonna show you right now so let's go ahead and copy one of these samples and then we'll edit it in power apps so the first thing we want to do once we're in power apps is we just go to text and we input the HTML text and this is basically we're going to be generating our barcode and you can have the rest of the app link to this also but I'll show you that in a second let's go ahead and edit it so we can see a barcode that we want so the HTML text is going to be located within these quotation marks right here so let's go ahead and post our link so we can see the link is posted there but since this is a P this is a link to a PNG image so if we open a new tab we go to it it's literally just an image that shows so if we right click we can open image and new tab it's a direct link to it so what we're going to do is basically just display it in HTML text format so we just put image so we have this this mark right here I don't know what you call it you put image source and then equal and then we're gonna use a posture for you there usually some people most people use quotation marks but since that's indicating the end of our HTML text we're just gonna use about an apostrophe apostrophe and then we just close that bracket boom there you go there's the bar code you can see the bar code instantly and then we're not gonna be using see whoops we're not gonna be using c39 when you use c128 be right there so that's the barcode we're going to use and the again these are the available formats and the codes right there so if we want to use I two of five that's what we type in right there and then one thing again we can put the actual quotation mark there and then we can say and and then we can actually link this to for example a text input one so let's put in a text input there so this is text input two because I already have other text inputs in my PowerUp but we can link this value right here to text input two actually so I'll just type it in text input two right there dot txt and then we can put an and then we can start our quotation mark again and then we can do the rest of the link so that's really cool cuz now let's see here we just go to play and then we type in the correct one that we want which is going to be C 128 B and the barcode appears right there so basically what this is saying is we're having the image and this is the source it's this and then we have the type which is going to be right here but we're using that as a text input to text right there so someone can type in whatever type they want and that's gonna appear like that so one thing I recommend doing is using drop-down and not like not like a text input here but you know you know you guys can do that that the point of this video is to show you how to generate that barcode so one more thing we're gonna have a slash right there and then we want to chain so this is the value of the barcode so if we remove that slash if we move that slash this barcode literally says if we scan this barcode right here it's gonna say any value you wish that's that's what the barcode is gonna say so we're gonna end that slash right there and then we're gonna go back and we're gonna throw in another text input and this text input is going to be what the person wants the barcode to say so let's put this over there that's the type of barcode and then this this one's gonna be what they want the barcode to say so let's add that in this is gonna be text input three dot text and then add another ampersand right there start up our quotation mark again whoops start up a quotation mark again and then now we can remove this because that's the value and then we can actually also do the PNG one okay well let's let's test this out first so now let's click Play so our type of barcode is C 128 B and then we want our text in okay so we have text input in there this barcode says text input but let's change it it changes as you type isn't that so cool so that's my name Andrey Wang Yi link in comm that's my website visit it but isn't that so cool it changes as you type a link and calm and ring wonk I wonder if it's different if you type in the capital G or something I'm sure barcodes they can sense the capitalization also I think some types can sense the capitalization I'm not particularly sure if the c128 be barcode can sense if it's capitalized or lowercase back to the subject this is how you generate that barcode so that's really cool this is our value so let's just give our person or people first using the application let them know what this is so this is value so that's gonna be the value of the barcode and then we're also gonna want oops the type so let's tell them that this is the type so now we can change this up this is the type of barcode and then value this is our current code that we have and let's give it so that they can change the type of barcode to so I mean the type of image that we want I don't know why you would want that but you can actually just change that to just to let you know so now that we're outside of it let's go ahead and put another text input in I'm only using text inputs to simplify it but you guys should be using like dropdowns or something okay so our text input is there and it's gonna be this gonna be text input for dot text and then we're gonna put an end and we're going to start the quotation mark up again so let's type in PNG here oops something's not working let's check it out and okay it's because it's PNG twice so this says PNG and then this says PNG also what we want is just that mark right there so basically we're just sexualizing the URL of this API key from by using the URL pretty much so we're sexualizing this this is the type this is the value of what we want it to say so Henry Wong so if we scan this barcode it says Henry Wong this is the value and then this is the type of image so we can change this to jpg for example so let's just change it to jpg it still works looks good okay yeah and that's pretty much how you generate a bar code inside of power apps now one more thing to give you guys a little bit of insight into this extra additional options basically if you put this at the end of a URL it's going to change the properties of your bar code so I've copied that and let's go here so the end of our URL is gonna be right here so this is dot PNG and that's the end of our URL we're done right but let's say we wanted to add additional stuff so we're gonna add so I'll just do this right here just for you guys to see so this is the any value you wish let's change this to 128 B right so this is our bar code pretty much and then if we put the question mark height equals 200 right there right so it's just our link there it is the URL and then we have the question mark height equals 200 it's gonna change the height of this barcode to 200 pixels there it is and we can change it to 600 pixels and it's going to become 600 pixels we can change it to 1600 pixels right there but yeah you can see what how that kind of works now so let's change it back to 200 it's a little a little bit more visible now if you want to add more than one parameter you don't so let's say we also want the resolution so if I paste it right here it's not going to work if I press ENTER it's still going to show the exact same image so I'm pressing enter it shows the exact same image and the reason is because we have two question marks here these question marks are basically separators for what what features we want in addition to the URL that we connected to right so this first question mark is just the separator okay the net everything it says everything after this is the features right and then we have another question mark and it doesn't really register that so it's kind of like an whatever but what you want to do is actually add an ampersand instead of a question mark so we have the question mark height equals 200 and then we want to say and the resolution is 2 so I'm going to press ENTER and there it is the resolution changed and for this one you can go up to a resolution of 4 I believe so this can be really clear and then let's say we want to add one more thing I don't know reverse color sure so let's add the reverse color again change the question mark to an ampersand symbol and then the 1 indicates true right and then 0 is false so I do want to reverse the colors and you can see so my mouse is on the black part right here and then I press Enter now that part is white because the colors are reversed let's change it back to 0 so now we don't want the colors to be reversed I'm gonna be on the white part and change back to black so basically that's how you do it guys we just put the ampersand symbol instead of a question mark after the first question work so we can go back to our application and then we can add those extra parameters that we want here so we put height question mark height is equal to so now we can decide what we want the height to be let's say 300 pixels so you can see our barcode is now really long and then we want to say and let's say is reverse what is it color is reverse color yep is reverse color and I want that to be equal to true so you can see the black part here is gonna change white okay I guess you can't really see it but it changed so let's let's do one more just for visibility let's do resolution is equal to four so make it really clear there it is so I can change it to three two one two three four right equals four yeah so you can you can play around with these power up and then you know make the height 200 boom there we go and then you can also actually you know do the parameter inside the parameter so we have the height is equal to so let's say you want the user to decide what the height they want to be so let's add that in right here let's do another text input and I recommend changing this one to just number so we kind of we're kind of messy here but this is the height right this is the height text input five is the height let me just change it tight okay so it's called height now so now we can go there and then type in height text oh let's do an ampersand symbol and another ampersand symbol so now we user can decide what they want the height to be so let's go ahead and test that out by clicking the play button here and then let's change the height to hundred you can change the height to 200 let's change it to 300 400 500 so if we change it to 500 like you know the image is too big maybe you don't want the user to do that but now the users in control they can change the height of the bar code but it's still exactly the same bar code that's pretty cool so I only showed you guys to do that how to do that with the height but you can change that however you'd like also so I hope you guys understand how to generate a bar code now with the properties that they want also and then let the power apps users control what they the barcode to say so cool guys thank you so much to barcodes for me I am NOT a sponsor for barcodes for me but thank you so much for the service guys so yeah I hope you guys enjoyed the video and you learned something new today hopefully it's really helpful for you if it really helped you please please please hit that like button and subscribe to me would mean the world thank you so much and have a great day guys bye [Music]

Channel: Henry Ouang

Views: 20,366

Keywords: powerapps, microsoft, flow, build powerapps, microsoft integration, make a powerapp, create powerapp, create powerapps, powerapps for business, powerapp tutorials, make automations, automate my business, powerapps forms, powerapps automations, powerapps tutorial for beginners, powerapps generate barcode, generate barcode in powerapps, create barcode in powerapps, powerapps barcode, powerapps make barcode, automatic barcode powerapps, powerapps bar code, powerapps automation

Id: 3-GuyDtViXI

Length: 15min 26sec (926 seconds)

Published: Sat Feb 15 2020