Feature request: host code apps inside model-driven apps (navigation, form tab/section, command dialogs), like custom pages

[PaulK975]

Summary

Custom pages can be used inside a model-driven app: as a page in the app's navigation, on a form, and as a dialog or side pane opened from a command. The model-driven app passes the user's authentication and the context (table, record id) to the page. Code apps can't do any of this today: they only run standalone in the Power Apps player.

Please let code apps be hosted by a model-driven app in the same three ways as custom pages, with the authentication and the context passed by the model-driven app:

1. A code app as a page in the model-driven app: a code app in the app's site map (navigation), like a custom page, added in the app designer (Add page → Code app).
2. A code app inside a form: in a form tab or section, with the current record passed to it (table + record id). This now can be done with a Canvas App - and with some out-of-the-box thinking with a page -
3. A code app opened from a command: e.g. replacing the classic New / Edit buttons, as a dialog, side pane or full page (Xrm.Navigation.navigateTo), like a custom page can.

For all three: the model-driven app passes the authentication to the code app, just as it does for a custom page: no second sign-in, no extra consent, no separate player session.

Below a screenshot of the Model Driven App add Page option:

Why

• Code apps are the pro-code way to build rich UI on Dataverse (React, TypeScript, any UI library, tests, ALM in git). Many solutions combine a model-driven app (data maintenance, admin, views, business process) with focused screens for specific steps of a process. Today those screens have to be custom pages (low-code) or a separate code app the user opens in another tab.
• Users expect one app: a focused screen should open where the user works — in the navigation, on the record's form, or from the command bar — not as a separate app with its own header, sign-in and navigation.
• Replacing the classic New / Edit experience of a table with a guided code app screen (a wizard, a responsive form for the phone) is a common need. With custom pages this works (navigateTo with pageType: "custom"); with code apps it doesn't.
• Code apps already run in a host (the player) that passes the user's context (getContext() from @microsoft/power-apps/app). The same model would work when the host is a model-driven app.

How it could work (suggestion)

	Custom page today	Code app (requested)
In the navigation	Site map subarea / app designer Add page → Custom page	Add page → Code app; the code app as an app module component
On a form	A custom page in a form tab / section, record context passed	A code app component in a form tab / section; getContext() returns the table and record id
From Legacy Buttons	Xrm.Navigation.navigateTo({ pageType: "custom", name, entityName, recordId }, { target: 2, position: 1 / 2 }) Scott Durow approach: https://www.youtube.com/watch?v=99uU5gGN15w	navigateTo({ pageType: "codeapp", name, entityName, recordId, data }, { target: 1 / 2, position }) — full page, dialog or side pane
From a command	Xrm.Navigation.navigateTo({ pageType: "custom", name, entityName, recordId }, { target: 2, position: 1 / 2 })	navigateTo({ pageType: "codeapp", name, entityName, recordId, data }, { target: 1 / 2, position }) — full page, dialog or side pane
Authentication	Passed by the model-driven app	Passed by the model-driven app — the code app's data sources and connections work without a new sign-in
Context in the app	Param() in Power Fx @ModelDrivenIntegration in Canvas or Page	getContext() extended, e.g. host: "modelDrivenApp", appId, entityName, recordId, formType, custom data
Closing / result	Back(), close the dialog	An API to close the dialog / side pane and return a result (e.g. the new record id) so the form or view refreshes

Bonus: when a code app is shown inside a model-driven app, its own header is hidden automatically (the model-driven app's header is enough).

Additional Consideration

Yes I am aware that we can use custom components to add functionality to a dataverse form. But in my opinion it would make sense to streamline the experience over multiple usecases, therefor it would make sense to enable CodeApps to host the integration options of the Custom page, so it can be used in a wide area of usecases.

With adding this feature we as consultants and developers get extended choices on how to implement functionality. We can decide to go full low code - canvas apps and pages -, full pro code - with codeapps and (optional) custom components - or hybrid - all types based on the specific usecase -. This makes sense I hope.

Environment

• Power Apps CLI pa 1.3.0, @microsoft/power-apps 1.5.0.
• Code apps in a solution together with a model-driven app (unmanaged in dev, managed in test / production).
• Today the only way to show a code app from a model-driven app is a link that opens it standalone in the player (a new tab, its own header and navigation, no record context except through URL parameters).

[ergonza93]

Moving to the Ideas section of Discussions.

[Veroo Consulting GmbH (TimoLenz)]

Yes. That would be awesome. The fact that it maybe could than run on the power Apps Mobile App is nice too.