Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#508 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend, full-stack

Hướng nghiên cứu

Start by reading how code apps currently receive host context through getContext() from @microsoft/power-apps/app, then compare that flow with the custom page integration points described in the issue. The request spans app navigation, form hosting, command navigation, authentication, and close/result behavior. Done means code apps can be hosted in all three places with authentication and record context passed through.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug
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:
Image

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).
Ngôn ngữ chính
TypeScript
Star
516
Fork
145
Merge trung bình
1 ngày 10 giờ
Pull request đã merge (30 ngày)
23

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của microsoft/PowerAppsCodeApps

Tất cả issue của microsoft/PowerAppsCodeApps

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.