Integrating Canvas Custom Page with Model Driven App | Pop-Up Functionality

Watch Video below :

Integrating Canvas Custom Page with Model Driven App | Pop-Up Functionality — YouTube

Discover how to take your Model Driven App to the next level by seamlessly integrating a Canvas Custom Page with a pop-up feature! Seamlessly embed UI-rich elements within your Model Driven app. JS Source :

References : https://benediktbergmann.eu/2023/08/15/generic-ts-js-to-open-a-custom-page

https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/navigate-to-custom-page-examples #CanvasCustomPage

// Async function to open a custom page
async function openCustomPage(pageName, title, entityName = "", id = "", width = 600, height = 400, target = 2, position = 1) {
    const defaultWidth = 600; // Default width for the page
    const defaultHeight = 400; // Default height for the page

    // Remove curly brackets from ID if present
    const recId = id.startsWith("{") ? id.slice(1, -1) : id;

    // Input object for page navigation
    const pageInput = {
        pageType: "custom", // Specify the type of page to open
        name: pageName, // Name of the custom page
        entityName: entityName, // Entity name associated with the page
        recordId: recId, // ID of the record to open the page for
    };

    // Options object for navigation
    const navigationOptions = {
        target: target, // Specify where to open the page (1: Inline, 2: New tab, 3: Dialog, 4: Standard Web Application)
        width: typeof width === "number" ? width : defaultWidth, // Use given width or defaultWidth if not a number
        height: typeof height === "number" ? height : defaultHeight, // Use given height or defaultHeight if not a number
        position: position, // Specify the position of the page (1: Center, 2: Side)
        title: title, // Title of the page
    };

    // Navigate to the page with specified options
    try {
        await Xrm.Navigation.navigateTo(pageInput, navigationOptions); // Use Xrm.Navigation to open the custom page
        return true; // Return true if the page opened successfully
    } catch (error) {
        console.log(error.message); // Log error message if navigation fails
        return false; // Return false if the page failed to open
    }
}