How to Embed a Canvas App Inside a Model-Driven App Using a Custom Page

Today, someone from one of the WhatsApp groups I am a member of asked for help:

How do I embed a canvas app inside a custom page is it possible .if yes then how can I able to achieve it ..

In this blogpost, I will try to show how to embed a Canvas App inside a Model-Driven App using a Custom Page. I’ll build an Employee Self-Service Portal with advanced features like email notifications and PDF leave confirmations.

Scenario: Employee Self-Service Page with Advanced Features

Employees can:

• View their leave balance.
• Submit a leave request.
• Download a PDF confirmation of their request.
• Receive email notifications for approval status.

Step 1: Design the Data Model in the Model-Driven App

Before building the app, set up the necessary Dataverse tables (entities).

1️⃣ Create the Leave Requests Table

Go to Power Apps → Dataverse → Tables.

Click New Table, name it Leave Requests.

Add the following columns:

• Employee Email (Text, Required)
• Leave Type (Choice: Vacation, Sick, Unpaid, Other)
• Start Date (Date)
• End Date (Date)
• Reason (Multiline Text)
• Status (Choice: Pending, Approved, Rejected)
• Number of Days (Whole Number, Required)

2️⃣ Create the Leave Records Table

Click New Table, name it Leave Records.

Add columns:

• Employee Email (Text, Required)
• Balance (Whole Number, Required, Default: 20)

3️⃣ Create the Attendance Records Table

Click New Table, name it Attendance Records.

Add columns:

• Employee Email (Text, Required)
• Date (Date)
• Check-in Time (Time)
• Check-out Time (Time)
• Status (Choice: Present, Absent, Late)

4️⃣ Create the Employee Profile Table

Click New Table, name it Employee Profile.

Add columns:

• Employee Email (Primary, Required)
• Full Name (Text)
• Phone Number (Phone)
• Department (Choice)
• Manager Email (Text)

Save and publish the tables before proceeding to the next steps.

Step 2: Create a New Custom Page in the Model-Driven App

Next we will create a Custom Page in the Model-Driven App. A Custom Page is a special kind of Canvas App that can be embedded inside a Model-Driven App.

1️⃣ Open Power Apps Studio

Go to Power Apps.
Select Dataverse environment.
Click on Apps.
Edit Model-Driven App.
    

2️⃣ Add a Custom Page

Click Add Page → Select Custom Page.
Choose Blank Page and name it Employee Self-Service Page.
Click Create.
    

Step 3: Design the Custom Page (Canvas App)

Now, let’s build the Employee Self-Service Page inside the Custom Page editor.

1️⃣ Add a Welcome Banner

Insert a Label at the top and set the text to:
"Welcome, " & User().FullName & "!"
I am formatting it with a 24px font size and blue color, you can choose your own verbiage and asthetics.
    

2️⃣ Add a Leave Balance Display

Insert a Text Label for the header:
"Your Leave Balance:"
Insert another Text Label to show balance:
LookUp(LeaveRecords, EmployeeEmail = User().Email).Balance & " days"
    

3️⃣ Add a Leave Request Form

Insert an Edit Form [Go to Insert → Forms → Edit Form] and set the Data Source to Leave Requests (Dataverse Table).

4️⃣ Add a Submit Button

Insert a Button labeled "Submit Leave Request".
Set the OnSelect property to:

Patch(
    LeaveRequests, 
    Defaults(LeaveRequests), 
    {
        EmployeeEmail: User().Email,
        LeaveType: Dropdown1.Selected.Value,
        StartDate: DatePicker1.SelectedDate,
        EndDate: DatePicker2.SelectedDate,
        Reason: TextInput1.Text,
        Status: "Pending",
        'Number of Days': DateDiff(DatePicker1.SelectedDate, DatePicker2.SelectedDate) + 1
    }
);
Notify("Leave Request Submitted", NotificationType.Success);


    

5️⃣ Automate Leave Balance Updates in Dataverse

1. Go to Power Automate.
2. Click Create → Automated Cloud Flow.
3. Select When a row is modified (Dataverse) as the trigger.
4. Set Table Name to Leave Requests, Change Type to Modified.
5. Add a condition: Status eq 'Approved'.
6. Use Get a Row by ID to retrieve the employee's leave balance.
7. Use Compose to calculate:

int(outputs('Get_a_Row_by_ID')?['Balance']) - 
int(outputs('TriggerBody')?['Number_of_Days'])

8. Update the LeaveRecords table with the new balance.
9. Click Save & Test.

Step 4: Automate Email Notifications and PDF Generation with Power Automate

Let’s set up a Power Automate Flow to handle email notifications and PDF confirmations.

1️⃣ Create a Power Automate Flow

Go to Power Automate: https://flow.microsoft.com.

Click on Create → Automated Cloud Flow.

Set the trigger as When a row is added, modified, or deleted (Dataverse).

2️⃣ Configure the Flow

• Trigger Condition: Set to trigger when Status is updated.
• Send Email Notification:
  • Add a Send an email (V2) action.
  • Set To as EmployeeEmail from the Dataverse record.
  • Set the Subject as "Leave Request Status Update".
  • Set the Body as:

Dear [Employee Name],

Your leave request from [Start Date] to [End Date] has been updated to [Status].

Regards,
HR Team
    

3️⃣ Generate PDF Confirmation

• Add an action Populate a Microsoft Word Template (or use OneDrive/SharePoint to create a file).
• Set placeholders for Employee Name, Leave Dates, and Status.
• Convert the Word document to PDF using the Convert Word Document to PDF action.
• Save the PDF in OneDrive or SharePoint.

4️⃣ Attach PDF in Email

• Add an action Send an email (V2).
• Attach the PDF file from the previous step.
• Send it to the employee’s email with the subject "Leave Request Confirmation".

5️⃣ Integrate Flow with Canvas App

Next Steps:

Add the Custom Page to the Model-Driven App Navigation

Ensure proper licensing and security role for permissions

Share the Model-Driven App

Refinements

Responsive Layout of the Custom Page

Redundant Tables: Some tables could be merged into one for simplicity.

Data Validation: Add checks for date conflicts and required fields