How to Create a Custom Page for Model-Driven Power Apps (TUTORIAL)

I’ve got a really cool thing to show you that  you can do in model driven apps in this video   we're going to cover custom pages this is where  the world of model driven apps and canvas apps   comes together it starts to make sense why it's  all called Power Apps I’m going to show you how   you can build this so this is a custom page  inside your model driven app now we know with   model driven apps we are building out a data  model we're working with forms and views and   things with a custom page we get all of the tools  of a canvas app available to us so you can create   a pixel perfect page you can have multiple tables  on the one page you can connect to external data   sources there is so many possibilities here you  can create a custom page as a full page which   is what I’m going to show you in this tutorial no  code required at all but custom pages can also be   used to behave as dialogues or side panels and  things in your app as well there's a little bit   of code involved in that check out the link to the  documentation below if you would like to know more   but I’m not going to cover that here all right  let's get into this and start creating our custom   pages my scenario here is that I’m working with  a model driven app where I’ve got my contacts in   there and I want to be able to see what they're  doing on social media I’m going to use Twitter   as an example nice public data source to show you  how you can use this to connect up to another data   source and a huge shout out and thank you to all  of my friends on the Twitter community who put   their hands up and said that they would love to be  part of this demo you will see your name here if   you're one of those people now the first most  important thing I’m going to tell you is when   you get started please make sure that you're  building inside a solution it matters for this   if you go ahead and create a custom page somewhere  else and not in a solution you're going to have   trouble finding it later you can always add it  to your solution after the fact if you do miss   this step you have a much easier path if you start  in your solution so here I am I’m going to go into   the menu here to choose new I’m going to go into  app and choose page and what we have on the screen   here is something that is going to look very much  like a canvas app if you're familiar with that if   canvas apps are completely new to you, you might  want to go check out my tutorial for complete   beginners there let me navigate you around the  screen here and explain a few things if this is   stuff you already know just jump ahead to the next  chapter so what we've got in the middle is a blank   canvas we can bring whatever we like in here and  design this down to the last pixel down the side   here we've got our navigation menu so I’m in the  tree view and as we build out the app you're going   to see all of the components being added in there  plus are all of the different pieces that I can   add in here just be aware this is not exactly  the same as everything you can do in a canvas   app this is a different object a custom page and  there are some limitations in there check out the   link in the description for the known limitations  if you want to know more about that but there is   plenty that you can do here we've got our data  menu so this is where we're going to connect   up to the different data sources and some other  things in here to connect up to media and other   resources which we're not going to use too much of  today so let's start in the tree view here on the   screen and I’m going to start adding components  and the important thing here when we're working   with creating a custom page in a model driven app  is that we want to build a responsive page because   your model driven app without you even having to  do anything or know about it is fully responsive   if you scroll to different screen sizes you  will find that the components are responding to   that so if you're creating a page for your model  driven app you really want to go with that as well   so I’m going to go in here to insert something I’m  going to scroll down here to the section called   layout and you'll see these two things here  horizontal container and vertical container   now these are the pieces that are enabling us to  build a responsive app I’m just going to take a   minute and explain this because it does my head  in a little bit with the names horizontal and   vertical with those images because see how it  looks a little bit like the wrong way around   so the concept here is that a vertical container  means that the pieces that you're going to put   in it are stacked vertically so I might have a  header and then a search bar and then a gallery or   something like that so you can see that's why the  icon looks like it's going like that because we're   stacking them vertically a horizontal container is  something that I’m going to use if I want things   to sit side by side in a horizontal pattern so I  might be creating my header and want like a label   and an icon and a picture and the person's name or  whatever across or a series of galleries side by   side that's a horizontal container so on my page  here I’m actually going to start with a vertical   container because I want that scenario sort of  like a header and then search and galleries and   so on so we're going to put that into the app  now you'll notice as soon as that jumps onto   the screen here we have got the object that I’m  working with the component that I’m working with   and then all of the properties that relate to that  component down the side I’ve got a properties drop   down menu here so I can choose that and the  formula bar will relate to those properties   I like to go back to my tree view menu especially  if this is new for you just so you can start to   see the structure that is going to be built out  here for each of the components that I add just to   stop it being confusing I’m going to give it a new  name so we're going to call this the main screen   which is just the sort of overarching container  now what we want to do here is to make this take   up the whole screen and when we're working with  responsive components we don't we don't sort of   drag and drop them this one actually allows you  to but many of them won't allow you to do that   because we want to set the size based on  things that are relative to other parts of the   application so we want this to be relative to the  full size of the screen rather than dragging it   to be particular dimensions because then whatever  size screen we're on we're good so first of all we   have the x and y properties which determines the  actual sort of starting point for the component so   I’m going to go into here my drop down list of  properties and choose the x property and we're   going to set that to zero and watch what happens  it's right at the zero location on the x-axis and   the same for y we're going to go in and give that  a zero as well so now we've got it in that top   corner zero and then we want the total width and  height to match the width and height of whatever   is going on with the screen so again for this  component I’m going to go in here and I’m going to   find the width property and we're going to put a  formula in rather than an absolute value that's   an absolute value of 638. we're going to make  this the same width as the parent which is the   whole screen here so we type in parent and you'll  see it's helpfully suggesting that for me already   the width of the parent and same here we're going  to go to the height and you reckon you can guess   what this one will be parent dot height all right  so there we have our first vertical container   taking up the whole screen now it looks like we  haven't done much so far but that's the thing   that's going to enable everything within it to  be responsive we're actually going to build out   a hierarchy of responsive components in here I’ll  take you through it and we're going to make sure   that we see that hierarchy on the tree view as  we go next up I’m going to add a header to my   page so that I’ve got a nice heading at the top  and I’m going to use a container for that as well   so that it is also responsive if I make something  centered that it will move along with the app so   the easiest way to do this is as you build out the  hierarchy you want to make sure you're adding the   components in the right spot here so I’m going to  click on the component that I want to add it under   and then I’m going to go into the plus menu and  now I’m going to add my horizontal container now   that immediately takes up the whole space again  I don't I can't drag and drop the thing because   it's responsive remember everything needs to  be relative so the first thing I’m going to do   here is go into this flexible height property  because I don't want it to have flexible height   you see there it's already changed back I want to  determine the height myself so I can now go in and   change this to be let's see 100 that might be a  bit much for header let's let's bring it down to   50. there we go all right so what we can do now  is give this a nice background color so we'll   make it a nice sort of blue there we go now I  can add other components into that horizontal   piece so what I want now is to add a label which  is where I can put the heading so again let's   just go back here I’m inside container two so I  choose that first now I click my plus button and   I add a label and that's added that in there  now I can set the height of my label relative   to that so I’ve got a height here of 32 or I  can say actually I want that to be set by the   container so that it is there I want to choose  flexible width in this case to be on because I   want this to take the width of the container  and be flexible with it and now I can put in   what I want my text to be so we're going to call  this one I will call this one a Twitter dashboard   I am going to give that a nice white color so  that we can see it I’m going to make it bold   and then I’m going to choose my font size now  just be careful with the font size here because   the way the custom pages work is that the font  size renders much bigger than what you might be   used to here are the details so you'll see for  instance that if you want something to end up   looking like a 17 point font you want to be using  12.75 so the first time I did this my font was out   of control I’m going to live dangerously here and  make this a 14 point font and then I’m going to   put it in the middle all right this will actually  look bigger on the screen when it renders now   what I’ve got horizontal container label inside  the horizontal container centered all good next   thing I want to do is to add another piece in my  overall back to the sort of hierarchy here of my   vertical container I want to add something  that's going to have a search bar and some   other information and then below that I’m going  to add a couple of galleries so let's keep with   the naming conventions here because it is going to  make it a whole lot easier for me so we're going   to rename this to be header container and this  one is my header label all right now I want to add   another piece inside that main screen container so  we're going to go in here and I will add another   horizontal container again I want this one to not  be flexible height I want that to have a height   of 50 as well and just to get the rest of the  structure of my screen while I’m going on in here   I’m going to go back into the main screen and I’m  also going to add another horizontal container   like that to put a couple of galleries side by  side now that is taken up see what's happened   there it's automatically taken up the rest of the  screen because I’m doing that stacking inside the   container that's all good to go I’m just going to  leave that one to behave as it is so let's add the   galleries in here first and then I’m going to  go back and work with this other container in   the middle so we're going to rename this one to be  gallery container and galleries are what we use to   display data from other data sources so I’m going  to show you here that we're going to connect it to   a table inside Dataverse as well as that external  table for Twitter so with my gallery container   highlighted I’m going to go in and add a vertical  gallery I’m going to choose my data source so   it first wants to connect to Dataverse awesome  that's where we're headed here and search for my   contact table because what I want down the side is  that list of contacts so that will automatically   connect to that table there we go now I want to  choose a particular view here I’ve already set   up a view in my model driven app that is social  media contacts that just finds the people and you   might start to see some familiar names here now  who have a Twitter handle associated with them   so that's a view that I’ve already got in the app  that I can access here all right so far so good I   want another gallery side by side so we're going  to go back here again into the gallery container   and add another vertical gallery and you'll see  what happens there because I’m in a horizontal   container that we've got the two calories side  by side this time what I want to do is to make   a connection to Twitter now I’m using Twitter in  this case but you can connect to any data source   here if you've got other business systems that  you use if you want to bring in productivity   things you could bring in connections to teams or  planner to do so many options you can explore here   but this is the one I like to have a bit of fun  with as a real life example so I’ve connected to   Twitter there I’ve got a bunch of errors here  because this isn't actually anything useful   because I need to specify what's going on so  each connector has its own set of formulas   you'll find as you create formulas that if you use  a dot it will give you a suggestion of what comes   next this is an expression language called Power  Fx there's a heap of stuff to learn in here but   I’ll take you through this one as a little bit of  a little bit of a tutorial each connector has its   own things and you do get to know the one that  you're using with so this is actually going to   be the user timeline is the thing that I’m looking  for here and you'll see it gives you a little bit   of a hint as to what's needed here so this is  telling me it needs to be the username so the   username is coming from this gallery here because  the idea is I’m going to select something and then   see that person's timeline let's go back over here  I’m just going to do something here so that we're   consistent we're going to call this contact  gallery and I’m also going to rename this one   to be Twitter gallery so in my formula here this  is the user timeline and what I’m going to be   looking for is in the contact gallery I can put  in a dot I’m looking for whatever I’ve selected   and of that one that I’ve selected I’m looking  for the field or column called Twitter handle   because you can see that's in there so I’m  grabbing from my contacts which everyone has   selected the Twitter handle now the next thing  I need is a comma here in the suggested things   and now it's telling me the next piece I need  in my formula is this little syntax here max   results column number how many results do I  want in there so we'll use the curly brackets   max results and the default is 20 that seems good  to me we'll put that in close the curly brackets   and then don't forget to close the brackets on  your formula all right now a couple of other   things it seems to be doing something now but I’ve  still got some error messages I just need to tidy   this up a bit so I’m going to go in and say I just  want a layout of one line because I don't want all   of those other things in there that's got rid of  all the errors now because it's starting to align   that's not terribly useful though right let's see  what the fields are here created at yeah we don't   want that so we can go down and I actually want  the tweet text so there we go we're starting to   see a Twitter feed here that's not really enough  space so what I want to do here is click level   out so now I’ve selected the whole gallery and  what I want to do here is set a property which   is the template size so that's the size of what's  going on inside it and set that to 70. there we   go a bit more spaced out I also want this to take  up the full see how this is not taking up the full   height of that container so we're going to go in  here and say the height stretch to the whole thing   and then I’m going to click back inside the  gallery with this little edit button and now   again click in to that piece of text and this one  I can actually drag and sort of take up a little   bit more space inside each piece of the container  all right looking good so far now I want the data   to be a little bit more balanced here because the  one on the left is really quite small and the one   on the right is not much at all um before I do  that let's just save this because it's always a   good idea probably should have done that earlier  so we're going to call this Twitter dashboard whatever name you give it here is what will come  up when you put it into your model driven app so   it's good to do something sensible there and  I can preview the app by clicking preview or I   could hold down the alt key just to preview it  in here so we've got users down the side here   and tweets down the side if I click on each user  in turn I’m going to see their tweets popping up   in the in the in the right hand side there if  I minimize this and drag it around a little bit you'll see that it's responsive see how my heading  is moving across and the other things are moving   across in there looking good so far let's close  that preview maximize the screen again there   and let's keep going I’m going to just zoom this  down again that's sort of taken up more space   than I want now to get these a little bit more  evenly spaced what I’m going to do is click on   one of those containers and we can see here  that we can have the fill portion so flexible   width needs to be on because flexible width is  going to sort of move around as things happen   but this is saying that it's one portion of one  and this one is also saying that it's taking up   one we're actually going to turn this on so now  it knows there's two portions in there because   we've set them both at flexible widths so the  container understands that it's got two things   to work with but I’m going to say for this one  on the right I want that actually to take up two   spots and you'll see that it now understands that  there's three so I’ve created more width there if   I wanted to go even further I could say three and  it would take up three out of four I think I like   two out of three a little bit better so we're  going to go with that so again I’m not dragging   and dropping those sizes it's relative within the  container now the other thing I want to do in here   is to bring in some navigation so that I mean I  can click on the person but I quite like to have   the little arrow in there to make it a bit clearer  and I can also from my custom page navigate back   to the rest of the model driven app so you can  have things like plus buttons in here to navigate   back to a form to create or we can put something  in here that would allow you to click through   not just to view their tweets on this dashboard  but to actually click through and look at their   profile the contact page so we're going to go  inside this and edit this and then I’m going to   back in my plus menu here this time I’m going to  add an icon now you'll see what happens there when   I add it inside a gallery if I’ve got it right  it's added into all of the pieces of the gallery   so let's just move this across a little bit here  and once you've got your icon in here we can go   in here and choose which icon we want rather than  scrolling through them all I can just search so   I’m going to choose a little person icon in there  and then when I select that icon what do I want it   to do so we're going to get rid of that formula  and we're going to add in a formula here to tell   it when you click that I want it to navigate  back to that main contact record in the system   so we use the navigate command and we're going to  put in that this is the contact gallery selected   and close the bracket so that's the way that that  formula works is that means it will navigate back   to that selected contact in the app you can do  more sophisticated things with the formulas but   that will do for now go back here let's go  in and add another icon and this time I’m   going to add the right hand arrow so let's  grab that one from there we will move that   across I want this one to be the one that I can  select to display the tweets if the person doesn't   understand they need to click on the name that  one is just selecting the parent record that's   exactly as I want it to behave so I don't need to  make any other changes there all right I’ve got a   header I’ve got a gallery what am I going to  do with this last piece in the middle here   what I want is to have a search box because I’ve  got all of these records on the screen here and I   want to be able to search across my contacts and  what I also want to do is display a little bit   more information from the person's Twitter profile  so this is a horizontal container remember and I’m   going to bring a couple of different components in  here so with this container selected I’m going to   go over here and bring in a text input control  this is something that allows the user to type   something in which is what we want for a search  experience let's set that to be the same height as   the container the value of this is text box which  is just a default value that's not much use we're   going to put that in there there's an option here  for a tool tip so we can say search for contacts   put that in there so that just sort of gives a  hint in there let's make this one a fill color   of sort of a light gray so that it's somewhere  you can see that you might want to type in and   that's all good now I’m going to go back to my  screen look at how many things are in here now   we're going to call this one let's give this one  a name so again we know what we're doing we'll   call this one search container and text box  2 here we're going to rename to be search box all right now the way that the search box works  is that we need to put the formula on the gallery   not actually on the box so if we want to search  by what's in there we're going to add that in   so we've already got it filtered so that it's  filtering on those contacts and I’m going to   build up a little bit more of a complex formula  here just so that it works if there's nothing   in there because otherwise if I just put a search  around this and there's nothing in the search box   then the gallery ends up being blank so we've  got a formula here which is an if formula if   you're familiar with excel some of these things  will start to feel a little bit familiar to you   let's just sort of space that one out a  bit so that I can see what I’m working with   so we're going to open a bracket here and so  what's the logical test we've got a logical test   here called is blank is this if if something is  blank what's the thing we're looking for is blank   if that text box is blank so we called that  one search box so if the search box and again   we need the dot in there to say what about the  search box the value of the search box so if   the value of the search box is blank that's our  first test then the true value is going to be   if it's blank just show us that list as we already  have it so we're going to leave that as is and   if it's not blank then what we're going to do is  take the search based on this thing again so we're   going to search on that filtered list because I  just want to use that filtered list every time   don't worry if this is starting to get too much if  you're a beginner because this does take a while   to figure these things out if you're new to it and  what we're doing here is finding the search box value so this is a search formula I’ve got a couple of  formulas nested in here you can grab let's just   click away from that and kind of make it bigger  and go back in there so we've got if it's blank   then if it's true just show me the filtered value  if it's false then do a search on that filtered   view for whatever the value of the search  box is and we're looking for the full name of   the contact so you can search on various  things in here but we're just going to   search on the full name I’m going to close  brackets twice and then all my error messages   are gone we're all happy all right now let's add  some other pieces in here so clicking again on   that horizontal container I want to bring in the  image of the person that they use on Twitter and   their description so let's bring those pieces  in I’m going to use a label for the description   again let's make that the same height as the  container and also an image now you'll see what   happened there I wasn't selected inside the right  hierarchy let's use an undo and try that again   always click back on the place where you want it  to be so I’ve got that container and now I’m going   to choose image and now let's put it inside the  container that's much better just watch for that   always go back to your hierarchy if you're not  sure why things are behaving in the wrong place   and if it's in the wrong spot then you can redo  that the way I’ve just done now this image here   you'll see is too big right it's got a height of  100 so I actually want to set this to be a height   of 50 and I also want to make the width 50 as  well now instead of having flexible width here   because I could do the same thing that we did with  those galleries and set the you know the portions   of how long they're going to take I actually want  these things to align with the pieces below them   so what we're going to do like we did in that  very first step where we brought the container   in and set it relative to the size of the page  I’m going to do the same thing here so for this   one I’m going to go in and make the width of this  the same as the contact gallery so instead of an   absolute value I’ve set that to be contact gallery  width I’m going to do the same here with the label   so I can go in and instead of that we're going  to make this one the same as the Twitter gallery   dot width okay that's good what happened to the  image that's no good I’ve got a 50 pixel image   there that I’m setting at a straight value so we  need to allow for that so I’m going to subtract 50   there it is back again so this is looking good  so now we've got our um search box relative to   the size of the gallery underneath it we've got  our label and our image let's bring the pieces   in there so that's the width of it I’m going to  choose another property here which is the text   so label let's get rid of that what I want this  to be is I’m going to go to that Twitter connector   and now this is where I know that we know how this  connector works there's a piece in there called   user who is the user so for the Twitter  user who is it it's from that contact   gallery selected this is the same thing I did  in the previous in the previous thing to choose   the gallery search contact gallery dot selected  Twitter handle so that is the name of that close   the bracket on that and then now what is the  property of the user so the Twitter connector   returns all of these things about the user I can  find the description full name location all sorts   of things there about their followers and so on  I want the description so we're going to choose   that and that should come up there you go good  on you nick dolman for being my first volunteer   is coming up there let's give that a little bit  of a color just so that we can see what's going   on there so let's match that blue at the top and  then the image here I want to go in and set a   formula for that as well so that's going to be my  Twitter again my user same formula see it starts   to get a bit repetitive and you start to get the  hang of it and this time I want the profile image and there's nick's smiling face all right I think  we're good let's save this thing now you need   to publish there's two stages of publishing  here so you'll remember when we started here   that we built we started our solution and we built  a page so we're publishing the page which is done   now what I need to do is go back and add it into  my model driven app so within the solution here's   my model driven app and what you need to do  here is go into edit and make sure you choose   this editing preview so that we're going into  the modern editing experience because this is   where you'll find this you've got your navigation  menu here and you're going to click on this add   page button select custom next here's an existing  custom page and there it is there you'll see I’ve   had a couple of practice quiz before I recorded  the video here now don't freak out when you see   this message here this is telling you that you  need to publish your model driven app as well   as having published the custom page stick around  I’ll show you in a minute how you go back and edit   the custom page but each time you edit if you are  editing you will need to publish it again in the   model driven app because the model driven app even  once you've added it isn't aware of changes to the   page so just you've got those two steps involved  in publishing let's say okay thanks for that   save what we've done in adding that to the menu  and then click publish you get another warning   here that's telling you that the preview needs to  be refreshed it can take 30 seconds or so for this   process to finish so just sit tight it's going  to be good in a minute now when you're doing it   for the first time it's also going to prompt if  I’m using a connector so it's prompting me that   I want to make sure that I’m authenticating that  connector and there's my app starting to come to   life now we're not seeing the full screen view  here but we're all good let's go ahead and click   play before I do that just some other options  here so we've got the content type you could   change the title of it here it's defaulted to what  I had before you can also give it a different icon   which is using a web resource so I’m going to  choose just from something that I’ve got in there   to make it a little bit nicer that standard  icon that comes up is a little bit ugly   and so we will save that again probably should  have thought of this before I published that again   and then we can hit play and we're good to see  the thing in action so I’m in my model of an app   there's my new Twitter dashboard I can click  on that all right let's have a little bit of a   mess around firstly with the responsiveness see  how I’m scrolling down and it's still fitting   everything in on the screen I can scroll down  my gallery here there we go all those wonderful   people who volunteered to uh to do something  here I can click and start to browse all of these   different tweets and things that we've got  here I can also use the search box here so   if I wanted to go in and search for someone  it can actually go in there and then I could   click on that and view the tweets there as well  we clear that and it will go back to the start   now we can also remember I’ve set this up so  that we can click on someone here and return   to the record in the system so that's now opening  that page in the model driven app so everything   I’m doing there I’m building this custom page that  has full interaction and awareness of what's going   on in the model driven app what if I need to edit  it I hear you say I’m going to go back into here   navigate back and if you want to edit it you'll  find it inside the solution so just be aware you   won't find this inside the apps if you go into  your apps menu it's not like a canvas app in   fact it's not a canvas app it's a custom page  if you click on this takes you back into your   app I could make any other changes I want here  let's say I decided that I didn't want that to   be that color anymore and I wanted it to be  a you know a pale blue instead to look better   so I can make that change and let's say I also  wanted to make this font size a little bit bigger   in the end that's all good once I’m happy  with all of that I can publish it again you'll see it automatically saved as well  and then don't forget we're going to go back   and hit publish again inside the model driven  app for that to take effect I would love to hear   from you what else would you like to see with  custom pages what are the ways that you think   you could be using this because I think there  are many and I’m happy to create more content   if you would like to see it in the meantime  don't forget to check out my other tutorials   on all the wonderful things you can do with  model driven apps thanks very much for watching

Channel: Lisa Crosbie

Views: 45,539

Keywords: power apps, model driven apps, powerapps, custom pages powerapps, powerapps model driven apps, powerapps custom pages, powerapps tutorial, powerapps custom page, model driven powerapps examples, model driven apps tutorial, model driven powerapps, model driven powerapps tutorial, learnwithlisa, power apps responsive layout, power apps responsive gallery, powerapps responsive container, power apps responsive design, power apps responsive containers

Id: 6QFCXX36220

Length: 30min 34sec (1834 seconds)

Published: Tue Mar 29 2022