How To Make A Power Apps Custom Page (Full Tutorial)

A Power Apps custom page enables you to build a full page canvas app into a Power Apps model-driven app. Model-driven apps traditionally only have forms and views. Now with custom pages we can build full-screen pages, dialogs and side-panes with the canvas app editor. We can even bring together data from multiple Dataverse tables on the same screen. In this article I will show you how to make a Power Apps custom page in a model-driven app.

Table of Contents
• Introduction: The Asset Checkout App Home Screen
• Create A New Power Apps Model-Driven App
• Add A New Custom Page To The Model-Driven App
• Display Reservations In A Vertical Gallery
• Navigate To A Model-Driven Form In Edit Mode
• Navigate To A Blank Model-Driven Form In New Mode
• Navigate To A Model-Driven App View
• Complete the Model-Driven App Custom Page

Introduction: The Asset Checkout App Home Screen

The I.T. department uses the Asset Checkout App to manage loaning devices to users. The Home Page shows upcoming reservations, recent reviews of devices and gives the ability to filter by equipment type.

Create A New Power Apps Model-Driven App

Open Power Apps Studio and navigate to the Create page. Select the Asset Checkout model-driven app template.

Click the Create button.

The Asset Checkout app will open in the model-driven app editor.

Add A New Custom Page To The Model-Driven App

Press the Add page button in the model-driven app editor

Select Custom page.

Choose Create a new custom page called Home Screen then click the Add button. This will open a new custom page in the canvas app designer.

Setup Responsive Containers In The Custom Page

Power Apps model-driven apps use responsive-design to ensure they look good on all screen sizes. A custom page should also be responsive because it is a part of the model-driven app. Go to the Advanced Settings, navigate to the Display tab and toggle off Scale to fit.

Add a horizontal container to the custom page named con_Home_Main.

Give the horizontal container these properties. It will make the main container cover the the entire page and re-size itself as the page re-sizes.

Height: App.Height
Width: App.Width
Gap: 40
PaddingBottom: 40
PaddingLeft: 40
PaddingRight: 40
PaddingTop: 40

Set the LayoutAlignItems property to Stretch. This will make objects placed inside the main container extend to fill-it horizontally (left-to-right).

LayoutAlignItems.Stretch

Insert 3 vertical containers into the main container and name them as follows:

• con_Home_UpcomingReservations
• con_Home_RecentReviews
• con_Home_FilterByEquipment
  
  

Set the flexible width property of all vertical containers to true with a minimum width of 360 pixels. Each container will take up 1/3 of the screen.

FlexibleWidth: true
LayoutMinWidth: 360
FillPortions: 1

Then apply these properties to the vertical containers to give them a dark grey border.

BorderColor: DarkGray
BorderStyle: Solid
BorderThickness: 1

Display Reservations In A Vertical Gallery

The left-most vertical container displays upcoming device reservations. Go to the Data menu and add these 3 Dataverse tables to the custom page.

• Products
• Reservations
• Reviews
  
  

Insert a label at the top of the gallery with the words “Upcoming Reservations”. Then add a vertical gallery to the container.

Stretch the gallery by using this code in the AlignInContainer property so it expands to fill all remaining space inside the vertical container.

AlignInContainer.Stretch

Use this code to populate the gallery with Reservations from oldest-to-newest

Sort(Reservations, 'Reservation Start', Ascending)

Change the layout of the gallery to title, subtitle and body. This will create 3 new labels inside the gallery.

Write this code in the Text property of the title, subtitle & body labels of the gallery respectively.

ThisItem.Name

Text(ThisItem.'Reservation Start', ShortDate)

ThisItem.'Product Reservation'.Name

Insert an Image control to the left of the labels and use this code in the Image property to display the Product Image.

ThisItem.'Product Reservation'.'Product Image'

Navigate To A Model-Driven Form In Edit Mode

When a user selects the Edit button beside a reservation it opens up a model-driven form for that reservation. Insert a new button into the gallery with the word “Edit”.

Write this code in the X & Y properties of the button to ensure it maintains its position as the custom page expands or shrinks in size.

X: (App.Width-Self.Width)-40
Y: (App.Height-Self.Height)/2

Use this code in the OnSelect property of the button. When the user presses the edit button it will navigate away from the custom page to the reservation’s model-driven form.

Navigate(gal_Home_Reservations.Selected)

To test the Edit button, save and publish the canvas page. Then re-publish the model-driven app and press play on the Model-Driven App. When the Edit button is pressed that form that appears should look like this.

Navigate To A Blank Model-Driven Form In New Mode

User can also navigate to a blank form to create a new reservation from the custom page. Insert a horizontal container at the top of the gallery. Cut and paste the “Upcoming Reservations” label into the horizontal container and place a new button beside it with the text “+ Add”.

Give the horizontal container these properties. Apply padding to the right-side so the button will not be touching the edge of the container.

LayoutAlignItems (Vertical): Center
FlexibleHeight: false
Height: 60
PaddingRight: 40

Set the FlexibleWidth property of the horizontal container to true.

true

When a user clicks the Add button they are navigated to a blank model-driven form.

Use this code in the OnSelect property of the Add button.

Navigate(Defaults(Reservations))

To test the Add button, save and publish the canvas page. Then re-publish the model-driven app and press play on the Model-Driven App. When the Add button is pressed that form that appears should look like this.

Navigate To A Model-Driven App View

At the bottom of the Upcoming Reservations container the user can click on a button that says view all to see all of the active reservations. The app navigates away from the custom page and goes to the selected model-driven app view.

Add a horizontal container to the bottom of the Upcoming Reservations container. Place a button with the text “View All >>” inside it. Make the button fill transparent and format the text with an underline.

Give the horizontal container these properties. Apply padding to the right-side so the button will not be touching the edge of the container.

AlignInContainer (Vertical): Stretch
FlexibleHeight: false
Height: 60

When the user presses the “View All >>” button they navigate to the Active Reservations model-driven view.

Use this code in the OnSelect property of the button.

Navigate('Reservations (Views)'.'Active Reservations')

To test the View All button, save and publish the canvas page. Then re-publish the model-driven app and press play on the Model-Driven App. When the View All button is pressed the view that appears should look like this.

Complete the Model-Driven App Custom Page

The Recent Reviews and Filter By Equipment vertical containers are setup much in the same way as the Upcoming Reservations container.

Use this code in the Items properties of the Recent Review and Filter By Equipment containers respectively. Add all of the controls shown in the screenshot above.

Sort(
    Reviews,
    createdon,
    Ascending
)

Products

When a user clicks on an item in the filter by equipment gallery the upcoming reservations and recent reviews become filtered to only show data for the selected equipment.

Use this code in the OnSelect property of the gallery to track which equipment is currently selected.

If(
    gblSelectedEquipment.Product=ThisItem.Product,
    Set(
        gblSelectedEquipment,
        Blank()
    ),
    Set(
        gblSelectedEquipment,
        ThisItem
    )
)

Write this code in the TemplateFill property of the gallery to highlight the selected equipment in light blue.

If(gblSelectedEquipment.Product=ThisItem.Product, LightBlue)

Finally, use this code in the Items property of the Upcoming Reservations gallery and the the Recent Reviews gallery to filter the records.

Sort(
    Filter(
        Reservations,
        'Product Reservation'.Product = gblSelectedEquipment.Product
        Or IsBlank(gblSelectedEquipment)
    ),
    'Reservation Start',
    Ascending
)

Sort(
    Filter(
        Reviews,
        'Associated Product'.Product = gblSelectedEquipment.Product
        Or IsBlank(gblSelectedEquipment)
    ),
    createdon,
    Ascending
)

Questions?

If you have any questions or feedback about How To Make A Power Apps Custom Page (Full Tutorial) please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.