add simple javascript to backend

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Jonathan L Folland 35 posts 197 karma points

Aug 29, 2023 @ 18:44

Add simple javascript to backend

I would like to add a simple jquery to customize the backend. I have tried doing that with an app plugin. I have a manifest:

    {
  "name": "MyTweaks",
  "version": "1.0.0",
  "allowPackageTelemetry": true,
  "bundleOptions": "Default",
  "css": [
    "~/App_Plugins/tweaks/css/umbraco-tweaks.css"
  ],
  "js": [
    "~/App_Plugins/tweaks/js/umbraco-tweaks.js"
  ]
}

I see that the css file gets loaded, but the js file, which is a simple jquery block does not:

$(document).on('DOMNodeInserted', function(e) {
    if ( $(e.target).is("div.tox-tinymce")) {
       var styleAttr = $(e.target).attr("style");
       if (styleAttr && styleAttr.indexOf("height: 300px;") >  0) { 
        var umbContainer = $(e.target).closest("div.umb-rte-editor-con");
        if (umbContainer){
            umbContainer.addClass("umb-rte-editor-con-rich-text-light");
        }
       }
    }
});

Is there something that needs to be done to get umbraco to include this file?
Will umbraco not include a simple js file?
Is there a cache that can be cleared and if so where?
what options are available on the package manifest bundleOptions property?

Copy Link

Bo Jacobsen 610 posts 2409 karma points

Aug 29, 2023 @ 21:43

I am not quite sure if the backoffice actuelly loads jquery, so you could try use pure javascript.

document.addEventListener('DOMNodeInserted', function(e) {
    if (e.target.matches("div.tox-tinymce")) {
        var styleAttr = e.target.getAttribute("style");
        if (styleAttr && styleAttr.indexOf("height: 300px;") > 0) {
            var umbContainer = e.target.closest("div.umb-rte-editor-con");
            if (umbContainer) {
                umbContainer.classList.add("umb-rte-editor-con-rich-text-light");
            }
        }
    }
});

Copy Link

Jonathan L Folland 35 posts 197 karma points

Aug 30, 2023 @ 13:30
100
It turned out to be the manifest. I compared to another. I was using:
```
"js": [
    "~/App_Plugins/tweaks/js/umbraco-tweaks.js"
  ]
```
instead of:
```
"javascript": [
    "~/App_Plugins/tweaks/js/umbraco-tweaks.js"
  ]
```
Copy Link
is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies