How to use Microsoft Copilot to design a MODERN Power App

this is a modern power apps application I built and designed using co-pilot it contains a unique homepage UI as well as a customized data entry page and the best part co-pilot handles most of the heavy lifting making the app building process a whole lot easier this video will be the first in my Series where I will show you how to make the best use of co-pilot as a power apps developer in this first video we will learn how to use co-pilot to wasting development time as regards data model creation initial up build as well as customizations in the second video we will learn how to use co-pilot to design unique interfaces for our different powerups project anyway with that being said let's get into the video for today's demo I will be creating an app for staff to request items from the company warehouse this can be something like um replacement keyboards projectors cables or just about anything the company Warehouse has in stock and as I said earlier co-pilots will be doing most of the heavy lifting so now we on the power apps homepage and there should be a chat input here you can use to interact with co-pilots and as it says you can use everyday word to describe your app's main function and then co-pilot uses generative AI to build your app and database and all of those for you if you don't see this chat box here you need to enable it with within the admin Center to do that just go to the admin Center and then select your environment and go to the settings page on the settings page you have a product drop down here click this and go to the features page where you can enable co-pilot so you can enable co-pilot here if you if it's your developer environment or you can get your admin to get it done for you by default co-pilot TS all components that it builds within the default solution but in most cases you want this to be stored in your own custom solution that is dedicated to your project so to do that you need to enable the prefect solution feature within admin Center so on the admin Center on the settings page of the environment you just need to enable the preferred solution um feature and once that is enabled on your solution page you should have this bar here where you can set your preferred solution so you just click manage and select whatever solution that you want co-pilot to store all components in so I've selected this solution and apply and then whatever solution whatever component you build using co-pilot all of them will be stored within the solution so let's view the app now I want to create an app for office staff to request replacement ofice items right away you can see it has suggested a schema that will work well for the app that we want to build includes request ID the request the item you want to order the request date and the status so using C pilot you can directly describe what you want to be changed for instance this status column it has three options and I want to add one more option to it I can simply describe that in the co-pilot chart so I want to add a new status option fulfilled and once you do that if you check it again you see it has added the fulfilled option as one of the choices for the column I also want to add another column for fulfillment it and right away you see co-pilot has added the column to our data model while accurately setting the column type you can also change column types to match your needs another cool thing you can do is to ask questions as regards co-pilot capabilities for example I'll ask if auton number columns are supported since it says yes let's try to add one to serve as a ID column and great it has added it so let's check it out apparently it seems like ultimum columns are not yet supported as at the time of this recording and co-pilot is trolling us G well to be fair it does say a generated content may be incorrect so it's up to us to validate its replies so let's ask it directly which column types are supported so it seems that these are the column types that are supported as at the time of this recording and co-pilot was indeed trolling us before co-pilot your trolling AI companion and anyone anywhere any device download now I'm joking please don't see me so the the next question that we will ask will be what can we do if we need to add other column types so we'll get to that shortly but the good news is that for the first release wave of 2024 Microsoft has hinted at adding um features for complex data to power SC pilot So currently we can only create a single table at a time but once that feature is life we will be able to create multiple tables and complex data models at the same time and I will imagine that this means that to support more column types like the lookup column which is vital to creating complex um data models so let's remove the unnecessary columns and we also have the ability to change the table name so I'll change that to item requests and let's also add some more rows of data so we'll be able to test off properly yeah so now that we are done with our data model customizations at least for now let's create our app now co-pilot used the info that we provided and he created a fully functional app which I must say looks really great for a generated app template I mean if you compare it to the three screen generated app templates which has been there for almost a decade I'm happy that we are finally getting upgrades as regards generated templates anyway the app has are data in the gallery and it also has a form where we can add or edit data and the cool thing about this is that that they've made it fully responsive so we can see the app in canvas mode um tablet mode and even mobile mode and the app also includes indicators for connectivity and this is great for those building offline apps so all in all I think this template looks really cool and it can help save so much time for our Builders so let's save this and publish it so now let's go back to what we put on hold as we've seen not all column were supported when we were creating our data model so what can we do since we've set our preferred solution earlier we can go to that solution and modify its data ver content like normal what I mean is that you can add new columns remove existing columns create relationships and all of the things that you normally do in data verse the only difference is that co-pilot has created most of the columns so even if you're making any changes it does be a few things that we are changing for example um request name should actually be a look up to the user table so you can delete it and add the appropriate column type but I'm just going to leave everything as is for now to keep things simple the other part of the discussion is adding new tables so since we can only create one table in a co-pilot session at least as at the time of this recording you have to do multiple sessions for each table and then you can come back and add any other info in data verse well either do that or just create the table directly in data verse now I also want my app to be able to capture user feedback so I'm going to use co-pilot to create the table for that also so create an app for users to leave feedback on my last app so let's create that so it has generated a table for us with ID user ID rating comment and date of feedback so obviously user ID should actually be like a look up to the user table but as I said I'm keeping things simple on this app so let's just create the app so I'll save it and publish it and then we'll check it out in the solution so in the solution you can see it has created another table for us for the user feedback we also created an app but we don't really need the app since both the feedback and the item request are just going to be inside the item request app but it has helped us save time by creating the user feedback app for um table for us and then you can add in um any customizations to the table that you now we are back on the original item request app let me rename this one to request screen I also want to add another screen to serve as a PID for the user feedback so let's add that screen the power up Studio co-pilot allows you to interact with your app using text then it's AI uses that to make changes your app so let's test it out I want to add another screen for the feedback so I can do s simply describe that in co-pilot chat so add a feedback screen and right here you can see it has added the screen for us and renamed it so if you don't see this you just need to if you don't see the co-pilot chart you need to just click this button at the top here and it should be visible then if you don't see the copilot button at the top it needs to be enabled as a feature on the PBS environment so this co-pilot enables you to add different controls modify existing controls and even its values so let's try a use case now um a layout I particularly like is the one where we have the Side Bar on the left and then the page content on the right so we can use co-pilot to generate that layout for us um using the containers so I've just described what co-pilot should do it should add a horizontal container set this X and Y value to zero and then it's withth and height to F that of the parent and then then it should have two containers inside one on the left one on the right and I've specified the width and the one on the right so let's just enter that and then it generates it for us you can see it's adding the containers and setting the different values so it has added a container to fill the page it has added the right left container that I can add in my navigation side navigation and then on the wrer can add in the actual page content so stuff like this is what you can use to use the copilot for so a misconception in love people had when this feature was released was that it could only add in one item at a time so if it was a button or a text label a gallery you know they just type it add the button and then co-pilot add it for you and the argument was that it's a lot faster if you just add it directly from the insert tab or the insert pain which I totally get is indeed a lot faster actually but the thing is if you combine all your actions or a lot of actions into one AI prompt it it to be a a whole lot faster in the long run take for instance if I wanted to build this layout manually like the way we normally do it I'd have to add container one container two container three and then do the different configurations to each of those container but then I achieved all of that using just one AI prompt which I guess is a lot faster than doing a one by one so the thing is that you have to combine a lot of actions or try to combine actions into your prompt to sa time I know the next um argument is that the time it takes you to type the prompt you could have also just used that same time to add the controls directly which might be true in some cases but the thing is that it's best to have a prompt catalog where you store all your commonly used prompts so you can just copy them and paste it whenever you need it so for instance this is a layout I mostly do on my apps so I have this as a prompt where I can just copy and paste it so copying and pacing is going to take less than 5 Seconds actually and then it does all of this for you which you would have otherwise used some minutes to do actually your prompt catalog can be something as simple as a text file or you can use an app to store and manage your AI prompt ail dham created a really cool prompt catalog app which you can get for free and it allows you to store and organize your AI prompts for you and your team I'll add the app link in the description as well as a video on how to use it so check it out if you're interested so let's get back to our app build first I will add the user feedback table to the app so user feedback and then let's copy the whole user feedback app and just paste it so I'm going to copy the container for the page content just CR C normal copy then paste this inside of the root container for this page all right so there are a few errors we need to S out it should be as regards the screen name so since we change the screen name to feedback screen also change that here I'm just going to use the find and replace functionality to change it all so I'm going to change anywhere we have main screen one screen that change it all around here it's cool so we can then delete this container we are not using and there we have it we already have the user feedback inside of this app so now that is done let's be begin modifying our app to look more mod and to feel more unique to your different first thing I would do is to set up my custom theme so I want to use a different theme than this blue and white that we have here so I'm going to use the named formulas functionality to set this up so I'm going to select app and formulas then add the theme so um if you watch my previous videos you would be familiar with me doing um this as individual variables well it's more efficient I found that it's more efficient to actually set them up as objects rather than individual variables what I mean was that before i' set it up as um one variable for each different color that we need but you can just set all of them up as an object variable which is what I've done here so I have my custom theme and then inside of that we have the three main colors which is the primary secondary tertiary that we'll be using on the app and I've set up um color variable and text variables for each of those main colors because this will'll be using some custom svgs on the app and we need text variables text variable version of our main colors then you also have a param Tex color a highlight color and then the colors will be using for the Hoover fi and the Pressed F so that's Ty about colors the next thing are the custom icons that I will use inside of the app so these are the custom SVG icons that will be using on the app and as I said we are setting them up as object variables rather than a table variable this makes it a whole lot more efficient when you're trying to access it because before when it was a table variable you'd have to look up into that table to get the SVD data well as an object you can directly get the SVD data and it's way faster especially when you have a lot of SVG icons on your app so these are all the SVD icons that I'm using a couple of them and we've set them up already so if you want to know all about adding svds on your app I've done previous videos this topic so check out my mod power apps UI series playlist how to do this I link the video somewhere there and yeah that's that so now the colors and SVG icons are set up let's begin adding controls to our screen the first thing I I want to add is a navigation control to move between the screen so from item request to feedback screen and all of that so in my previous video I've already done a tutorial on how to create modern looking um site navigation so I'm just going to import that component into the app here so let's use the collapsable one and as usual all channel members have access to all of the apps from my previous video so whether you want to just learn how to do it by following along with videos or you want to use it for your projects um they're available for download to all channel members so let's just delete the components that we do not need that's great and one thing to know is that when you import components it also Imports images so if you don't need the IM make sure to delete it so yeah let's begin mod defy this to fit this project first of all since this app will be a single color scheme let's remove the custom tole for the um for switching the app Theme I'm going to remove that I also don't want the logo inside of um I don't want the logo inside of the sidebar so I'm going to also delete that then let's begin removing custom properties we don't need so for example logo custom property we don't need need that going to delete it the logo padding percent we don't need that I'm going to delete it the app column mode we also don't need that since it's just one color mode so I'm going to delete that also cool then let's begin correcting all the errors so most of these errors are because it's it's trying to access um either colors or stuff that we set up for the previous app but it's not this app so let's just relink them to the proper variables in this app so for the selected icon BG I want just should just be white so I'm going to say that to color the white um let's see the nav BG I'm going to use the primary color for this so custom themed or primary color so this is the advantage of setting this setting your colors up as um you know object so you can just have everything directly in one object variable then let's see hover so custom theme over custom theme over remove this custom theme cool then press field same thing custom theme the Pressed f um that one has an issue logo expanded we don't need that so I'm going to delete we going to delete that from there then primary text Colum so that'll be custom theme that's param color which other one app color mode I don't need that I thought I deleted this the app colum mode we also don't need that since it's just one color mode so I'm going to delete that also stupid guy up col mode that's gone and yeah that's about it let me also increase the the um size of the labels so let's increase that from 8 to 10 since this would be a rather big app with B components so um yeah let's also change the label for the name also to 10 so that's cool so then let's add it to our screen first let's um do the layout similar to the layout we did on the feedback screen let's do something similar for this page so I'm just going to add in a container horizontal container make that fill the screen by setting X and Y to zero then the width and height to parent the width and parent the height which is cool then let's add in container for the um for the for the um what they call it now for the sidebar and then another container for the actual page content so already have the container for the page content here so I'm going to cut that paste it inside of the cont that we added earlier so first of all let's change this one going to turn off flexible withd and then set its way to let's say 70 for now I would also clear border radius and drop shadow on all of them now let's add in the components that we just created custom component side navigation menu then let's change the width of the container to match that of the component so it can expand and collapse when we click on the button so the width of the container should be site navigation. width oh so expand that expands along with it next thing is to set up the navigation content I mean the menu content for the navigation menu so we'll do that as inside of the named formulas so I've set you up already so this is the home menu for each of and it contains a table variable that has all of the menu content so we have one for the homepage item catalog request approvals and feedback so this is the advantage here of using um what's it called now using object variables for your icons because before if you wanted to link an icon we'd have to do a look up to the table but then since is an object we can directly access it using the object variable so custom icon. home custom icon the home field you know that's how you not easily access your SVG icon so it's more efficient that way and it makes load on your app a whole lot less so yeah let's link that to our um what's it call our navigation now so the menu contents that will be home menu that is cool so the next thing to do now is to begin changing colors around the app so let's start from the components actually forgot to change this one earlier so let's change the base icon color so that will be custom theme custom theme dot um what's it called now primary colors sorry up to secondary secondary color and hold do the same for the base icon colorcore text so second colorcore text and then for the selected icon color we're going to use the tary color tary color and then the selected icon colore text going to use tary colorcore text so it's going to be a dark purple and magenta kind of color scheme cool and I think that looks that looks great let's change this one to is the request yeah so that's about that let's do the rest of the app but before adding colors around the app I want to modify the header so I don't want the header to have a background background color and I want it to be transparent so this I think this is my only issue with this um template is that the the background colors were applied to the label and the icon rather than not applying to The Container I guess there must have been a reason for that so let's clear the the FI for those items and for the text I want it to be lat to Black 16 is fine and then let's change the color to our primary color which is primary text color so primary text color which is great this one let's change it to our tary color which is the magenta tary I also don't want this um drop shadow so let's clear that don't want all right cool so then let's begin modifying the blues around the app so to modify the blues around the app you can either do it individually which will actually does take you whole lot of time for no reason or you can use the find and replace functionality so I use this earlier in the video so I'm just going to explain how it works so it's just like normal Fin and replace that you do in your text document and not but this time we are doing it on the app so the text I want to replace is this blue color so anywhere this blue color is I want to replace it with my magenta color so that is what we are finding and then I want to replace it with my magenta color which is the tary color so custom theme custom theme Dot recover so there is no um is it intelligence they call it there's no intelligence here so you have to make sure that what you type is correct if not you have to undo and then try might be messy but I think it's still a lot faster than having to do one by one so once that is done replace so there are 53 instances across the app so imagine having to do that one by one that will have taken so so much time well you've done all of that in just say less than a minute and I Stone so even if you check the the next page also you see all the blues have been replaced with the um AR tary color which is M and I think that looks really great then you also have to take note of that there are some that you need to change so like the H colors now so the H colors are different shade of blue so you also have to change that so let's check that um out so over color let me just copy that so H Color H Color over field actually over color so H fi so this is the shade of blue that we want to find and replace so that's what we are changing but this time instead of replacing with the tary color I want to replace it with a darker version of the tary color so we are going to do an inverse fade or inverse color fade on that so that be color fade so does normal callor fit function and then we're going to do that for minus 20% so that would do an inverse fade which is in essence darkening it so refresh that so this one is 58 and cool so you can see now that looks better same thing for the icon so all of the um over FS sorry all of the yeah over FS have been changed to much that and that is cool the next thing I want to change is the font type to lat to for around the app so this most of them are either s UI or I think there was one other font or open S so I'm going to change all of those to later so let's do the same the same thing we just did for the color so what I'm replacing is font UI I want to replace it with um l so I to replace that so 73 instances now 76 it just change this one and then replace all of those that's cool then do the same thing for open SS so copy that and place everything later so just three up so many yeah and that is cool yeah that's great the next thing I want to do is to change the background of the screen to a primary color gray so I'm going to select the root container and change the F of that property to our primary color so custom theme prolor I guess I think this one is white so let's change this one to transparent all right and that is that looks cool then let's add in our logo so I'm going to add in a logo here besides the um P or the app title here so let's import that so I'm going to go to the media page so as I said earlier when we're importing components so when you import components you also import any images you might have used the app so this ones I'm just going to delete them since I'm not using it so now all of those are deleted let's import the logo we are using on this app all right so that has been imported then let's add that to a header here I'm going to add in an image control image image image so I want to bring that to the start it will be beside name then change it to the logo and then I I'm going to set it to stretch to fill the what's it call this Sprint container I'm setting it minimum height to zero think a we of 100 is fine and I would add in just a little bit of top and bottom pattern so it can be a little bit smaller also I think the header is a little too big for me so I'm going to just reduce that from 68 to 50 so you can look a little bit more Compact and cleaner yeah and that looks really cool the next thing I want to do is to add a bit of drop shadow to our site navigation just to give a little bit of distinction between the page content and the navigation I'm going to select its container and add in a semi bold um drop shadow and I think that looks great actually yeah that's cool yeah then I want to um change the form headers text to from lat to lat black so this will just give distinction or more distinction from the form and the actual form content and yeah that looks cool the next thing I I want to move the connectivity icon from the header to the side sidebar because um yeah I don't think there's any reason I just thinks it looks cool that way so let's copy that and and we're going to paste it inside here but we need to add the container first so I'm going to add the container the horizontal container vertical container any one works since it's just one item you're adding I'm going to move it up by one then I want it to be 50 or 40 actually the WID should be 40 the height should also be 40 and then I don't want a b radius I also don't want a drop shadow then I can paste what we copied earlier then for this one I'm going to C right padding and I want it to fill the container so I'm going to leave it alignment as stretch set the minimum height to zero and then I'm going to turn on flexible width and set the minimum width to zero cool let me just add in a top and bottom padding also so that will just make it a little bit small more line yeah let's test that out yeah that's cool I don't like that border I'm going to remove the Border since I just I don't think it yeah that's cool so that's fine let's remove this one since we don't need the any so deleted it and yeah I think we can also change the border of uh image control from this block to uh magenta so I'm just going to change this one to selected icon selected icon color yeah so that's pink let me also increase it to three so it can just be little more prominent yeah all I think this this is good this is good boy the next thing is the gallery now I think the gallery actually looks okay so I'm not going to make so many changes to it but I've done a video on how to do modern Gallery designs so check that out if you're interested but for this I'm just going to change its content so rather than it showing the quantity I want it to show the request ID okay and let me also change the arror from this color to our magenta so custom theme do T color all right so yeah I think that's that's that's sufficient okay cool the next thing I'll modify is the form but before that it has come to my attention that 82% of viewers are not subscribed to the channel if you've at least learned something in this video please like the video and subscribe to the channel to stay notified when whenever I release new content so let's get back to our video now so as for the form you can actually keep things simple if that's the direction you want to go let me change this to a two column layout and then I'm just going to reorder reorder the content to match what I want so moving request ID to the top and move request also to the top item name item quty yeah and that looks I think that looks all right I'm also going to set all of them to have a width fit of through of true and so setting with Feit to true just so that the status can feel the bottom let's see so for the date I actually just want it to be a date um column so I don't need the time so so let me just unlock this and then we are going to delete the time since we don't need this so I'm going to delete the hour hour the separator on minutes delete start then by this one is the DAT value rather than this one just positional stuff so should be fine and then for the update values going to change that just use the date rather than the date time that looks better then I'm going to set the width of this to brus 60 just so you can f it original space and then I'm going to do the same thing for fulfillment date next thing I want to do is to change the form Eder so instead of just 006 I wanted to say request number 006 and I think yeah that looks way better than just 006 and yeah you can decide to just end it here because I think this looks actually really cool and really great but then if you want to take things further I created a video how to do um um what do they call it modern form layout so you can check it out if you're interested but we are going to do something similar in this project so before that let me just change the background color of the form from white to transparent and then let's begin adding the components and now I'm done with the custom form layout and you can see that looks way better to um compared to what we had before and also test it out and yeah so everything is working as expected now if you compare this to what we had at the beginning this looks way better to the base template while that look great this looks way better so I guess that's about it but before we end the video I want to just touch on responsiveness so I'm not going to go into detail too much but then since this app is built as a responsive app if you want to keep it responsive obviously you have to you know put some things in place depending on what you need for instance on the tab layout if you want this to be double um what's it called double columns you'd have to set that on this for this View and on the mobile view I think the mobile view will be fine with just one but then we obviously do not need this kind of sidebar on the mobile view so you'd have to hide this one and then do a mobile navigation bar a separate mobile navigation bar at the bottom and make that only visible um when the what's it called now when the view is in the mobile phone Factor so that is actually a whole separate video on this but if you want to learn more about um responsive design and all of those let me know in the comments below and we would um work on that now obviously we still have the the feedback screen but I'm just going to copy and I'm just going to duplicate the request Queen and just change the title bothered that brings us to the end of the first video in this power app coool pilot Series in the next video we will learn how to use co-pilot to design unique interfaces for our different PowerUp projects 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 the next video in the series thanks for watching I'll catch you in the next one [Music] oh

Channel: Tolu Victor

Views: 6,942

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

Id: JrglD1pWsIk

Length: 39min 43sec (2383 seconds)

Published: Thu Feb 22 2024