Controls

Power Apps Code Apps in Practice: Recreating Model-Driven App Patterns

Axel — Wed, 11 Mar 2026 14:56:40 +0000

Power Apps Code Apps in Practice: Recreating Model-Driven App Patterns Axel Wed, 03/11/2026 - 15:56

Body

Power Apps Code Apps went from preview to general availability in record time. With that, Microsoft has sent a clear signal that it is taking this technology very seriously.

In fact, Code Apps are something of a small revolution. They allow pro-code developers to deliver custom web apps directly within a Dataverse environment without the need to implement authentication libraries.

But that is not all: Low-code developers can benefit from them as well. With tools like GitHub Copilot and Claude Code, you no longer necessarily need to understand a programming language such as React in order to build full-blown web application. Instead, you can simply describe the features you want in a prompt and have them implemented.

This will fundamentally change the way how apps will be implemented in the future. React Fluent UI components can be integrated into Code Apps and open up entirely new possibilities for designing user interfaces such as accordions, cards or TreeViews.

Motivation

There is, however, one important point to consider: At the time of writing, Power Apps Code Apps are stand-alone apps. That means they are not integrated into a model-driven app, but exist as independent applications, similar to canvas apps. There is also no custom page in a model-driven app to represent a code app.

But what if you still need the typical built-in functionality of a model-driven app upfront, such as filtering records in a data grid? One option would be to add a button to the model-driven app or try to integrate the app through an iframe.

This article explores another approach: recreating typical model-driven app functionality directly inside the custom app. The goal is to assess how much effort this requires and how quickly something like this can be implemented, not to reinvent the wheel, but to demonstrate the capabilities and the power of Code Apps. And of course also to show that, for many use cases, you no longer need a model-driven app as the entry point.

PoC: Table Browser App

The goal was to build an new code app "Table Browser" from scratch which demonstrates that a standalone Power Apps Code App can reproduce familiar Model-Driven-App-style functionality, such as filtered and searchable record lists with the same look and feel like Model-Driven-Apps. This can serve as an entry point and opens the door to building a fully fledged standalone app with a much richer user experience, including features such as tree views and other advanced interface patterns that are difficult to realize in a traditional Model-Driven App.

It is also a proof of concept: each feature was chosen to answer a specific question about what Code Apps can do. A secondary goal was to evaluate these two tools in a real-world scenario and gain hands-on experience with AI-assisted development.

The entire app was built in a single Saturday — using both GitHub Copilot and Claude Code as AI coding assistants. Fun fact: Claude Code estimated the development effort for the entire app at 12 to 15 days if implemented by a senior developer without the help of AI.

Proof Points

Performance: Can a Code App render large Dataverse record sets noticeably faster than a Model-Driven grid? Yes.
Infinite scroll: How much code does it take to implement demand-driven pagination? Very little — a scroll event plus a getAll call with top and skip.
Metadata access: How easy is it to read column metadata at runtime? One SDK call to retrieveMultipleRecordsAsync on EntityDefinition gives you full attribute detail.
View definitions: Can a Code App read the default system view and use it to determine which columns to show? Yes — savedquery records expose the column layout as XML, which the app parses to build its default column set.
Form definitions: Can a Code App reconstruct the default form layout — tabs, sections, fields — without hardcoding it? Yes — systemform records contain the full form structure as JSON and XML, which the app uses to render the record detail dialog.
Column persistence: Can user preferences be stored in Dataverse instead of localStorage — cross-device, without a custom table? Yes, via personal views (userquery).

Key capabilities

Browse records from multiple Dataverse tables with infinite scroll and client-side search
Inspect column metadata and field properties (schema view)
Customize visible columns per table — persisted as personal views (userquery records) in Dataverse
View full record details in a form-based dialog with tabs and sections
Switch between list (DataGrid) and card grid layouts
Light/dark mode, display density, and accent color theming (persisted to localStorage)

UI Features

The goal was to implement the same look and feel that we know from Model-Driven-App. This can easily be achieved by using the React Fluent UI components library. The following chapters show which features have been implemented.

List View

The app uses the metadata to look for the default view of the table and shows all columns defined there.
Columns width can be changed by drag and drop.
Columns can be sorted. If sorted, an api call is used for server side sorting
Smooth paging: Scrolling to the end of the list reloads the next page of data (e.g. the next 50 records)

Search and highlighting

Search was implemented with a single field which searches in all text fields
- This was easier to implement
- A filter below every column, as in model driven apps could be another option for the future.
Highlighting the matched text was very easy to implement, so this functionality was added as well, even though it does not exist in model-driven apps

Column selection and reordering

A modal dialog window can be used to select the columns to display
A drag and drop component can be used to reorder the columns. The @dnd-kit/sortable library was used to implement this feature
The adjusted view is updated in the Dataverse personal view

Card View

A Card View as an alternative to a List View was implemented
This was quite easy because a card already exists as a UI component in the React UI Components
This view is especially useful for data with images

Detail View Edit Dialog

A detailed review was implemented to show and edit the current record
The code dynamically parses the system form record to create the layout dynamically from the defaults form definition (including tabs)
Field types text, text area, option set, lookup, yes/no, date/time are supported and fully working
Of course, the form doesn't support PCF or sub grids.
An alternative approach approach for the future, could be to redirect to a detail view, like a Model-Driven-App does

Table Column Definitions

A column meta data list was implemented
It automatically shows all columns of the table with display name, data type, required, and description
It proves that metadata can easily be fetched by the @microsoft/power-apps/data lib (for code apps)
The column metadata can also be filtered
The screenshot shows the list in dark mode. Of course, dark mode is available for the whole application.

Settings dialog

A small settings dialog was implemented for the settings of dark mode, display density, and accent color
This was very easy to implement since dark mode, accent color and density are just properties in the React Fluent UI library
The settings are stored in the local storage of the browser for simplicity

Lessons learned with GitHub Copilot and Claude Code

The project was developed almost entirely in "interactive agent-driven mode".
Both GitHub Copilot and Claude Code were used as active development assistants during the entire process.

The agents were involved in:

Concept discussions
Implementation
Refactoring
Architectural decisions
Documentation improvements
Iterative improvements to the collaboration workflow

In addition to generating code, the agents were also used to discuss best practices and improve the documentation and structure of the project itself. Both agents used the same model (Claude Sonnet 4.6), but produced different results due to their overall architectural differences.

Claude Code

Overall, Claude Code produced more consistent and reliable results.

Strengths included:

Better architectural reasoning
More structured implementations
Clearer explanations
Higher-quality refactorings

Claude Code was particularly strong when working across multiple files or when performing larger structural changes in the project. In the beginning it introduced reusable UI components even before having instructions to do so.
When working with Claude Code, development sessions occasionally reached usage limits. This required temporarily switching back to GitHub Copilot until the session limit reset. As a result, the project naturally evolved into a mixed workflow where both tools contributed to the final implementation.

GitHub Copilot

GitHub Copilot performed well for smaller tasks but showed some weaknesses when acting as a full development agent.

Some common issues included:
- Guessing instead of reasoning
- Repeating the same incorrect approach multiple times
- Getting stuck in loops when a problem was not clearly defined

However, some of these issues were likely influenced by better instructions given to the agent (e.g. links to the official documentation, instructions to always look there first)

At the beginning of the project, important rules were not yet defined, for example:
- Asking for confirmation before large refactorings
- Explaining architectural changes before applying them
- Avoiding speculative changes

Once clearer rules were established, the results improved.

Architecture

The architecture naturally follows the architecture of Power Apps Code Apps. Services for accessing data and model classes were generated using the pac tool.

The following architecture diagram was generated with Claude Code. This no longer has to be done manually by hand either...

Conclusion

It is extremely impressive how quickly and easily a Power Apps Code App can be developed with GitHub Copilot or Claude Code. What makes development so fast and straightforward is the combination of coding agents with an intelligent framework for app development.

Throughout the entire development process, there was never any sense of working with an unstable product or with something that had only recently reached general availability. There were no crashes at all, and deploying the app via solution to another environment also worked flawlessly.

Only in a few places does the API appear to be not entirely complete yet. For example, RetrieveRecordAsync did not work, so a workaround had to be implemented using GetAll with a filter expression. However, the most important actions for loading, filtering, and saving data are already very stable.

Code Apps will fundamentally change the way we build apps in Dataverse environments and across the Power Platform. Canvas Apps may soon become obsolete and be replaced by Code Apps. There may also be more options in the future to integrate Code Apps into Model-Driven Apps. Until then, however, both can coexist peacefully side by side.

Image

/sites/default/files/2026-03/Power-Apps-Code-Apps-in-Practice_1.png

Row Summary in Model-Driven Apps

Stephane Pelhatre — Tue, 14 Oct 2025 08:04:03 +0000

Row Summary in Model-Driven Apps Stephane Pelhatre Tue, 10/14/2025 - 10:04

Body

Introduction

In model-driven applications, forms often contain many fields spread across multiple tabs and sections, which can make it difficult and time-consuming to find key information. Navigating between these tabs slows productivity and increases the risk of missing important information. Finding key insights quickly can be a challenge.

The Row Summary feature solves this problem by displaying a clear and concise summary of the most important information. Makers can customize the columns to include and choose how the summary is presented (as bullet points or as a short paragraph). This allows users to get the necessary context at a glance, without having to scroll through the entire form.
Furthermore, the summary can include clickable links to related records.

At the time of writing this article, this feature is still in preview.
Summaries are currently only supported in the English language.
Preview features aren’t meant for production use and might have restricted functionality.

Enable Row Summary feature

Before you can configure a Row Summary, you need to enable the feature in your environment:

Go to Power Platform Admin Center
Select your environment
Go to Settings > Product > Features
Enable the feature AI Insight Cards

Once enabled, you’ll be able to access and configure the Row Summary feature in model-driven apps.

Configure Row Summary for a table

To configure a row summary for main forms for a specific table:

Open Power Apps Portal and select your environment
Select the table where you want to apply the row summary (e.g., Contact) from the left navigation pane and click on Row summary in the section Customizations

Another way is to select your table from the left navigation pane and click on Forms in the section Data experience

Then click on Row summary on the command bar and from the dropdown select Edit Summary to begin customization
Following window is displayed:
Now you have to define columns to include in the summary and write a prompt
- In the Prompt editor, click on +Add data or type "/" to choose the columns you want the AI to summarize (in my example: full name, job title, company name, marital status)
If you click on +Add data you can add several columns in one step which is not the case if you type "/"
- Write a custom instruction (prompt) describing how the summary should be generated
In my example below : Generate a concise summary using the selected fields. Use bullet points and return “No value” if a field is empty
Click on Test to preview the summary output (the most recently edited record is used to generate the test response)
Once satisfied, click on Apply to main forms to enable the summary across all main forms for your table

Display the list of forms : an AI icon is visible for forms where the summary is active (only main forms)

To modify an existing row summary:

In Power Apps Portal select your table where you want to modify the row summary
Click on Forms in the section Data experience
Then click on Row summary on the command bar and from the dropdown select Edit Summary

An alternative to the previous method (point 2) is to click on Row summary (applied) in section Customizations
Make your changes to the prompt or included columns and reapply

To remove a summary from all forms:

In Power Apps Portal select your table where you want to remove the row summary
Click on Forms in the section Data experience.
Then click on Row summary on the command bar and from the dropdown select Hide on all main forms

View Row Summary in Dynamics 365

Open your app in Dynamics 365 and navigate to the entity (e.g., Contact) where the row summary is configured.
Select a record in the view : an AI summary icon is displayed.

Click on this icon : AI-generated summary is displayed in a modal popup.

Note that you can copy the summary into the clipboard.

If you open a record (e.g., Contact) the summary is displayed at the top of the form in a collapsible bar (called Insights bar).

Image

/sites/default/files/2025-10/ChatGPT%20Image%20Oct%2020%2C%202025%2C%2006_24_24%20PM.png

Dataverse: Duplicate Detection Rules vs Alternate Keys

Stephane Pelhatre — Wed, 08 Oct 2025 15:57:17 +0000

Dataverse: Duplicate Detection Rules vs Alternate Keys Stephane Pelhatre Wed, 10/08/2025 - 17:57

Body

Introduction

Having clean data in Dataverse can be tricky. One of the challenges is detecting and managing duplicate records.
With out-of-the-box tools you can implement duplicate detection rules or create alternate keys.
If you are a developer, you can implement a custom validation in a plugin.
In this article we will focus on out-of-the-box features (duplicate detection rules and alternate keys) and compare them.

Duplicate detection rules

First step is to check if the feature Duplicate Detection is enabled in your environment (it is enabled by default):

Connect to Dynamics 365 and open Power Platform Environment Settings app
Click on Data Management on the left pane and select Duplicate detection settings
Check that the option Enable duplicate detection is enabled

There are 3 triggers that you can activate:

When a record is created or updated
When Microsoft Dynamics 365 for Outlook goes from offline to online
During data import

Second step is to make sure the feature is enabled for your table:

Open Power Apps Portal and select your environment
Select your table on the left pane and click on Properties
Expand Advanced options pane and ensure that Apply duplicate detection rules is checked

Then you can create duplicate detection rules:

Connect to Dynamics 365 and open Power Platform Environment Settings app
Click on Data Management on the left pane and select Duplicate detection rules
All out-of-the-box duplicate detection rules are displayed
Click on New on the command bar
Below an example with the out-of-the-box rule Contacts with the same first name and last name for Contact table

Provide a name and description for the rule and define the criteria for identifying duplicates:

Base Record Type: select the type of record the rule applies to (e.g., Contacts).
Matching Record Type: select the type of record to compare. Typically, this is the same as the base record type, but you can compare different types (e.g., Contacts and Leads).
Exclude Inactive Records: check this box if you want to exclude inactive records from the duplicate detection process.
Case-Sensitive: check this box if the rule should be case-sensitive.
Field Selection: for each criterion, select the fields to compare and the operator (e.g., Exact Match).
Ignore Blank Values: check this box if you do not want the rule to consider blank fields as equal.

You can add several criterions to your rule criteria:
For text fields you have 3 choices:
- Exact Match
- Same First Characters
- Same Last Characters
For Datetime fields you have 2 choices:
- Same date
- Same date and time
For whole number/decimal and lookup fields only Exact Match is available

5. After configuring the criteria, click on Save.
To make the rule active, select it and click on Publish.
Note that you can only publish up to five rules for the same base record type at a time.

Now let's try creating a duplicate record using Dynamics 365 UI. For example a contact with existing first name and last name.
You should see a pop-up dialog with the warning message Duplicate records found.

You have 3 possibilities:

Ignore and save : if you are certain the record is unique or requires a new entry despite the match, click "Ignore and Save" to create the duplicate
Merge : if you want to combine the information from both records into a single, primary record, select "Merge." You will typically be prompted to choose which record will be the primary one, and then you can select which fields to keep from each record
Cancel : do not create the duplicate record

Alternate keys

An alternative to duplicate detection rule is to create alternate keys.
This method is the same as creating unique-index(es) from the database perspective. Hence this method will be more strict compared to duplicate detection rules.
An alternate key can combine one or several columns.
It can contain multiple rows with NULL values. NULL values are not indexed.

Some limitations:

There can be a maximum of 10 alternate keys for a table in a Dataverse instance
Columns used in the key must not have field-level security applied
Alternate keys aren't supported in virtual tables
When a key is created, the system validates the key, including that the total key size doesn't violate SQL-based index constraints like 900 bytes per key and 16 columns per key. If the key size doesn't meet the constraints, an error message is displayed
Unicode characters in key value. If the data within a column that is used in an alternate key contains one of the following characters /,<,>,*,%,&,:,\\,?,+ then retrieve (GET), update or upsert (PATCH) actions won't work. If you only need uniqueness, then this approach works, but if you need to use these keys as part of data integration then it's best to create the key on columns that won't have data with those characters

To create an alternate key for a specific table:

Open Power Apps Portal and select your environment
Select the table into which you want to create an alternate key
Click on Keys
Provide a display name and select the columns to include in your key
In the example below I create an alternate key in table Contact for columns birthday and last name
Only columns of the following types can be included in alternate key table definitions:
- Decimal Number
- Whole Number
- Single line of text
- Date Time
- Lookup
- Option Set
Click on Save. The system will automatically create the index in the database.
If the system detects duplicate data in the table, the creation will fail and you need to delete data first.
If there are lots of existing records in your table, index creation can be a lengthy process.
During creation of the key status will be Pending. Once the creation is complete status changes to Active.

Now let's try creating a duplicate record using Dynamics 365 UI. To be consistent with the alternate key created previously, a contact with existing birthday and last name.
You should see a pop-up error with the message Duplicate record.

Therefore, it is impossible to create a duplicate record with the user interface. This makes sense as uniqueness is ensured at the database level.

Creating/Updating records programmatically

We have seen that behavior is different when we create a duplicate record with the UI using duplicate detection rules or alternate keys.
But what happens if we create duplicate records programmatically with Dynamics 365 SDK or Web API?

Duplicate detection rules

By default duplicate detection rules are not applied when you are creating or updating records using Web API or Dynamics 365 API. Therefore duplicate records will be created.
If you want Dynamics 365 to raise an error you must utilize an optional parameter.
With Web API use parameter MSCRM.SuppressDuplicateDetection in the header of your HTTP request (POST to create a record or PATCH to update a record) to avoid creation of a duplicate record of an existing record.
The value assigned to MSCRM.SuppressDuplicateDetection determines whether the Create or Update operation can be completed:

true: Create or update the record, if a duplicate is found.
false: Do not create or update the record, if a duplicate is found.

So ensure that MSCRM.SuppressDuplicateDetection is set to false in your Web API request to detect duplicates.
You will get the following error message if you try to create a duplicate record:

{
"error": {
"code": "0x80040333",
"message": "A record was not created or updated because a duplicate of the current record already exists."
}
}

Note that if you do not use MSCRM.SuppressDuplicateDetection duplicates will be created.
Below an example of POST request to create a contact named "John Doe" with activation of duplicate detection rules.

POST [Organization URI]/org1/api/data/v9.2/contacts
If-None-Match: null
OData-Version: 4.0
OData-MaxVersion: 4.0
Content-Type: application/json
Accept: application/json
MSCRM.SuppressDuplicateDetection: false

{
    "firstname":"John",
    "lastname":"Doe"
}

And below an example performed with XrmToolbox plugin WebAPI Launcher.
Note parameter MSCRM.SuppressDuplicateDetection in the header.

And the result of this Web API request if we try to create a duplicate:

With Dynamics 365 SDK you have to use SuppressDuplicateDetection optional parameter in your request (CreateRequest or UpdateRequest) if you want the configured duplicate detection rules to run and throw an exception while creating or updating a record.
So set its value to false in your code to trigger duplicate detection rules.
You will get the following error if you try to create a duplicate record:
A record was not created or updated because a duplicate of the current record already exists

Below a C# example to create with the SDK a contact named "John Doe" with activation of duplicate detection rules.

namespace CrmDuplicateDetection
{
    class Program
    {
        static void Main(string[] args)
        {
            CrmServiceClient.MaxConnectionTimeout = TimeSpan.FromHours(3);
            var connectionString = WebConfigurationManager.AppSettings["connectionString"];
            var client = new CrmServiceClient(connectionString);
 
            var contact = new Entity("contact")
            {
                ["firstname"] = "John",
                ["lastname"] = "Doe"
            };
 
            var createRequest = new CreateRequest { Target = contact };
            // Pass parameter 'SuppressDuplicateDetection' to trigger Duplicate Detection Rules
            createRequest["SuppressDuplicateDetection"] = false;
            var response = (CreateResponse)client.Execute(createRequest);
        }
    }
}

Alternate keys

If you try to create a duplicate record programmatically with Dynamics 365 SDK you will get an error even if you set parameter SuppressDuplicateDetection to false in your CreateRequest/UpdateRequest request (and same if you set MSCRM.SuppressDuplicateDetection to false in the header of your Web API request).

Below an example of Web API POST request to create a contact with last name and birthdate that already exist in Dataverse.

Conclusion

As we have seen alternate keys are a strict way to avoid duplicates creation and ensure data correctness.
It is not possible to create duplicate records using Dynamics 365 user interface or Web API/Dynamics 365 SDK.
But alternate keys have some limitations (10 alternate keys max per table, not supported in virtual tables, cannot include columns with field level security enabled, no operator Same First/Last characters in the criteria).
Duplicate detection rules are more flexible when creating duplicate records through the UI (ability to merge records or force the creation of duplicates).
And with Web API/Dynamics 365 SDK you can choose whether you want to apply duplicate detection rules when creating/updating records.
So the choice between duplicate detection rules and alternate keys will depend on whether you want to allow duplicates creation under certain circumstances.
If you never want to create duplicate records (either through the user interface or programmatically) alternate keys are a good solution because the check is done at database level.
But if you want to warn users when they try to create a duplicate record in the UI and allow them to confirm or not the duplicate creation (and use Merge feature) duplicate detection rules are a good choice.
The same is true if you have interfaces between a third-party system and Dynamics 365 (an Azure webjob or Azure function for instance) and want to allow or not creation of duplicates.
But if you have an existing interface that allows the creation of duplicate records and want to change this behavior, you will have to modify the source code of the interface to use SuppressDuplicateDetection parameter to trigger duplicate detection rules.

Image

/sites/default/files/2025-10/ChatGPT%20Image%20Oct%2020%2C%202025%2C%2006_26_53%20PM.png

Custom Pages for converging Power Apps Model-Driven and Canvas

Danny Rodrigues Alves — Tue, 17 Jan 2023 13:00:14 +0000

Custom Pages for converging Power Apps Model-Driven and Canvas Danny Rodrigue… Tue, 01/17/2023 - 14:00

Body

Custom Pages for converging Power Apps Model-Driven and Canvas

Why do we need Custom Pages

With the public preview announced in mid-2021 and the GA (General Availability) in December 2022, Custom Pages are a long waited feature in the Power Platform universe. With Custom Pages, customizers have a new tool when building model-driven apps. Until then, canvas apps could be added in a form or as an iframe in a dashboard. Similar to a canvas app, Custom Pages can be used as a main page, as dialogs, or also as side panes. It opens new possibilities when integrating data from different sources into a single model-driven app.

That's where the usefulness of Custom Pages resides. It gives a much more flexible way to present data in a View, Form, or Dashboard, regardless of the data coming from a Dataverse table, multiple tables, or any other source.

Custom Pages: Definition

Custom Pages are a new type of page that can be integrate into a model-driven application. They are very similar to well-known Canvas Apps, but with pixel-perfect native integration in a model-driven app. They have been built by Microsoft to be used with the same canvas designer screen.

That's the power of Custom Pages: they can use almost the same features as Canvas Apps. For example, more than 600 connectors are available to retrieve data and multiple data can be shown on the same screen. They can also incorporate Power Apps Component Framework, commonly known as PCFs. Meaning low-code and pro-code elements can be added to a Custom Page!

Custom Pages are "kind" of a canvas app, but with an increased knowledge of the context of the model-driven page app running the page. It's more naturally embedded in the model-driven app. They are part of the model-driven app infrastructure and can only be used inside such app.

Concerning licensing, since Custom Pages are a feature of model-driven apps, they follow the same licenses.

Custom Pages VS Canvas App

As stated multiple times, Custom Pages are not the same concept as Canvas Apps, but they share numerous similarities. The main difference is that a Canvas App can exist as a stand-alone component, whereas Custom Pages are just a component of a model-driven app.

It was already possible to incorporate a canvas app into a model-driven app, as explained in this Veron's article. The new thing with Custom Pages, resides in they being an integrated part of model-driven apps, not just an external component added to a form.

Custom Pages enable us to go much further in the integration between model-driven and canvas apps. For example, the current limitation on the number of embedded canvas apps hasn't changed. Technically and in terms of embedment, Custom Pages are much better integrated (responsiveness). Also, no need to share the custom page with everyone, the model-driven security is applied!

Existing standalone canvas apps aren't supported for use as a custom page and the expected app structure is different. A standalone canvas apps often have many screens with global access to all controls and variables. The custom page is expected to typically be a single screen with loose coupling to provide performance and co-development capabilities.

Find here below the steps to convert a Canvas App into a Custom Page:

Create a blank custom page from the model-driven app designer. More information: Add a custom page to your model-driven app
Add a canvas app data source for data used by the screen.
Copy the screen from the canvas app in the original canvas app designer.
1. Open a single screen of the canvas app, CTRL+A, CTRL+C
Paste the screen into the new custom page in the model-driven app designer.
1. Ho to the custom page, CTRL+V.
Change the navigate calls to use the custom page name instead of the screen name.
Add the custom page to the model-driven app designer site map

Custom Pages will have a single screen. Instead of multiple screens, they will use the custom page's navigation functions to move to another custom page or model-driven app page.

Solution

In a solution, Custom Page can be found under the Pages section.

Step-by-step: Create a Custom Page

Custom Pages can be created from the Modern App Designer.

Edit a model-driven app in the maker portal
In the ribbon, select the Add page button and then select the Custom page in the page type choices.
It's the possible to create a new page or to selecting an existing one.
- By default, the new page will be added to the navigation pane.
A new tab will open in your browser with the Canvas Editor.
The canvas editor is described in this article by Amaury Veron. For sake of simplicity, we can add a very simple label and a big rectangle in the middle.
Select the Settings icon and add a name to the page
Select the Save icon
Select the Publish icon
Once saved and published, publish also the model-driven app.
Then, the new custom page will appear in the model-driven app menu!

And that's our first Custom Page!

Others examples

We can also extend the above Custom page and add to it an iFrame - with Iframe4Canvas PCF - and a list of records from the Leads table.

The above example is quite a Hello World. But below you can find a more real-life solution that Custom Pages can bring into model-driven apps:

The list of accounts is displayed on the left part of the page.
When an account is selected, the stock history is displayed from the WSJ website.

In this example, a custom page is added to the model-driven menu, under the My Work section. The page contains a list of accounts from the Dataverse table. On the right, the stock price of the selected account is displayed.

Some points about the above page:

The stock price is displayed with the Iframe4Canvas component.
To use custom PCF controls, you need first to enable the Power Apps component framework for canvas apps parameter via the admin portal.
Note that once you saved and published the custom page, you still need to publish the model-driven app!
- That will be the case every time you want to update your custom page!
- When a new version of the custom page is published and the model-driven app is also published, a warning will appear in the app.

Screen integrations

In the above example, the custom page was used as a page in a model-driven app. But there is much more usage for Custom Pages! With a little bit of code, they can be used a center dialogs or side dialogs or even side panes!

Custom Pages can be integrated in a model-driven app as a new page - like above - but there as also other way to use them. For all of the points below, some JavaScript code is needed, therefore a trigger is needed. The trigger can be for example a click on a button (button in the ribbon or in a view), it can also be a timer set in JavaScript within the onload event of the form, or even a onChange event based upon a field's value.

To be able to display a Custom Page by code, only the unique name of the page. It can be founded in the Default Solution, under the Pages sections.

To recap everything, there are four possible screen integrations:

As a new page
- As displayed above, the Custom Page acts like a dashboard for example, taking the full width and height of the model-driven app.
As a centered dialog
- The Custom Page displays itself in the middle of the model-driven app, with width and height configurable by JavaScript code.
- JavaScript code:
- Example:
As a right-side panel
- The Custom Page displays itself in the right part of the model-driven app, overlapping the screen.
- JavaScript code:
- Example:
As a right-side pane
- The Custom Page displays itself in the pane part of the model-driven app. The page doesn't overlap current page, but two pages are displayed side-by-side.
- JavaScript code:
- Example:

All JavaScript code above comes from the Microsoft documentation.

Custom page with parameters

Via the JavaScript code, it is also possible to send parameters to the Custom Page. With this feature, it completely possible to create record-aware!

Here is an example of JavaScript code to send a parameter from the model-driven app code to the Custom Page.

In the Custom Page, the parameters can be retrieved as follows:

Conclusion

Custom Page is a new and very important and usefull tool when building model-driven apps. It offers an out-of-the-box integration for "model-driven canvas apps". All cool features of canvas apps, like PCF and PowerFx support, connectors, and easy-to-use editor are present. They can be added into solutions, don't need sharing, and can therefore be integrated into any CI/CD pipeline.

The only major drawback is that they can't be added directly into a form. Javascript code is still needed for the moment. Hopefully, a PCF or another feature will soon fill this gap!

on the downsides, custom pages cannot be added directly into a form!

Reference

Custom Pages for converging Power Apps Model-Driven and Canvas

Image

/sites/default/files/2023-01/CustomPage.png

Dynamics 365 Calendar View Presentation

Amaury Veron — Wed, 30 Jun 2021 12:48:28 +0000

Dynamics 365 Calendar View Presentation Amaury Veron Wed, 06/30/2021 - 14:48

Body

Dynamics 365 Calendar View Presentation:

We want to display a Calendar for the Table Appointment. Here is the final appearance you can get:

Nice look isn't it ?

When using the Calendar, you are not saying goodbye to the other "usual" Views of the Table. You can still switch to any other View:

To configure the Calendar, create a View as usual. In the editor, select "Custom Control":

Click "Add Control" and choose "Calendar Control V2". Select the supports on which you want to display the View as a Calendar.

Then, you can configure 4 properties for the Calendar. Each property is set to a Column of the Table.

"Start Date": when the visual for the Row should start on the Calendar. For Table "Appointment", this could for instance be set to field "scheduledstart" or "actualstart"
"Description": the description displayed on the visual of the Row. For Table "Appointment", this could for instance be set to field "Subject"
"End Date": when the visual for the Row should end on the Calendar. For Table "Appointment", this could for instance be set to field "scheduledend" or "actualend"
"Duration" (Optional): the duration displayed on the quick view of the Visual. For Table "Appointment", this could for instance be set to field "scheduledduration"

Clicking on the visual shows this quick view:

The record can be opened by clicking on "More Details".

A limitation is that this view can't be customized.

You could use the Calendar View for any Table. For our Use Case here, we could also have:

Created the View on the Table Activity
Filtered the View to keep only the Activities of "Activity Type" = "Appointment"

We could of course not filter the View if we want, and have a Calendar View with all Activities in it.

Hope you will enjoy this feature !

Dynamics 365 Calendar View Presentation

Power Apps PCF NN DropDown Overview

Stéphan Drouard — Tue, 09 Feb 2021 21:01:37 +0000

Power Apps PCF NN DropDown Overview Stéphan Drouard Tue, 02/09/2021 - 22:01

Body

This trick is dedicated to a very useful PCF NN DropDown

Today, the only solution with CRM to display a list of Many-to-Many relationship items into a form is actually to display it as a list.

You can also have a new button which will open a new form in a popup but let's be honest, it is not really user friendly.

That is where the PCF NN DropDown steps to the floor !

With it, you will be able to turn a Many-to-Many relationship into a multiselect dropdown.

The bonus is that with an input parameter, you can add a filter to the control to search your item !

It has been developed by Niels Minnee and it is available on pcf.gallery.

If you need to install it, the managed solution is available. But if you want to modify it, the sources are also available and you can regenerate managed or unmanaged solution as you wish. You can use this tutorial to help you doing it.

Enjoy !

PCF NN DropDown

Dataverse / Dynamics 365 Timer Control

Amaury Veron — Fri, 18 Dec 2020 10:33:32 +0000

Dataverse / Dynamics 365 Timer Control Amaury Veron Fri, 12/18/2020 - 11:33

Body

Dynamics 365 Timer Control in the Forms. The Timer Control can for instance be used to let a user know the time he has left to complete a task.

A very common application of the Timer Control is for SLAs of Cases. It could help your User know how long he has to meet the SLA conditions for a Case!

You can add several Timer Controls per Form, for any Entity.

To insert it in a Form, go to Form customisation interface and click Insert -> Timer Control:

A window opens with different properties to fill:

You first need to fill in a Name for the control, and a Label for it. The Label will be displayed on the Form.

Then, you have two other mandatory fields:

- Failure Time Field:

Here you can select a DateTime field. It is the deadline for the User to perform a Task.

The Timer will show a countdown to this DateTime, until it is reached. If the DateTime is reached and exceeded, the Timer will go up and be displayed in red.

- Success Condition:

You select here a Success Condition. You specify an Option Set of the entity and one of the values of the Option Set. If the Option Set is set to this value for the record, the Timer will show a status "Succeeded":

Here is the appearance of the Timer on the Form:

If the Failure Time field is past, the Timer will go up and be shown in red:

If the Success Condition is met, the Timer is replaced by the "Succeeded" message :

There are also optional fields in the configuration of the Timer. For each of them, you also select an option set and one of its values.

- Failure Condition:

If condition is met, the Timer shows "Expired":

- Warning Condition:

If condition is met, the Timer shows "Nearing Expiry" under the countdown:

If the Failure Time is past, it isn't shown.

- Cancel Condition:

If condition is met, the Timer shows "Canceled":

- Pause Condition:

If condition is met, the Timer shows "Paused":

Hope you will find use to this nice Control !

Dynamics 365 Timer Control

Canvas App as modal box in Dynamics 365

Amaury Veron — Mon, 26 Oct 2020 14:40:29 +0000

Canvas App as modal box in Dynamics 365 Amaury Veron Mon, 10/26/2020 - 15:40

Body

Introduction

Canvas Apps can already be embedded in Dynamics 365 Model-Driven Apps - in Forms - and that's awesome!

Today's Trick is about a new feature that allows to use Canvas App as modal boxes in Model-Driven Apps !

It uses the new Smart Button "Open Dialog" of the Ribbon Workbench.

Basically, you will create an "Open Dialog" button in the Ribbon and link it to your Canvas App. When the user clicks the button in the Model-Driven App, the Canvas App will open as a modal box.

Install Smart Buttons

For this integration, the first step is to install in your environment the solution containing the Smart Buttons for the Ribbon Workbench.

You can find the latest version of the solution here: https://github.com/scottdurow/RibbonWorkbench/releases

Important Note:

Unlike the Ribbon Workbench Solution, when you deploy to production you will also need to install the smart buttons solution since it contains the necessary JavaScript for them to work.

Create Canvas App

Now, time to create your Canvas App.

There are just a few tips to know for this integration:

The "Open Dialog" Smart Button will pass 2 parameters to the Canvas App
- recordId: This parameter contains the GUID of the record selected in the Model-Driven App
- recordLogicName: This parameter contains the logical name of the record selected in the Model-Driven App

Then, you can for instance access the record in the Canvas App with this formula:

LookUp(Cases, Case = Param("recordId")))

The Smart Button listens for the Exit() function in the Power Apps: if you call this function, the modal box will close. So, you can for instance use this function on a Cancel button.

Knowing these few things, you can now let your imagination go to create advanced Modal Boxes using Canvas Apps!

Create Smart Button

Now, go to your Ribbon Workbench.

Create a new "Open Dialog" Smart Button and place it where you want:

Add input parameters:

You will be able to:

Give a Title for the button
Give the URL of your Canvas App
- You can find it in the Power Apps portal, going to the section "Details" of your Canvas App
- A great possibility is to give as input an Environment variable with following syntax: {%schema_name%}. Where schema_name must be replaced by the schema name of the environment variable. This allows to point to a different Canvas App depending on the environment
A width for the modal box
A height for the modal box
A Header for the modal box

Conclusion

This new feature looks really awesome. With this new feature, it is possible to create custom modal boxes in your Model-Driven apps, with very low code involved!

The Ribbon Workbench has introduced other Smart Buttons. There may be the subjects of future tricks. So stay tuned if you are interested!

New Feature: Related Records in a Dialog

Stéphan Drouard — Tue, 16 Jun 2020 09:30:28 +0000

New Feature: Related Records in a Dialog Stéphan Drouard Tue, 06/16/2020 - 11:30

Body

Presentation

With the arrival of the new 2020 release Wave 1, a very useful feature is now available on D365.

Before when a user wanted to access the record's form from a lookup, or a subgrid for example, he was forced to leave the current form.

With the new release, you will be able, thanks to a little piece of code, to display the desired form into a customized dialog. From this opened form dialog, you could create a new record or edit an existing one. A nice thing to note is that the tab control to navigate in the form will be usable.

To integrate this new feature, D365 devs will create a javascript script where they will have the possibility to define the appearance and the positionning of the dialog.

Let's see an example with this following script

var pageInput = { 
 pageType: "entityrecord", 
 entityName: "account", 
 formType: 2, 
}; 

var navigationOptions = { 
 target: 2, 
 width: {
   value: 50, 
   unit:"%"
 }, 
 position: 1 
}; 

Xrm.Navigation.navigateTo(pageInput, navigationOptions);

The code displays a dialog to create a new record of type Account. The dialog will be centered and with a width of 50% of the window.

You can also modify the navigationOptions to change the dialog position. Let's change it with:

var navigationOptions = { 
 target: 2, 
 width: {
   value: 500, 
   unit:"px"
 }, 
 position: 2 
};

In this case, the dialog will be on the right of the screen with a width of 500px.

References

You can find more examples on this page:

https://docs.microsoft.com/en-US/powerapps/developer/model-driven-apps/customize-entity-forms#open-main-form-in-a-dialog-using-clientapi

If you want to know more about the navigateTo function

https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/xrm-navigation/navigateto

Editable Grids, a usefull PCF control offered by Microsoft

Danny Rodrigues Alves — Wed, 13 May 2020 11:24:11 +0000

Editable Grids, a usefull PCF control offered by Microsoft Danny Rodrigue… Wed, 05/13/2020 - 13:24

Body

Description

In previous releases of Dynamics 365 or Dynamics CRM, users couldn’t enter data directly in lists/views or subgrids. They had to click the record to open it in a form, edit the data, and then save, which required multiple clicks. Editable Grids give users the ability to perform in-line editing directly from a list or sub-grid.

Visually, an Editable Grid looks just like a regular read-only grid. Almost all types of fields can be updated via such grid, exception made for Customer lookups, Owner, composite address fields, and state/status fields. Like the classical read-only grids, filtering columns, pagination, and resizing columns capabilities are also offered. It works with OOB entities, custom ones, personal views, mobile clients, …

As the goal of editable grids is to make data entry more efficient, several keyboard shortcuts are offered and may be used to gain time and productivity.

Figure 1: Group By feature

Editable Grids also give the possibility to Group By records based on some fields. For example, in Figure 1, the record Payment Plans are group by the option set field Frequency (values are Bi-annual, Bi-monthly, Monthly, and null). Note that it’s possible to enable an editable grid for an entity but disable the grouping feature.

Some other points regarding Editable Grids:

If a field is set as read-only in the entity configuration, Editable Grid takes it into account.
Security Roles are obviously considered.
There are no business rules that are fired…
… but it’s possible to make some JavaScript function on such grid.
Move columns around in the view by dragging and dropping. Please note, these persist across sessions and users, i.e. if I move a column, it is moved for all users, and will still be like that when I log out and back in again.
It’s not possible to change a value on a field of a parent entity.

Finally, note that changes are some saved automatically! There is a save icon on the top right of the view and a little message on the bottom left warning users about Unsaved Changes.

Configuration

Editable Grids can be set up in two ways:

Either for a specific sub-grid in a form
- In the customization of the form, select the sub-grid and open the Controls tab.
- There, add the Editable Grid control.
Either for an entire Entity
- In the Customizations, click on the entity and go to the Controls tab.
- There, add the Editable Grid control.

Therefore, it’s not possible to apply it to just some views and not to other ones.

Take-away Points

Editable Grids enable in-line editing directly in a view or a subgrid.
Security Roles still apply.
It can be set up either at the Entity-level for all views or at the Form-level.
It can be customized with JavaScript.