Answered

Launch Custom Page - Model Driven App

(0) Share

Report

Posted on by Dmschellaz

In a model driven app form, I am looking to have a button in a section of the form that allows for a dialog popup to show a custom page.

Here is my HTML Code:

<!DOCTYPE html>
<html>
<head>
 <title>Custom Dialog Launcher</title>
 <style>
 .custom-button {
 background-color: blue;
 color: white;
 border: none;
 padding: 10px 20px;
 border-radius: 15px;
 cursor: pointer;
 font-size: 16px;
 }
 </style>
</head>
<body>
 <button class="custom-button" onclick="openCustomDialog();">Launch Custom Page</button>

</body>
</html>

Here is the javascript code that I have as a web resource that is in an On-Load event for the form:

function openCustomDialog() {
 var pageInput = {
 pageType: "custom",
 name: "your_custom_page_logical_name" // Replace with the logical name of your custom page
 };
 var navigationOptions = {
 target: 2, // Open as a dialog
 width: { value: 50, unit: "%" },
 height: { value: 80, unit: "%" },
 title: "Your Dialog Title" // Replace with the title for your dialog
 };

 if (Xrm.Page && Xrm.Page.navigation) {
 Xrm.Page.navigation.navigateTo(pageInput, navigationOptions).then(
 function () {
 // Called when the dialog has been opened successfully
 },
 function (error) {
 // Handle error
 console.error("Error opening custom dialog:", error);
 }
 );
 } else {
 console.error("Xrm.Page is not available.");
 }
}

When clicking on the button - I get a console log of:

Any thoughts?

Categories:

Building Power Apps

I have the same question (0)

All responses (2)

Answers (1)

narayan225 2,547 Super User 2025 Season 2 on at

Like (0)

Report

@Dmschellaz

I am not sure what you are doing by checking Xrm.Page and Xrm.Page.Navigation. Xrm.Page is deprecated and not supported anymore. Simply use Xrm.Navigation.

Please check the following documentation: https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/navigate-to-custom-page-examples

Hope this helps.

Cheers!

Was this reply helpful? Yes No
Verified answer

v-xiaochen-msft on at

Like (0)

Report
Hi @Dmschellaz ,

Please try this

html

<!DOCTYPE html> <html> <head> <title>Custom Dialog Launcher</title> <style> .custom-button { background-color: blue; color: white; border: none; padding: 10px 20px; border-radius: 15px; cursor: pointer; font-size: 16px; } </style> </head> <body> <button class="custom-button" onclick="openCustomDialog();">Launch Custom Page</button> <script> // This script should be in the HTML web resource. // No usage of Xrm or formContext should happen until this method is called. function setClientApiContext(xrm, formContext, openCustomDialog) { // Optionally set Xrm and formContext as global variables on the page. window.Xrm = xrm; window._formContext = formContext; window.openCustomDialog = openCustomDialog; // Add script logic here that uses xrm or the formContext. } </script> </body> </html>

Js

function test2(executionContext) { var formContext = executionContext.getFormContext(); var wrControl = formContext.getControl("WebResource_new_1"); if (wrControl) { wrControl.getContentWindow().then( function (contentWindow) { contentWindow.setClientApiContext(Xrm, formContext, openCustomDialog); } ) } } var openCustomDialog = function () { var pageInput = { pageType: "custom", name: "new_testpagefortable8_28932" // Replace with the logical name of your custom page }; var navigationOptions = { target: 2, // Open as a dialog width: { value: 50, unit: "%" }, height: { value: 80, unit: "%" }, title: "Your Dialog Title" // Replace with the title for your dialog }; Xrm.Navigation.navigateTo(pageInput, navigationOptions).then( function () { // Called when the dialog has been opened successfully }, function (error) { // Handle error console.error("Error opening custom dialog:", error); } );

Best Regards,

Wearsky

Was this reply helpful? Yes No