Copied to clipboard

Flag this post as spam?

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

  • Corné Strijkert 63 posts 411 karma points
    May 18, 2015 @ 22:01
    Corné Strijkert

    How to customize the Umbraco 7 backend UI?

    Hi all,

    I want to modify the Umbraco 7 backend UI, but i don't know the best way to do this. I know that modifying the back end causes possible problems when upgrading to newer versions, but it is required for me to do that.

    i wonder if it is possible, for example, to hide the default 'Properties' tab or other tabs on the content view other than injecting javascript code inside the view to hide this bij manupilating the DOM?

    When extend the Umbraco functionality witch custom sections and property editors, everything is managed by package.manifest files and all stuff has to be inside the App_Plugins folder, but what if i want to add, for example, an directive that shows buttons beside the default 'Actions' dropdown on the content edit view?

    It is possible to modify the umbraco/views/content/edit.html file, but how to load needed JS-files and other dependencies? I discovered that all Belle dependencies are loaded with LazyLoad.js inside the index.html file, but how to extend this with custom AngularJS files, like directives, services and factories? Maybe it is possible to modify the umbraco/js/loader.js file, but then the files must be in the umbraco folder instead of App_Plugins or an other folder outside the umbraco folder.

    The umbraco/views/default.cshtml, the main file for the Umbraco UI, contains the following lines of code:

    @*And finally we can load in our angular app*@
        <script type="text/javascript" src="lib/rgrove-lazyload/lazyload.js"></script>
        <script type="text/javascript" src="@Url.GetUrlWithCacheBust("Application", "BackOffice")"></script>
    When i add an own line, for example:
    <script type="text/javascript" src="/app_plugins/directives/custom.directives.js"></script>  
    This does not work: The browser console shows this error: Uncaught ReferenceError: angular is not defined.
    So, in general: How to extend/modifty the Umbraco UI, other than adding custom sections or propert editors? How to load JS-files and how to modify DOM?
    Similar topic and a part of the answer to my question is:
    where Per wrote:
    eventService.beforeRender("content/edit.html", function(template, scope){
    template.find(".umb-btn-toolbar").prepend("<a href="#">Some button</a>");   
    but is that code available and how to do anything like that? I like that way of modifying the DOM.
    Thank you,
  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    May 18, 2015 @ 22:09
    Dennis Aaen

    Hi Corné and welcome to our :-),

    I would recommend you to take a look at the package called backoffice-tweaking to see if this package can solve some of the things that you are trying to archive by modify the Umbraco 7 backend UI

    Hope this package could be a better solution for you than modify the Umbraco 7 backend UI.


Please Sign in or register to post replies

Write your reply to: