How to add html with a controller directly into the html body when loading backoffice
Hi all.
using Umbraco 8.12.1
I want to add some custom html with an angular controller into the backoffice in the body of the html, that are avaiable where ever you are in the backoffice.
I have tried with $httpProvider interceptor and here i can fire some functions or even replace views, but i dunno how to add views?
you want to use a controller that runs as part of the umbraco startup and listens for the "app.ready" event (this is fired when someone is logged into the back office.
(function() {
'use strict';
function loader(eventsService, backchatManager) {
// fired when a user is authenticated and logged in
// so we can load anything into the back office here.
eventsService.on('app.ready', function (event, data) {
loadChat();
});
function loadChat() {
console.info('loading chat UI');
backchatManager.loadChat();
}
}
angular.module('umbraco').run(loader);
})();
In this example loadChat() calls a findHeaderAction that appends a html element of <backchat-button /> which for this example is an angular component to handle the code/html injected for some chat functionality)
function findHeaderActions() {
var actionsList = angular.element(document)
.find('.umb-app-header__actions');
if (actionsList != null && actionsList.length == 1) {
// inject a new item into the list ?
// actionsList[0]
var item = document.createElement('backchat-button');
actionsList[0].appendChild(item);
$compile(item)($rootScope);
}
}
So i could just make a directive for the backchat-buttonangular.module("umbraco.directives").directive("backchatButton", ['assetsService', 'localizationService', function backchatButton(...) {...} ]); and inject it via the package.manifest.
yeah there really should be an variable on the eventService to clean it up. although as this is a function that runs on load, so I am not sure if it does get cleaned up in browser or if its always there while the user is logged in.
but you can replace the html in that component with anything and as the component is loaded you can run JavaScript in the controller to manipulate the view just as you would for a controller in a content app or property editor.
How to add html with a controller directly into the html body when loading backoffice
Hi all.
using Umbraco 8.12.1
I want to add some custom html with an angular controller into the backoffice in the body of the html, that are avaiable where ever you are in the backoffice.
I have tried with $httpProvider interceptor and here i can fire some functions or even replace views, but i dunno how to add views?
Hi,
you want to use a controller that runs as part of the umbraco startup and listens for the "app.ready" event (this is fired when someone is logged into the back office.
In this example loadChat() calls a findHeaderAction that appends a html element of
<backchat-button />which for this example is an angular component to handle the code/html injected for some chat functionality)Hi Kevin.
Thanks for a quick reply.
So i could just make a directive for the backchat-button
angular.module("umbraco.directives").directive("backchatButton", ['assetsService', 'localizationService', function backchatButton(...) {...} ]);and inject it via the package.manifest.Do eventsService.on need to be set as a variable in order to clean up? https://our.umbraco.com/documentation/Reference/Angular/Services/eventsService/
Hi,
I would create a component : (this one opens an appDraw (which is the same as the help draw on the right hand side).
the view (its a list item because we are appending into the list of existing buttons)
yeah there really should be an variable on the
eventServiceto clean it up. although as this is a function that runs on load, so I am not sure if it does get cleaned up in browser or if its always there while the user is logged in.Thanks alot, now i think i understand it.
So a user would have to click on the icon/button for the chat to be loaded.
I will try play around with it, in my case i just want to show some notifications about everything :)
yeah - in this example
but you can replace the html in that component with anything and as the component is loaded you can run JavaScript in the controller to manipulate the view just as you would for a controller in a content app or property editor.
Understood and thanks again :)
I might come back here, if i get some new questions about this.
is working on a reply...