How to use Copilot AI to design UNIQUE Power Apps UIs

this is a unique modern power apps application I designed and built using co-pilot and in this video I'll show you how you can use co-pilot to build yours this video is the second in my power apps co-pilot series and in the first video we learned how to use co- pilot to Hasting development time as regards data model creation initial appu as well as app customizations in this video we will take it a step further and learn how to use co-pilot to design unique interface for our different PowerUp projects anyway with that being said let's get into the video for today's demo we will be building on the item request system we buil in our previous video and as usual all apps and components built in my videos are available for download to channel members so whether you prefer to be a little bit more handson or you want to use this apps and components in your projects it's all available for download to channel members so join the channel today for premium experience now co-pilot has been generally available for quite a while and there are different co-pilots each with their own specialty in this video we'll be using the free Microsoft co-pilot which is available to everyone and you can use it by either downloading the app on your respective app stores or using the web version um at copilot microsoft.com one of the functions of this co-pilot is its image generation using open ai. E3 and that is what we will use to Des the homepage of our item request app now the thing about generative AI models is that your prompts determined your output what this means is that the less info you add in your PR the more the AI model will try to fill those gaps with his generative capabilities the reverse is also the case meaning that the more detail your promps the better the outputs since the AI won't have to fill in too many information gaps this makes your output to have a higher quality and be more tailored to your needs prom engineering is a skill I think everyone has to learn to get the best out of this generative AI models the skill enables you to to craft higher quality and knowledable prompts which in turn influences the quality of your AI generated content whether it be images or code or data summaries or text Microsoft has a prompt engineering guide to enable you craft better prompt for co-pilot and I'll leave the link in the description you should check it out once you get a chance so now let's craft our prompt for our prompt to be specific we need to know the details of what we are building and as I said earlier I want to use co-pilot to design the homepage of my app so let's iron out the details the first question you ask yourself is what is the primary instruction or mean ask I'm giving to co-pilot and in our case I wanted to generate the homepage of our item request app the next thing is what info can I give to support the prime instruction and since we are generating an image you can interpret this question as what do I want the image to contain in our case I want it to have a welcome message I also want it to have four distinct menu IDE itms another supporting content is the colors you want to use on your app a question I get asked a lot is how do you get the color scheme you use on your apps one of the tools I use is color hunt and the link is colorhunt.co so this allows you to browse different um color schemes submitted by artists and designers World white so you can check the popular colors you can check random colors and basically once you found the color scheme that you want to use or that you like you can basically just copy the code it has an rgba code and the hex code you can add the rgba code to your power apps this is the color that I'm going to be using for the app and if you want the first video of this series you notice that this was the color that I've used for the item request app I'm using this dark purple as my secondary color and I'm using this magenta as my tary color so one thing I noticed with co-pilot was that it was giv inconsistent results when I was using color codes inside of the AI prompt but I noticed the results tended to be better when I use the color names rather than the color code so the next question is how do you get the color names for this color codes if you're like me that doesn't know color names actually there's a two that also used for that so that one is coolers and the link is coolors.co so basically it also has like where you can explore um different color schemes also but mostly just use color hunt for that um then what we want to use is the generator and you basically just need to copy the hex code of the color that you want to use so the X code for this one you can just click it to copy it and once you copy it you can paste it inside of the pier here to overlock it so you can see this one the name of this one is dark purple and let's also get this one paste it and you can see the color name is magenta so ordinarily I'll have called this one something like dark pink or yeah or [Laughter] pink you serious well basically this is actually the color names and you can do it for as many colors as you need okay so back to the drawing board we have all of our supporting content the last thing you want to ask yourself is that what info can I give to direct the models output this can sometimes be referred to as a cube and since we are generating an image you can interpret this question as um what is the design style or ar Direction you want this image to take and in our case I want the image or the design to be modern looking clean and professional so let's add that so now that we've gotten all of our details the priming instruction the supporting content and the queue it's time to put all of that together to craft our prompt so this is the prompt I've crafted and let's read it out generate a mod looking image more looking homepage image for an office replacement request app the app's color scheme should include white as the main color dark purple as the primary color and Panton magenta as the supplementary color the page to feature a welcoming message and include four menu items the menus should be clearly labeled and Visually distinct the design should be clean userfriendly and convey a professional yet approachable atmosphere if you compare this prompt to our supporting details you can see that we've included all of the details from our drawing board and all that is left now is for us to run this air prompt in co-pilot okay now we are in co-pilot and you can choose your conversation style and one thing I noticed was that if I was using the creative Style the results tend to be better for generating images it might be coincidence but that's just how it Wass for me but then if you want to generate like factual data or stuff where you need the details to be actually as correct as possible you have to use the balanced or the precise conversation style all right so let's paste our prompt inside of the chat and run it and right a way co-pilots would then begin doing the stuff in the back end and try to generate an image for us based on the details that we've provided it and you can see it has given us some images and I think some are all right some are me but you know we can always fine tune The Prompt and add more details to it so looking at the prompt I think one thing that was missing is that I we want this app to be used on a desktop browser so we didn't add that so obviously it was adding forign tab also desktop and all but we we want most of the design to be desktop desktop based so let's modify our prompt to add that so inside of the prompt I will just add dates here so generate a mod looking homepage for an off replacement request app to be mainly used in the browser to remain used in the web browser so let's run that and see what it comes up with this is the image that it has brought out so apparently I didn't even specify it clearly I said to be use in a web browser and we can have a browser on the phone stupid guy so let's specify it to be desktop browser so this is the importance of adding as much details as possible in your prompts so let's see what it brings out now and we can see that it has given us some better designs that fit on it since we said we want it to be on a desktop browser it has given us the ort for that design and some of the designs are all right and you can always run the prompts as many times as possible until you get you know something that you want to use or it's suit you so I'm just going to do all of that in the back end until I get something 2,000 years later so after some test I finally found the design I'm comfortable with I also switch to my personal account maybe that can influence the results a bit so this was design I found and this one I think is really clean and really cool and it's pi to the design I want to use so I'm just going to click on it and you can see the prompt and then you also have the opportunity to download the image so I'm just going to download that and check it out looking at the design in detail I think is actually really cool you have the logo we have the welcome message we have the four distinct menu items so I think the only thing that I don't like about this is the the colors at the bottom so rather than having different shades of colors at the bottom that I think that might be sort of distracting I'm just going to use something else and luckily the design besides this this um um the design inside this design was actually something that I think we can use so looking at the third design we are going to use the menu items from this design so inside of this one you just have a plain background with a menu menu title menu description and menu button so we're going to use that inside of our design so the add is going to be a combination of the fourth export and the third or fourth generation and the Third Generation image generation rather so yeah we're going to mix those up into our own power app so one other thing I want to mention is that you might have to run the prompts multiple times you might have to even change your prompt a little because sometimes the images are just weird take a look at this take a look at this one for example why is the monitor so big and why does the UI look like it was design in like 2010 or something I mean you're not wrong but you didn't have to say it I mean good Lord so don't be discouraged if your first few results are not what you expected then the next question is what do you do in case of images or how do you handle images for your AI generated real images so for example in this um mockup that we want to use it has an image on the right side so how do you do that so the first option is what I would mostly do and this is for cases where you know there is no text on the images so what you do is you're going to crop this and upscale the image using AI so I'm going to crop it and then save this image and then go upscale it using AI so the tool I am using is I love IMG so the link is I love img.com so I love img.com and it has an upscale image tool so that what we are going to use to upsc it so I think this one has like two two images per day or something like that and so this what I'm going to use so I've selected the image that we just cropped and you can see it has upscaled it for us from 413 2762 826 by 56 552 I think that's great you can also go by four times multiplier and that will even upscale it even more to make it even clearer and even sharper and all you need to do is Click upscale and it go ahead and download the image for you so once it has upscaled it you can download the image and I think you you can now use it in your power apps or wherever you want to use it for your project the next option is if the image has a lot of text or has a lot of you know objects on it and you can't just crop it and upscale it so in this case you can opt for using co-pilot to generate the image for you just the image but note that this can be rather rather tough because you might not get the exact image that you want to use so this one was a mockup that I generated using co-pilot and I also want to then generate the image separately so when I tried it I think this was the this was the best that that seemed the closest to it and even this is not exactly you know what we had in that previous image so it can be really tough and you might not be able to get it and the last option is just just get another image to use get one that fits your up you know trying to get an image that is similar to you know what the mockup generated but just take you a whole lot of time so just look for another image that also fit your app and then use that for your project so now we have everything we need to build the app we have the markup we have the colors we have the images that we are going to embed and all of those so all that is left is for us to jump into Power app studio and implement it on our app so now we're in power app Studio I've added a new screen to serve as the home screen and now we are going to set up our layout based on our mup looking at our mup you will notice that it is divided into three vertical sections one for the header one for the welcome message at the image and last one for the menu items the only difference is that we're going to add in a left section to Ser as the one for our side navigation so let's do our layout now so back in power app Studio we going to use copilot to do the base layout and then build on that okay and let's send that so we adding a horizontal container and then a left container and a right container left container being for menu and the right container being for the page content so I will change this to be a vertical container since that's the layout you want for the items let's also add in a capap of 15 and let's add in adding all around it of 16 16 16 16 yeah that's cool and then we are going to add in three um horizontal containers inside of this so I can just type that here add three containers are three containers in container eight so it has added the three container so let's just modify this this one we want it to just be 50 since that's the height of our menu item and there using copilot we are done with our layout quick and easy so all that is left is to begin adding in the components very nice the next thing to do is to add the page content but before that it has come to my attention that 82% of viewers are not subscrib to the channel come on now dog come on man if you've learned something in this video or this series please like the video and subscribe to the channel to get notified when I release new content so let's get back to our video let's begin adding in our page content but before that I want to clear the drop shadow on this three since we don't need any drop shadow right and that's cool so let's add in our site navigation to the left we'll just copy the one we have here so we not have to do so much configuration so copy paste make sure it stretches to fill the container and then the width I think the width is fine let's also set the width of its parent container to match the width of the component so site navigation. width so if you expand it the container expands with it so that's cool let's also change the background to match the red rest of the app so we're going to set the fill of this root container to our custom [Music] theme dot primary color all right so we've added that in I will also increase the drop shadow of this one to semi just so it can be more pronounced I also remove the other radius since we don't need that all right cool so let's also copy the header so I'm just going to copy the image and the logo paste that in here so I would also rename this to office item request system all right cool so we are done with the top now let's move to this inside of this second container we are going to have two containers one for the welcome message and the other one for the images so let's add that so I'm going to add in a container this time a vertical container and then we're going to add in another container for the image so container another one so it should be outside it not inside it cool so I want the image to take up 45% and then the welcoming image to take up 55% of the width so let's modify that in the few portions so I'm going to set this one to 55 and set this one to 45 so the image will be here that the text will be here so let's do the image since it's easier so I'm going to add in an image control image control code and make sure that FS the container going to set it to stretch set the minimum width to zero and then turn on flexible height and set minimum High to zero so it's going to fill in that container and then let's upload our image so I've uploaded the image so all that's left now is to just add it inside of this so we' added the image and I want to set it to fill so that I can f the whole control then I would also clear the drop shadow and B radius for this ones so now let's begin with the left side we going to add in two text labels so copy paste that so we have two labels then select the two of them and make sure it is set to stretch so it's going to fill the whole WID of the parent container put say minimum with is zero and then going to set it to be the center set it to use lat to for now we will change that shortly and then we're going to turn on flexible height for them cool and then we're going to since we also want to have a button at the bottom let's add in a cont container for that so I'm going to add in another container this time it's going to be a horizontal container first of all I'll clear drop shadow and the Border radius all right cool so let's begin styling our text so for this one we going to add in the text here I want it to be latal black and I want it to be 35 let's set it to bold I think it be better on the right side sorry on the left side that's cool then inside inside of the experience let's add in little bit of left padding so left padding of 30 and let me also the bottom padding of 30 cool for this other one going to add in this text here I'm going to change it to little light little light is better let's also move it to the left and set it to 11 and that looks cool but then let me turn off flexible height and turn on auto height so it will just be big enough to contain its content and then for this one I don't want it to be that big so I'm going to turn off flexible height and set it to 60 so this is where we'll keep our call to actions call to action buttons and then we have the welcome messages at the top now let's add in the the call to action buttons I don't just want to use the normal button control since I want to do a custom button that has icons inside of it so to do that I'm going to add in a nonresponsive container that will house this button and then I want the height I'm going to set the alignment to Center and set the height to 35 and then for the width I'm going to turn off flexible width and then set it to 200 that should be okay and then inside of this I'm going to add in a text label and make sure it FS the container so I'm going to set X and Y to zero and then the width I'm going to set that to parent the width and then the height I'm going to set that to parent do height I'm going to set the text to be centered and let's change it to little black and then set the font size to 10 let's also change this to semi F right and then I'm going to add in a a right padding to just increase that by 25 just so there's space for our icon so I'm going to embed an SVG icon inside of this I'm going to use an image control for that set the height to um 20 20 should be okay I guess height and weight to 20 just so so it can be square 20 20 let's increase it to 25 just so it's a little bit bigger 25 and then for the Y I want the Y value I want it to be vertically centered or vertically centered so I'm going to set that to parent do height parent do height minus self the height ided by two so that will make it vertically centered and then as for the X I'm just going to just do some testing on that until I find one that is fine I think 120 is okay 1187 I've already undone the Y value okay all right cool so 117 I think that should be fine so then let's embed our SVD icon in this going to select the image control and then embed that so I'm embedding a an info icon so if you if you don't know so much about embedding SVG into your app I've done a previous video on this so check the modern powerups series the chapter on SVG management and you see how explain allot of things you need to know about embedding svgs all right cool so the next thing is I want this button to be the same as the magenta we using around the app so let's just change that so for the F of this one the feel of the print container I'm going to set that to custom theme do tary color so that's uh Pink for the text I'm going to set that to let's just use white then I'm going to add in a border radius of 30 on the parent container and set the drop shadow think semi both should be all right and then I'm going to set the Border To None So can semi semi is too much so let's say semi light all right that looks way better cool so then we need to just make this click a so let's add in a an actual button control so this is where we add in our un select and all of those so we're going to set the X and Y value to zero make sure you fuse the container by setting the width to parent width and the height to parent do height then we to set the field to transparent and then we need to set the Pressed field so press field press field where is press field press field to are the Press field that we use on the rest of our app so that's um custom theme dot pressed field so that is um a transparent block and then for the hover field Hoover field we're going to set that to this also c bar over F cool I think I set the I set the few to white instead of transparent so it should be transparent and then let's also clear the text since don't and now we have our custom button so all we need to do is add in you can add in the value you want to do in the UN Select Property so if you want to navigate to a page but I'm not going to do that since we don't have any page for that this is going to be going to change the label to say help since it be like a call to action if they want to ask how to work the app and then we're going to just add one more for submitting a new request I'm going to just copy this and paste it again so let's add in a little bit of padding so let's say 10 10 should be fine yeah say separated call and then for this one I actually want it to be transparent so going to do color do transparent and then for the Border going to set that to solid set the border to two and then set the Border color to a um primary or secondary color so that's custom theme secondary color so that will match the app and then does change the text also so the text also is going to use custom theme second color secondary color and then for the icon going to also change that to secondary colorcore text cool oh I don't think let's let's remove the we don't need the the what's it called now I don't think we need the icon and then for the B text going to do set it to submit new requests all right cool and then since there is no icon we can just set the right padding back to five so it is centered and yeah that looks clean and beautiful made me happy made me smile nice so the next thing is the the last section which is where we're going to put in our individual menu items then let's add in the gallery so it's going to be a horizontal Gallery blank horizontal Gallery yeah then for the container I want to add in a 30 padding all around it so there will be space between the gallery and the edge of the container so 30 30 30 all around so that is great so now let's um set data source for our Gallery I'm just going to use the same data source we are using for our side navigation component since it's the same thing maybe the only difference that I'll remove the menu item for the home so let's just copy that so go into the formulas and copy the whole table and then we can modify it as needed so this one for the gallery for the items you're just going to paste that and then remove the first one which is the home button and then just leave the rest let me clear the semicolon that's cool now the next thing is to begin adding in the gallery item so the gallery components and all so question I get asked a or asked a lot of times is I they have issues um adding in controls inside of their Gallery so for example I added I selected the gallery and clicked adding a text level but it's adding it outside of the gallery so what you need to do let's pH what you need to do is to First select the gallery if you're having that issue first select the gallery and then this um icon here click that and then that that would select the template and once that is selected if you click if you add in any item or any control he adds it inside of your gallery so that's just a fix for that so in my case I'm going to add in a container in this case anyone is fine so let's just add in a vertical container I did the same thing oh good all right so select this select the templates and then yeah now it's correct now so make sure you fuse the template the Galler template by setting x z and y to zero and then with and I to parent the template withd so parent to template withd and then the height should be parent dot template height yeah so you f template now so we just going to clear the drop shadow and the Border radio since we do not want that then let me add in a 10 padding padding of 10 all around it so the items inside it w have to be touching others and then inside of this I'm now going to add in another container and this will be the actual um gallery items so for this one it's going to be vertical container vertical container and I will set it to let's say border R should be 40 and set the drop shadow to your regular and then this is what is going to contain our what's it called now our items so as for the width of the template I want it to just contain only four items without having to you know scroll scroll through scroll through it so what we're going to do is to change the template size before that let's remove the template padding and then change the template size um so we're going to do self. withth divided by self all items F so this will make it so that it only has enough space for its items all right so now that the layout is done let's begin adding in the components so first I'm going to add in a text label then set it um alignment to stretch set the minimum H zero set it to centered set the font type to little black and increase it to 14 let's also say semi B and then as for the text it's going to be this item menu name then I'm going to turn on flexible height yeah that's all right so let's just just copy and paste it and then for this one the the text will be this item the menu description we're going to change the font to little light reduce it to 11 set its font style to normal and yeah then we also want to have the button at the bottom so since they've done something similar before I'm just going to copy this this whole container paste it here then inside of this one we do not need the second one the second button we just need the first one then for this one let's make it properly centered so we're going to select the print container set it justify to Center so it can be in the center as for the Heights I'm going to increase it to let's say 45 I think that is all right 45 should be all right and and yeah that looks cool let's change the text of the label to proceed and then I will change the icon from info Circle to what it Chevon right Chevon then I'm going to turn on flexible height for the parent container so it have three equally sized contents for the menu name one for the menu description and one for the the the button let me also remove this one a little bit to the right so I'm going to increase X the x value 124 seems all right all right cool and then the last thing we need to do is the button so on select of the button want it to navigate to the respective page so on select of the button I'm going to say navigate to this item do menu or page navigation since that's where the pages cool and all that's left is to test it out so before that I think we can instead of those request you can say maybe view item request or view or add requests so it doesn't look too small inside of it so let's change the menu names a bit so I'm going to go to your data source and add in just a little more info for the menu names okay that looks that looks better all right so let's see it in preview mode we have our home screen we have the ability to go to the request page can come back to the own page go back to the feedback page nice that brings us to the end of the second video in this p app score pilot series with what we've learned so far you should now be able to use p app score pilot to increase your productivity while building your power up Solutions if you've enjoyed this video or at least learn something please like the video and also subscribe to the channel and hit the notification button to get notified when I release new content thanks for watching CCH you in the next [Music] one

Channel: Tolu Victor

Views: 25,426

Keywords: Powerapps, Design Ideas, App Design, UI Design, Power Apps, Modern, Modern Controls, Copilot, Microsoft Copilot, AI, ChatGPT

Id: DEAAvmBX468

Length: 36min 24sec (2184 seconds)

Published: Tue Mar 05 2024