List of JavaScript lifecycle events
All lifecycle events are described below, separated by page category. Note that there is one special event that fires only once at the beginning of the application website's load, cdm-app:ready.
These custom events fire at the document level, which means you can subscribe to the document itself. The CONTENTdm application provides a CustomEvent() object during the application and page render lifecycles. The details within the function are the custom data or the function to be executed.
Note: Refer to JavaScript and CSS examples for additional customizations.
Application
cdm-app:ready - Available once the application is ready to use; the earliest time point in the application lifecycle.
Example:
document.addEventListener('cdm-app:ready', function(e){
// application ready to use
// e is instance of CustomEvent
});
Home page
The home page is the default page of a CONTENTdm site that appears at the bare URL and at the /digital/ path. This event class is used for the built-in home page and a custom HTML home page.
| Event class | Description |
|---|---|
cdm-home-page:enter |
The home page is about to be entered, but has not yet rendered. |
cdm-home-page:ready |
The home page is ready to use. |
cdm-home-page:update |
The home page state is updated (e.g., a user navigates to the next/previous page of collection cards). |
cdm-home-page:leave |
The user is about to exit the home page. |
Example:
cdm-home-page:enter
document.addEventListener('cdm-home-page:enter', function(e){
// e is instance of CustomEvent
// ...
});
Search page
The search page renders at the /digital/search/ path. This event class is fired only when the search's collection scope spans more than one collection.
| Event class | Description |
|---|---|
cdm-search-page:enter |
The search page is about to be entered, but has not yet rendered. |
cdm-search-page:ready |
The search page is ready to use. |
cdm-search-page:update |
The search page state is updated. |
cdm-search-page:leave |
The user is about to exit the search page. |
Example:
cdm-search-page:enter
document.addEventListener('cdm-search-page:enter', function(e){
// e is instance of CustomEvent
// ...
});
Collection search page
The collection search page is a single-collection scope search. If the search is modified to have two or more collections, then a different event class will be triggered (cdm-search-page).
| Event class | Description |
|---|---|
cdm-collection-search-page:enter |
The collection search page is about to be entered but has not yet rendered. |
cdm-collection-search-page:ready |
The collection search page is ready to use. |
cdm-collection-search-page:update |
The collection search page state is updated. |
cdm-collection-search-page:leave |
The user is about to exit the collection search page. |
Example:
cdm-collection-search-page:enter
document.addEventListener('cdm-collection-search-page:enter', function(e){
// e is instance of CustomEvent
console.log(e.detail); // {collectionId: '...'}
// ...
});
Advanced search page
| Event class | Description |
|---|---|
cdm-advanced-search-page:enter |
The advanced search page is about to be entered, but has not yet been rendered. |
cdm-advanced-search-page:ready |
The advanced search page is ready to use. |
cdm-advanced-search-page:update |
The advanced search page state is updated. |
cdm-advanced-search-page:leave |
The user is about to exit the advanced search page. |
Example:
cdm-advanced-search-page:enter
document.addEventListener('cdm-advanced-search-page:enter', function(e){
// e is instance of CustomEvent
// ...
});
Collection landing page
| Event class | Description |
|---|---|
cdm-collection-landing-page:enter |
The collection landing page is about to be entered, but has not yet rendered. |
cdm-collection-landing-page:ready |
The collection landing page is ready to use. |
cdm-collection-landing-page:update |
The collection landing page state is updated. |
cdm-collection-landing-page:leave |
The user is about to exit the collection landing page. |
Example:
cdm-collection-landing-page:enter
document.addEventListener('cdm-collection-landing-page:enter', function(e){
// e is instance of CustomEvent
console.log(e.detail); // {collectionId: '...'}
// ...
});
Item page
| Event class | Description |
|---|---|
cdm-item-page:enter |
The item page is about to be entered, but has not yet been rendered. |
cdm-item-page:ready |
The item page is ready to use. |
cdm-item-page:update |
The item page state is updated. |
cdm-item-page:leave |
The user is about to exit the item page. |
Example:
cdm-item-page:enter
document.addEventListener('cdm-item-page:enter', function(e){
// e is instance of CustomEvent
console.log(e.detail); // {collectionId: '...', itemId: '...'}
// ...
});
Custom page
The custom page events are triggered only on pages whose URL contains /custom/. If you have replaced the home page or a collection landing page with a custom HTML file, those pages will use the cdm-home-page and cdm-collection-landing-page event classes instead.
| Event class | Description |
|---|---|
cdm-custom-page:enter |
The custom page is about to be entered, but has not yet been rendered. |
cdm-custom-page:ready |
The custom page is ready to use. |
cdm-custom-page:update |
The custom page state is updated. |
cdm-custom-page:leave |
The user is about to exit the custom page. |
Example:
cdm-custom-page:enter
document.addEventListener('cdm-custom-page:enter', function(e){
// e is instance of CustomEvent
// ...
});
About page
| Event class | Description |
|---|---|
cdm-about-page:enter |
The about page is about to be entered, but has not yet been rendered. |
cdm-about-page:ready |
The about page is ready to use. |
cdm-about-page:update |
The about page state is updated. |
cdm-about-page:leave |
The user is about to exit the about page. |
Example:
cdm-about-page:enter
document.addEventListener('cdm-about-page:enter', function(e){
// e is instance of CustomEvent
// ...
});
Login page
| Event class | Description |
|---|---|
cdm-login-page:enter |
The login page is about to be entered, but has not yet been rendered. |
cdm-login-page:ready |
The login page is ready to use. |
cdm-login-page:update |
The login page state is updated. |
cdm-login-page:leave |
The user is about to exit the login page. |
Example:
cdm-login-page:enter
document.addEventListener('cdm-login-page:enter', function(e){
// e is instance of CustomEvent
// ...
});
Not found page
| Event class | Description |
|---|---|
cdm-notfound-page:enter |
The not found page is about to be entered, but has not yet been rendered. |
cdm-notfound-page:ready |
The not found page is ready to use. |
cdm-notfound-page:update |
The not found page state is updated. |
cdm-notfound-page:leave |
The user is about to exit the not found page. |
Example:
cdm-notfound-page:enter
document.addEventListener('cdm-notfound-page:enter', function(e){
// e is instance of CustomEvent
// ...
});
Saved Items page
| Event class | Description |
|---|---|
cdm-saved-items-page:enter |
The saved items page is about to be entered, but has not yet been rendered. |
cdm-saved-items-page:ready |
The saved items page is ready to use. |
cdm-saved-items-page:update |
The saved items page state is updated. |
cdm-saved-items-page:leave |
The user is about to exit the saved items page. |
Example:
cdm-saved-items-page:enter
document.addEventListener('cdm-saved-items-page:enter', function(e){
// e is instance of CustomEvent
// ...
});
Shared Items page
| Event class | Description |
|---|---|
cdm-shared-items-page:enter |
The shared items page is about to be entered, but has not yet been rendered. |
cdm-shared-items-page:ready |
The shared items page is ready to use. |
cdm-shared-items-page:update |
The shared items page state is updated. |
cdm-shared-items-page:leave |
The user is about to exit the shared items page. |
Example:
cdm-shared-items-page:enter
document.addEventListener('cdm-shared-items-page:enter', function(e){
// e is instance of CustomEvent
// ...
});