ModelDrivenFormIntegration in PowerApps: A Deep Dive for Custom Page Integration

When working with PowerApps Model-Driven Apps, you might need to add a Custom Page to a form.

Recently, someone in a WhatsApp group I’m a part of asked for help:

How can I implement the following in a PowerApps model-driven app? I have a case form and want to add a custom page that, upon loading, retrieves all task records associated with a specific case entity. These tasks should be displayed in a grid, and when I select a task from the grid, I need to edit that task record. Could you provide some insight?

To fetch tasks on page load, I was using Power Fx in the OnVisible property of the custom page.

// Get the Case ID from the navigation context
Set(varCaseID, Param("recordId"));

// Fetch all task records related to this case
ClearCollect(
    colTasks,
    Filter(Tasks, RegardingId = varCaseID)
);
    

Filtering wasn’t working, so I tested with LookUp to check if the Case ID was being retrieved correctly.

Set(
    varSingleTask,
    LookUp(Tasks, 'Regarding (Case)'.IncidentId = varCaseID)
);
    

LookUp did not work either. This is where ModelDrivenFormIntegration comes into play. It acts as a bridge between custom pages and model-driven forms, allowing seamless data transfer and interaction.

What is ModelDrivenFormIntegration?

ModelDrivenFormIntegration is a special PowerApps control that provides contextual information about the form it is embedded in. It helps retrieve form data, interact with records, and update values dynamically within a custom page.

What Does ModelDrivenFormIntegration Do?

• Passes data from the model-driven form to a custom page
• Provides access to the currently selected record in the form
• Allows actions like saving, refreshing, or updating records

Key Properties

Property	Description
Item	The record currently being viewed/edited
DataSource	The table (Dataverse entity) the form is bound to
Mode	The current form mode (Edit, New, View)

How to use it in Power Fx

Get Current Record's ID (Primary Key)

ModelDrivenFormIntegration.Item.'IncidentId'

This retrieves the Case ID (IncidentId) from the form. It is useful when filtering related records like tasks or logs.

Get a Field Value from the Current Record

ModelDrivenFormIntegration.Item.Title

This gets the Title field of the current record. Replace Title with any other field name from your entity.

Filter Related Records in a Custom Page

Filter('Tasks', 'Case'.'IncidentId' = ModelDrivenFormIntegration.Item.'IncidentId')

This expression fetches all Case Logs that are linked to the current Case shown in the form.

Check If Form is in Edit or New Mode

If(ModelDrivenFormIntegration.Mode = FormMode.New, "New Record", "Existing Record")

This helps customize behavior based on whether a user is creating a new record or editing an existing one.

Advanced Use Cases

1. Conditional Formatting Based on Data

Use Power Fx to highlight fields based on conditions:

If(ModelDrivenFormIntegration.Item.Status = "Pending", RGBA(255,0,0,1), RGBA(0,255,0,1))

This changes the background color based on the record’s Status field.

2. Trigger a Flow When a Button is Clicked

If you want to run a Power Automate Flow, add a button and use:

PowerAutomateFlow.Run(ModelDrivenFormIntegration.Item.ID)

Replace PowerAutomateFlow with your actual Flow name.

When Should You Use ModelDrivenFormIntegration?

• Passing data to custom pages from a Model-Driven Form
• Filtering related records dynamically based on the selected form record
• Checking form mode for different user actions

Conclusion

Using ModelDrivenFormIntegration, you can deeply integrate Custom Pages with Model-Driven Apps, unlocking powerful capabilities. Whether it's reading form data, modifying fields, or triggering actions, this feature ensures your custom solutions work seamlessly within Dataverse environments.

💡 Next Steps: See my other blog where i have added a custom page to a Model-Driven App Table (entity) form! 🚀

Happy PowerApp-ing! 🎉

Enhancing Case Management in PowerApps

Enhancing Case Management in PowerApps: Fetch and Edit Task Records Using a Custom Page

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

How can I implement the following in a PowerApps model-driven app? I have a case form and want to add a custom page that, upon loading, retrieves all task records associated with a specific case entity. These tasks should be displayed in a grid, and when I select a task from the grid, I need to edit that task record. Could you provide some insight?

In this blog post, I’ll walk you through how to add a custom page in a model-driven app for the Case entity and retrieve related Task records dynamically using ModelDrivenFormIntegration. We’ll also display these tasks in a grid and allow users to edit task records upon selection.

Why Use a Custom Page?

Custom pages in PowerApps model-driven apps give flexibility in UI design while still integrating seamlessly with Dataverse. By leveraging ModelDrivenFormIntegration, we ensure the custom page dynamically pulls the related Task records for each Case entity record.

Step 1: Create a Custom Page in PowerApps

1. Open PowerApps Maker Portal.
2. Navigate to Apps and select your model-driven app.
3. Click Edit → Pages → Add page → Select Custom page.
4. Name the page (e.g., CaseTasksPage).
5. Click Save and Publish the app.

Step 2: Add a Gallery to Display Task Records

Once inside the custom page, we will use a Gallery control to list all Task records related to the selected Case.

If(
    !IsEmpty(ModelDrivenFormIntegration.Item), 
    Filter(Tasks, regardingobjectid = ModelDrivenFormIntegration.Item.'Case ID')
)

Here,

• ModelDrivenFormIntegration.Item represents the current Case record.
• We use Filter(Tasks, regardingobjectid = ModelDrivenFormIntegration.Item.'Case ID') to retrieve only the tasks linked to that Case.

Step 3: Open Task Record for Editing

To allow users to edit a task, we’ll add a Select action inside the Gallery:

If(
    !IsBlank(galTasks.Selected),
    ModelDrivenFormIntegration.OpenForm(
        EntityName."Tasks",
        galTasks.Selected.TaskID,
        FormMode.Edit
    )
)

Here,

• galTasks.Selected.TaskID retrieves the selected Task record ID.
• ModelDrivenFormIntegration.OpenForm() opens the selected Task in edit mode.

Step 4: Test and Publish the Custom Page

Final Thoughts

By using custom pages with ModelDrivenFormIntegration, you can seamlessly integrate Tasks into the Case form, making it easier to track, manage, and edit case-related tasks. This approach enhances the user experience by eliminating the need to navigate through multiple forms manually.

🔹 Enhancements consideration:

• Add more filtering (e.g., based on Task status).
• Include a button to create new Tasks for a case.
• Use Dataverse tables for additional customization.

Happy PowerApp-ing! 🎉

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