Getting Started with Model-Driven App Custom Pages and Command Designer in Power Apps

hello everyone reza here in today's video i will show the new custom pages feature in model driven apps along with the new command bar designer experience custom pages allow us to build pixel perfect responsive canvas pages inside model driven apps so this initiates the convergence of the model world and the canvas world into a single app you can extend to other data sources and services through the data connectors available in a canvas page the new command bar designer allows us to customize the command bar using powerfx formulas so let's check all of this out in action app creation and power apps is no longer an upfront decision between canvas and model when you start with a model driven app you can easily add custom pages to take advantage of the power of canvas authoring and all of this with the new modern app designer experience we also have the new command designer experience with our effects you can open custom pages as dialogues you can trigger cloud flows from a button on the canvas page you can also drive the visibility of the command using powerfx formulas first let's look at a demo of a device management solution that i built leveraging model driven apps canvas pages and the command designer experience this is a model driven app in which the landing screen is a canvas page and here i am listing out all the devices as part of my table that i am storing in microsoft dataverse i have highlighted the name of the device a picture of the device and the status of the device i have a filter here on the top where i can filter the data based on the status so if i would like to look at all the devices that are currently assigned if i select assigned the filter will be applied and i get all my assigned devices along with the names of the users to whom the device is assigned to i also have the devices grid view which is the standard grid experience in a model driven app wherein i'm showcasing all my list of devices the manufacturer name device type status and more we also have the ability of the canvas page to interact with the records in a model driven app so for example if i wanted to add a new device to my inventory if i click on this plus icon this will open up the model driven form for me to go ahead and create a new device if i was to select a specific device it will directly take me to the mall driven form information for that specific device that i selected you can also build multiple pages inside your canvas page experience if i wanted to assign the acer aspire s3 device to a specific user i will click on this icon to load up my second screen in that canvas page experience here i have all the details of my device and i can assign this device to any user in my organization so let's say i assign this device to reza and i can also specify a due date or a return date for this specific device let's say i pick october 20th and i click save now the moment i do this the data is updated in my data source i can see the information right here that the device now is assigned to reza at the same time because this is a canvas experience we are free to extend and connect to other data sources and services in this scenario i'm also sending out a notification leveraging the microsoft teams connector so if i head over to microsoft teams reza gets a notification that this specific device has now been assigned to him these are the details and the device is due at this date now if i was to accept a return of a specific device that is assigned so let's take the example of this device that is currently assigned to reza if i select on this return icon it will go ahead and update the status of that device to available and at the same time reza receives a notification and themes that that specific device was returned on that date if i head back to the devices grid view i have leveraged the new command designer experience to add specific commands in the command bar if i was to select a device let's say acer aspire s5 i have a command that i added called device assignment history in the back end i have a related table created which tracks every device that was assigned and returned so if i was to select this in the right hand side panel here i have another canvas page that is showcasing the device history timeline associated with the specific record that i have selected this device was first assigned to sarah on july 30th returned on august 2nd sarah owned this for three days then resurrended for a day and then resurrended for a day again if i select this specific device and i click on open the record it will open up the full page experience which was my device's inventory page and here it is filtering only to that specific record you can also show and hide commands in the command bar based on logic so for example only when the device status is assigned do i open up an additional option on the command bar for the user to send an email or a notification to the user to whom the device is currently assigned to acer aspire s3 if i was to select this i get this additional option that opens up which is called node to user that's because my device status is assigned if i select this opens up this dialog experience which allows me to send a message to that specific user and i can type in the message right here and click send the person who this device is assigned to in this case it's reza reza receives an email with the subject message from admin for the name of that device and here is that message now let's try and replicate certain components of this solution from scratch and also deep dive into the key aspects of this solution best practice is to start from creating a solution so in powerapps under the solutions tab i'll create a new solution i'll give this a name i'll click create i will click on the solution name and this is where i can start adding my components for the data for my devices is maintained in a table called devices and as part of this table i have the following custom columns assigned to which is of type email to store the information of who the device is assigned to the name of the device the status of the device the manufacturer information the picture of the device and additional details i also have a related table called device assignment history and in this table i have the following columns the name wherein i store the name of the individual to whom this device was assigned the date at which it was assigned and the date when the user returned the device so that's how i'm tracking the history and the key here is for me to link this history table information with a specific device and to do that i leverage the lookup column type and to create that type of column just go to add column give it a name under data type you have lookup and here you can pick your related table in my case it was devices now back to my solution experience this is where i want to start creating my model driven app so i will head over to new go to app and pick model driven app and here you can select the new modern app designer experience so i will pick this and click create can give my app a name and click create i can start adding a page to my navigation so if i click on add page i have the ability now to select multiple options one i can connect to a table in dataverse and get the standard view and forms or i can connect to a specific dashboard or i can leverage the new custom pages feature which allows me to build pixel perfect canvas experiences first i will connect to my table based view and form click next here i can bring in information from one or more tables so i'll search for devices selected added and if we look at the pages on the left hand navigation here we can see that inside app i have my devices table connected and as part of that table i get my form experience and i also get my view experience next if i want to create the new canvas page experience i will head over to add page go to custom click next and here i can give this page a name i'll call this my devices page i'll click add and this now launches the canvas creation experience for us one key thing to note is model driven apps are responsive by design canvas pages do support responsive design through the responsive container controls however by default these pages are not responsive you will have to add those container controls and make your app responsive on the left hand side i'll go to insert search for container and i will add a vertical container this will be my main container on my screen the key thing here is to ensure that the following properties are set correctly the x property should be 0 the y property should be zero so this container sits exactly at the top left the width property we will set it as parent dot width and the height property we will set it as parent dot height so this container now acquires the entire size of the current screen and in this is where i can add my controls i have done a full video series on responsive designing the link to that playlist is in the description of this video so do check it out i would like to add a header to my screen so once again i will insert a container i'll pick the horizontal container and this container is sitting within my main container i've just gone ahead and renamed my controls so for the main container for the horizontal alignment i'm going to set it as stretch and for the header container because i wanted to only occupy the top space of the app i can define the height so i will turn off flexible height and let's say i would like to give my header a height of 70 pixels for this container just give it a background color say orange and in here is where i would like to add a label for the header of this app i will go to insert add a label control give it the text devices will change its color to white increase the font size to 14. set the flexible width property of this control to on so it occupies the full width for the vertical alignment i will set it to stretch so it gets the full height of that container as well and i want the text to be aligned at the center so i'll change the alignment next i would like to list out all my devices in a gallery so for that once again i will select my main container and insert a horizontal container rename this to content container and in here i will go to insert and insert a vertical gallery now in order to get data from my data source which in this case is microsoft dataverse i can go to data sources here go to add data and this will list out all the tables in my current environment one of them is devices so i can just search for devices select the data source and get that connected inside this canvas page experience please note this is a canvas page we are free to connect to other data sources and services by heading over to connectors here and pulling in information from a wide variety of data sources excel sql sharepoint teams and a lot more now once i have my data source connected for my gallery control under data source property i will select devices one of the properties of the gallery is template size i'm going to increase this to let's say 70 i will edit the template item of the gallery which is the first item maybe i will increase the size of this image control and for the image property i will leverage this item dot photo photo is the column inside my table that has the url to the image here i have a lot of white space on the right hand side so i can change the wrap count of the gallery to fit more items for example if i change this to four it will fit four items we are building responsive apps we want to change this wrap count property dynamically and we can easily do that by using a very simple formula which is your screen name in my case it's called home screen so home screen dot size now i can go ahead and preview my app and here observe as i start reducing the width automatically the gallery will start changing the wrap count based upon the screen size now if you want to navigate from a canvas page to some of the model driven components we can easily do that right here so for my header container where i have the devices label i would like to add an icon so the user can create a new device i can go to add add an icon here select the icon that i would like to add stretch the vertical alignment here and when the user selects the specific icon i would like to navigate the user to the form creation experience and we can easily do that by leveraging the navigate function typically when you use the navigate function in powerapps you are navigating across screens in this scenario you can navigate to other custom pages in your solution you can navigate to the new form experience you can navigate to a specific record experience and more in this case because i want the new form experience i can just simply use the defaults function and provide the context of my data source which is already connected in my app which is called devices and for my gallery when the user selects a specific item there's a property called on select here i can use the navigate function and just navigate to this item this item is nothing but the current context of the item which is coming from my data source which is devices now in a canvas page if you want to create additional screens it is turned off by default because goal here is to create as many pages as you want inside the solution experience go to settings go to display and right here at the bottom you can enable the multiple screen experience you get the option to add new screens you do get the screen responsive layout to select from you also have the standard scenario based screen templates that are available the recommendation though is to create multiple canvas pages now once you have your page built out click publish remember a canvas page is a canvas app so here it's asking me to save the app first so i'll click save a notification appears that the page has saved successfully so i'll click this miss this was the first time i saved the app so it automatically saves and publishes in future when i make changes you have to ensure that you click on save and then publish so once i'm done with this i can close my browser tab now back in the model driven app designer experience you have to ensure you hit the publish button in order to ensure that the latest page experience is available as part of the model driven app now here we can see my devices table which has the view and the form if i click on devices page this will launch that canvas page right here inside the context of the model driven app on the left hand side we also have navigation and this is where you can define your area group and sub-area so for example heading here is called group one so i would like to change the title so i've just changed the title right here here is my devices and device page i can even reorder them accordingly so if i move this up my landing page now would be my canvas page experience and here you can add additional group and sub areas under data i can see all the data sources that are connected to my app currently i have only connected the devices table if i had additional data services or data sources connected they would all list out right here because i made changes i need to ensure that i publish this app so i can see all the latest changes when i play the app i will click on play and this now launches the model driven app right here inside my browser the landing page is my canvas page which is fully responsive as i change the width we can see how all the controls are responsive thanks to the responsive containers if i was to select on the plus icon it should open up the new form experience for me for the devices table if i select this it will automatically open that experience that's thanks to that navigate function and if i was to select a specific device it will directly load the form experience for that specific device all of this is mobile ready as well on my powerapps mobile app if i was to launch this specific power app i will have my canvas page fully responsive along with my mall driven components going back to my solution which is device ordering you can see different components populating the site map my model driven app and the page and this page is that new custom canvas page now here for my model driven app if i select on the three ellipses go to add required components and click ok this will also include the components that are not a part of this solution for example my devices table so i can see that right here if i select this table you can see all my columns if i would like to change the view i'll head over to view one of my views is active devices i'll select that and this will load up the new view designer experience and this is extremely simple to use if i would like to show who the device is currently assigned to as part of the view and just select the specific column drag it and drop it i can add additional columns define the default sorting behavior add filters to my views and create different experiences once i'm done with my modification of my view i can click on publish the beauty of this is now if i go back to my model driven app automatically the view has the changes reflected i can see that new column that i just added and to customize the form experience for my table if i head over to forms this is where i can design my form so for my main form here you can go to edit form edit a new tab and this opens up the form designer experience i can add tabs i can add controls i can add related data and then i can just add the columns by literally just selecting the column and just drag it and place it on the form my case i just have one tab called general i have a couple of sections and a sub grid that shows the device assignment history which is my related table once i have completed customizing my form i will just go ahead and click on publish and back in my model driven app experience my form is automatically updated and i can see the changes right here i added that column assigned to that column is available here under pages for your tables that you've added here from database i can select the three ellipses here and go to edit command bar and this is where i can customize the command bar for different experiences my main grid my main form my subgrid view or an associated view in this case let's select the main grid and click edit and here is where i can add additional commands in this case i'll add a couple of simple commands the first one i'll give it the name notify i can select an icon or use the web resource let's say i use an icon here i can pick from the icon suite pick notification and when this command is selected i can take an action and that action option is right here i can either run a formula using power fx by default it's true i can use the notify function we just say hello i'll click save and publish and play the app here in the command bar we can see notify if i select this i will get my message right here now let's add another command i'll call the seven day due date and this one i will run the following formula patch my data source which is devices where self dot selected dot item will give me the current context of the selected item that's the record that i want to patch and here we're gonna patch the due date to today's day plus seven days and the visibility for this i'll go to show on condition and my condition would be if the due date is empty now in the command bar you also have the option to navigate to a custom page and not just that but also pass the context of a selected item now as part of the documentation you can open your custom page in full screen mode you can open it as a center dialog or you can open it as a site dialog and the key here is for us to navigate to a custom page based on a selected item or record in the grid and here we've been presented with the javascript code that we can leverage so for example if i want to open it in full page context this is the script that i need to call to open it inline full page with the record context here is the script and so and so forth so we'll take a very simple use case in which we will try and open our custom page in a side dialog i'm going to go ahead and copy this in visual studio code i have an empty file that i created i'm calling the script.js just going to paste this in here the page type is custom the name property is where you need the logical name of the page and to grab that in my solution my devices page has a unique name and this is the name that i need to grab so i'm going to type this exact name in there i can also give a title to the dialog i will call this devices i'm going to save my code here back to my solution i will go to new go to other right at the bottom and click on web resource can give this a name i've just called this my script code under type i will pick script and here i can go ahead and upload that file that's my script.js file once i'm done with this i'll click save if i click on the text editor now i can see my code that's right here i can even make the changes directly here and once i'm done with the changes i can click publish so this will go ahead and publish the customizations back to my command designer i will add a new command here i will call this open canvas page and in the action you have an option to either run the formula or run the javascript and that's exactly what we need to call so i'm going to select run javascript this will load up all the libraries we just added a web resource so i'll go to add library select my web resource click add and here i need to define the function name now if i head back to my script there is no function so i need to create a function in order to call that specific javascript function so here i will add a function and you can give it a name that you like i'm going to call this open canvas dialog so i'm just creating a function and in this function is where i have all this code so i'll go ahead and save this i'm going to copy this go back to my solution go to my web resource and click edit can go to choose file and re-upload or i can go to the text editor and just paste that in here so i have my function here called open canvas dialog i'll click ok and click on publish back to my command designer here i just need to enter the name of that function now my function is not expecting any parameters i can also pass parameters and that's where i can pass the context of the selected record could have just gone to add parameter and here i have multiple options to choose from one of them here is the first selected item id which will pass the identity of that record as a query string parameter that we can fetch inside the canvas app and show contextual data in this case i don't have any parameters i'll save publish and play in my main grid i have the open canvas app command if i select this the site panel now lights up and my canvas page opens up inside that site panel and because i made it responsive based on the real estate available it is automatically positioning the controls now that we have a better understanding of the different components let's look at the demo solution that i showcased earlier on device management here i have three canvas pages my first canvas page was showcasing all the devices inventory and in here when i was to click on the specific icon i was taking certain actions like patching my data source patching the history going ahead and calling a flow directly from a canvas app and that flow that's connected to my app goes ahead and posts an adaptive card with all the details to that specific user in microsoft teams when i select a specific record and click on open canvas record i straight away open the canvas app but here the app is contextually aware of the record that was selected in that grid and the way it does that is it passes the record id from that command bar but how does the canvas app now read this information so if you look at the record id it has the good right here inside curly brackets and that's the encoded format here in this app on the onstart property is where i read that parameter which is called record id i'm checking to see if the record id is blank if it is i'm setting my record item context to blank otherwise i'm querying my data source based on the good that i receive from that parameter and because that property has these curly brackets i have to go ahead and ensure that i'm removing them because i only need the exact good to query my data source and get the specific record context once i have that information for my gallery controls items property if that record is empty that means the query parameter does not include record id in that case i just go and query my entire data source and get all the information and if a record item context was passed then i just showed that specific record and if we look at the command bar designer open canvas record i'm running a javascript and here i'm passing a parameter which is the first selected item id my function here is called open record and here is that function open record i'm passing that variable which is the selected record id i'm loading all that information in the page input variable here that gets passed to the specific function for my second canvas page which was the device history timeline that opens up in the site panel once again i wanted contextual information i'm reading that perimeter right here i have a gallery here that loads up the timeline i have the command device assignment history here i'm calling a function called open dialog timeline once again passing the record id if we look at this specific function once again i have a variable i'm loading it right here inside the page input variable and this will load as the side panel so here are the options for the site panel all of this is available in the documentation and finally my third canvas page which was to send a message to the user once again has the logic for the record context i'm connecting to office 365 outlook because i want to send an email and here is my command called note to user this one also runs javascript the function is called open message this one opens as a center dialog so here is the javascript function for that and this command only shows up based on a condition and the condition is that the status of the device should be assigned so if you look at the visibility here if i go to open formula bar that's my formula right here self.selected.item dot device status if you enjoyed this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 9,462

Rating: 5 out of 5

Keywords: powerapps custom pages, power apps, powerapps, model-driven app, canvas apps, model driven apps, microsoft powerapps, model driven app tutorial, power platform, power apps ribbon, power apps commands, power apps commanding, custom pages, custom power apps pages, power apps custom pages, custom pages in powerapps, command button in powerapps, power apps command designer, powerapps command bar, canvas model driven apps, command designer, reza dorrani, Modern App Designer

Id: XMopL0r8k3k

Length: 33min 26sec (2006 seconds)

Published: Tue Aug 10 2021