How to Hide the “New Document” Button in a Dynamics 365 Lookup Using JavaScript

When customizing Microsoft Dynamics 365 or a Model-Driven Power App, you may sometimes need to control which actions are available to users within lookup fields.
A common requirement is to hide the “New Document” button from a lookup dropdown, preventing users from creating new records directly from that interface.
In this article, we will explore a simple JavaScript solution that hides the button dynamically, even when the lookup control is refreshed or its content is re-rendered.
The JavaScript Solution
The following function hides the “New Document” button associated with the dps_documentid lookup field.
_self.HideNewDocumentButton = function () {
    var s = 'button[data-id="dps_documentid.fieldControl-LookupResultsDropdown_dps_documentid_addNewBtnContainer"]',
        d;

    try {
        d = (window.parent && window.parent.document) || document;
    } catch (e) {
        d = document;
    }

    if (!d.getElementById("hideNewDocumentButtonStyle")) {
        var t = d.createElement("style");
        t.id = "hideNewDocumentButtonStyle";
        t.textContent = s + "{display:none!important}";
        (d.head || d.documentElement).appendChild(t);
    }

    if (_self._hideBtnObserver) {
        _self._hideBtnObserver.disconnect();
    }

    var h = function () {
        var b = d.querySelector(s);

        if (b) {
            b.style.display = "none";
        }
    };

    h();

    _self._hideBtnObserver = new MutationObserver(h);

    _self._hideBtnObserver.observe(d.body, {
        childList: true,
        subtree: true
    });
};
How Does It Work?
Let's break down the main components of this solution.
1. Identifying the Button
First, we define a CSS selector that identifies the specific button inside the lookup dropdown:
var s = 'button[data-id="dps_documentid.fieldControl-LookupResultsDropdown_dps_documentid_addNewBtnContainer"]';
Using the data-id attribute allows us to target the intended button without affecting other buttons in the application.
2. Accessing the Parent Document
The function attempts to access the parent window's document:
try {
    d = (window.parent && window.parent.document) || document;
} catch (e) {
    d = document;
}
This is useful in scenarios where the JavaScript code runs inside an embedded context.
If accessing the parent document is not possible, the function falls back to the current document.
Note that browser same-origin restrictions may prevent access to the parent document.
3. Injecting a CSS Rule
To ensure the button remains hidden, we dynamically inject a CSS rule into the document:
if (!d.getElementById("hideNewDocumentButtonStyle")) {
    var t = d.createElement("style");
    t.id = "hideNewDocumentButtonStyle";
    t.textContent = s + "{display:none!important}";
    (d.head || d.documentElement).appendChild(t);
}
The style element is created only once, avoiding unnecessary duplicate CSS rules.
The !important declaration ensures that the button remains hidden even if other styles attempt to display it.
4. Using MutationObserver
One of the main challenges with Dynamics 365 and Model-Driven Apps is that interface elements can be dynamically rendered.
This means that hiding a button only once may not be sufficient.
To solve this problem, we use the JavaScript MutationObserver API:
_self._hideBtnObserver = new MutationObserver(h);

_self._hideBtnObserver.observe(d.body, {
    childList: true,
    subtree: true
});
The observer monitors changes in the document's DOM tree.
Whenever new elements are added, the callback checks whether the target button exists and hides it if necessary.
Before creating a new observer, the function disconnects any previously registered instance. This prevents multiple observers from running simultaneously.
Why Use MutationObserver?
Without a MutationObserver, the button could reappear whenever Dynamics 365 refreshes or rebuilds the lookup dropdown.
By monitoring DOM changes, we can automatically reapply the hiding logic whenever the relevant interface elements are rendered.
This makes the customization more resilient to dynamic UI updates.
Important Considerations
Although this approach can be useful for client-side interface customization, there are a few things to keep in mind:
DOM dependencies: The data-id attribute may change after platform updates.
Performance: Observing the entire document can generate frequent callbacks. For more complex applications, consider monitoring a smaller container.
Browser compatibility: MutationObserver is supported by modern browsers.
Security: Hiding a button does not prevent users from creating records through other interfaces, APIs, or alternative application paths.
Supported customization: Direct DOM manipulation of Dynamics 365 and Model-Driven App interfaces is not a supported customization mechanism and may break after updates.
If record creation must genuinely be restricted, implement the appropriate security roles, privileges, and server-side validation.

With a few lines of JavaScript and the MutationObserver API, it is possible to hide the “New Document” button from a specific Dynamics 365 lookup dropdown.
This technique demonstrates how to handle dynamically generated UI elements and apply targeted client-side customizations.
However, it should be considered a visual workaround rather than a security solution. Always use the platform's supported security mechanisms to enforce business rules and access restrictions.
Have you encountered similar challenges when customizing Dynamics 365 lookup controls? Share your experience in the comments!



 _self.HideNewDocumentButton = function () {

     var buttonDataId = "dps_documentid.fieldControl-LookupResultsDropdown_dps_documentid_addNewBtnContainer";
     var selector = 'button[data-id="' + buttonDataId + '"]';

        
     var targetDoc;
     try {
         targetDoc = (window.parent && window.parent.document) ? window.parent.document : document;
     } catch (e) {
         targetDoc = document;
     }

     
     var styleId = "hideNewDocumentButtonStyle";
     if (!targetDoc.getElementById(styleId)) {
         var style = targetDoc.createElement("style");
         style.id = styleId;
         style.textContent = selector + " { display: none !important; }";
         (targetDoc.head || targetDoc.documentElement).appendChild(style);
     }


     if (_self._hideBtnObserver) {
         _self._hideBtnObserver.disconnect();
     }

     var hideBtn = function () {
         var btn = targetDoc.querySelector(selector);
         if (btn) {
             btn.style.display = "none";
         }
     };

     hideBtn();

     _self._hideBtnObserver = new MutationObserver(hideBtn);
     _self._hideBtnObserver.observe(targetDoc.body, {
         childList: true,
         subtree: true
     });
 };








_self.HideNewDocumentButton = function () { var s = 'button[data-id="dps_documentid.fieldControl-LookupResultsDropdown_dps_documentid_addNewBtnContainer"]', d; try { d = (window.parent && window.parent.document) || document; } catch (e) { d = document; } if (!d.getElementById("hideNewDocumentButtonStyle")) { var t = d.createElement("style"); t.id = "hideNewDocumentButtonStyle"; t.textContent = s + "{display:none!important}"; (d.head || d.documentElement).appendChild(t); } if (_self._hideBtnObserver) { _self._hideBtnObserver.disconnect(); } var h = function () { var b = d.querySelector(s); if (b) { b.style.display = "none"; } }; h(); _self._hideBtnObserver = new MutationObserver(h); _self._hideBtnObserver.observe(d.body, { childList: true, subtree: true }); };

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8" />
    <title>POC WebAssembly - Hide New Document Button</title>
</head>
<body>
    <h3>Proof of Concept: WebAssembly + DOM (Hide button)</h3>

    <button data-id="dps_documentid.fieldControl-LookupResultsDropdown_dps_documentid_addNewBtnContainer">
    </button>

    <pre id="log"></pre>

    <script>
        'use strict';

    
        const wasmBytes = new Uint8Array([
            0x00, 0x61, 0x73, 0x6d, // magic  "\0asm"
            0x01, 0x00, 0x00, 0x00, // version 1
            0x01, 0x05, 0x01,       // Type section: 1 type
            0x60, 0x00, 0x01, 0x7f, //   () -> (i32)
            0x03, 0x02, 0x01, 0x00, // Function section: 1 func, type 0
            0x07, 0x0e, 0x01,       // Export section: 1 export
            0x0a, 0x73, 0x68, 0x6f, 0x75, 0x6c, 0x64, 0x48, 0x69, 0x64, 0x65, // "shouldHide"
            0x00, 0x00,             //   export kind=func, index 0
            0x0a, 0x06, 0x01,       // Code section: 1 body
            0x04, 0x00, 0x41, 0x01, 0x0b // body: i32.const 1 ; end
        ]);

        const log = function (msg) {
            document.getElementById("log").textContent += msg + "\n";
            
            console.log(msg);
        };

        const buttonSelector =
            'button[data-id="dps_documentid.fieldControl-LookupResultsDropdown_dps_documentid_addNewBtnContainer"]';

        async function runPoc() {
            try {
                log(" WebAssembly...");
                const { instance } = await WebAssembly.instantiate(wasmBytes, {});

                const shouldHide = instance.exports.shouldHide();
                log("wasm.shouldHide() => " + shouldHide);

                if (shouldHide === 1) {
                    
                    const btn = document.querySelector(buttonSelector);
                    if (btn) {
                        btn.style.display = "none";
                        log(" JS.");
                    } else {
                        log("DOM.");
                    }
                } else {
                    log("Wasm .");
                }
            } catch (e) {
                log("Errore: " + e.message);
            }
        }

        runPoc();
    </script>
</body>
</html>