The events service allows different components in Umbraco to broadcast and listen for global events.
To broadcast an event, you can use the emit
function. It takes two arguments, where the first is the name of the event - eg. featured.updated
, and the second argument is an object or similar describing the event.
The second argument is optional, so if your use case doesn't need this, feel free to skip this argument.
The illustrate this function, you could have a controller with an updated
function that is triggered by the view. In this dummy example, the function will increment the value of a property editor, and then use the events service to broadcast that the value was updated:
Another controller could then listen for broadcasts of your feature.updated
event via the events service's on
function, which takes the name of the event as the first argument, and a callback function as the second argument.
Then in the callback function, the first argument is the event it self, and the second argument is the object we pass on to the emit
function when we're broadcasting:
Controllers are typically used by a specific component, so the controller will only be executed when such a component is inserted into the DOM. The controller will be executed for each component, so you may end of with multiple instances listening for the same event.
If you need to listen for events on a more global level, you can hook into the application startup using app.run(...)
:
Notice how the result of the on
function is saved in an unsubscribe
variable. When we add a listener via the on
function, it's important to clean up after our selves when our component (here a controller) no longer exists - eg. when removed from the DOM.
In Angular, we can listen for the $destroy
event in the current scope, and then unsubscribe from the events service by calling the unsubscribe
variable as a function.
Alternatively, we could replace unsubscribe()
with eventsService.unsubscribe(unsubscribe)
, but it does the same thing - so calling the variable as a function directly may be preferred as it's shorter.
Below you'll find a list of events broadcasted by the Umbraco codebase. The list may not be complete, so please help updating the list should you find an event that isn't listed.
When the Umbraco application is ready
When Umbraco our your custom code makes a request to the server via the $http
service, Umbraco listens for the x-umb-user-modified
header in the response. In can be used to tell the Umbraco backoffice that the current user has been modified, in which case Umbraco knows that it should refetch the user data.
When the clipboard in local storage is updated
When an editor is opened
When an editor is closed
When all editors are closed
When the language resource file is loaded from the server
When an overlay is opened
When an overlay is closed
When upload of a file starts
When upload of a file ends
When the user presses CTRL + S
When tours are loaded
When user starts a tour
When user ends a tour
When a tour is disabled
When user completes a tour
When loading a tree node fails
When a tree node is removed
When the user is logged out
When user is trying to log in, but have not start nodes
When user is successfully authenticated
When user data is refetched from the server
When the app is initialized
When the toggle is initialized
When the toggle is clicked
When a new row is added
When a new control is added
When the grid is initializing
When the grid is initialized
When a language is deleted
Setting the page title
Available from 8.4.0
For more information see Change title
Setting the title of the page the user is working on is important for accessibility purposes. People using assistive technology need to know what they are maintaining. By setting the page title, people who work with multiple tabs will also find the page they were working on.
To use the directive call:
When the user navigates through the site there is some logic which sets the default page title this is based on:
The current section the user is in
The deployment environment
The original title of the page is based on the section being edited and the host name.
The title to use will then be prefixed to the original title of the page.
To remove the title displayed and revert to the default title, pass in an empty string.