Page Builder events

Edit on GitHub Log an Issue

The pattern for consuming Page Builder events in JavaScript, such as within the preview.js component, is to import Magento_PageBuilder/js/events and use the events.on() method to bind to the event you want to handle, as shown here:

1
2
3
4
5
6
7
8
9

define([
    'Magento_PageBuilder/js/events',
], function (events) {
    'use strict';

    events.on("event:name", function (args) {
        // do logic
    });
});

Events list

The following table lists the Page Builder events you can bind to and handle within your content type.

Content Type Events Stage Events
contentType:createAfter stage:childFocusStart
contentType:dropAfter stage:childFocusStop
contentType:duplicateAfter stage:interactionStart
contentType:mountAfter stage:interactionStop
contentType:moveAfter stage:error
contentType:moveBefore stage:{{preview.contentType.stageId}}:masterFormatRenderAfter
contentType:redrawAfter stage:{{preview.contentType.stageId}}:readyAfter
contentType:removeAfter stage:{{preview.contentType.stageId}}:renderAfter
contentType:renderAfter stage:{{preview.contentType.stageId}}:fullScreenModeChangeAfter
contentType:renderAfter stage:{{preview.contentType.stageId}}:viewportChangeAfter
contentType:renderAfter stage:viewportChangeAfter
  stage:updateAfter
   
Column Events Preview Events
column:dragStart childContentType:sortstart
column:dragStop childContentType:sortupdate
column:initializeAfter  
   
Image Events Other Events
image:{{preview.contentType.id}}:assignAfter googleMaps:authFailure
image:mountAfter state
image:uploadAfter {{config.name}}:{{preview.contentType.id}}:updateAfter

Event details

contentType:* events

Events starting with contentType: are triggered for every content type on the stage. These events can also be called for specific content types by prefixing the content type’s name before the event (name:event). For example:

  • text:createAfter
  • row:mountAfter
  • tab-item:mountAfter

contentType:createAfter

1

events.on("contentType:createAfter", function (params) {});
Params Type
id string
contentType ContentType or ContentTypeCollection

Back to top

contentType:mountAfter

ContentType

1

events.on("contentType:mountAfter", function (params) {});
Params Type
id string
contentType ContentType

ContentTypeCollection

1

events.on("contentType:mountAfter", function (params) {});
Params Type
id string
contentType ContentTypeCollection
expectChildren number

Back to top

contentType:dropAfter

1

events.on("contentType:dropAfter", function (params) {});
Params Type
id string
contentType ContentType or ContentTypeCollection

Back to top

contentType:renderAfter

1

events.on("contentType:renderAfter", function (params) {});
Params Type
id string
element HTMLElement
contentType ContentType or ContentTypeCollection

Back to top

contentType:removeAfter

1

events.on("contentType:removeAfter", function (params) {});
Params Type
contentType ContentType or ContentTypeCollection
index number
parentContentType ContentType or ContentTypeCollection
stageId string

Back to top

contentType:duplicateAfter

1

events.on("contentType:duplicateAfter", function (params) {});
Params Type
originalContentType ContentType or ContentTypeCollection
duplicateContentType ContentType or ContentTypeCollection
index number
direct boolean

Back to top

contentType:moveBefore

1

events.on("contentType:moveBefore", function (params) {});
Params Type
contentType ContentType
sourceParent ContentTypeCollection
targetParent ContentTypeCollection
targetIndex number
stageId string

Back to top

contentType:moveAfter

1

events.on("contentType:moveAfter", function (params) {});
Params Type
contentType ContentType
sourceParent ContentTypeCollection
targetParent ContentTypeCollection
targetIndex number
stageId string

Back to top

contentType:redrawAfter

1

events.on("contentType:redrawAfter", function (params) {});

Backend

Params Type
id string
contentType ContentType or ContentTypeCollection

Frontend

Params Type
element HTMLElement

Back to top

column:dragStart

1

events.on("column:dragStart", function (params) {});
Params Type
column ContentTypeCollection
stageId string

Back to top

column:dragStop

1

events.on("column:dragStop", function (params) {});
Params Type
column ContentTypeCollection
stageId string

Back to top

column:initializeAfter

1

events.on("column:initializeAfter", function (params) {});
Params Type
column Column
element Element
columnGroup ColumnGroup

Back to top

image:{{preview.contentType.id}}:assignAfter

1

events.on(`image:${this.contentType.id}:assignAfter`, function (params) {});
Params Type
imageObject File

Back to top

image:mountAfter

1

events.on("image:mountAfter", function (params) {});
Params Type
id string
contentType ContentType
expectChildren number

Back to top

image:uploadAfter

1

events.on("image:uploadAfter", function (params) {});
Params Type
file File

Back to top

stage:{{preview.contentType.stageId}}:readyAfter

1

events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});
Params Type
stage Stage

Back to top

stage:{{preview.contentType.stageId}}:renderAfter

1

events.on(`stage:${this.contentType.stageId}:renderAfter`, function (params) {});
Params Type
stage Stage

Back to top

stage:interactionStart

1

events.on("stage:interactionStart", function (params) {});
Params Type
stageId string

Back to top

stage:interactionStop

1

events.on("stage:interactionStop", function (params) {});
Params Type
stageId string

Back to top

stage:{{preview.contentType.stageId}}:fullScreenModeChangeAfter

1

events.on(`stage:${this.contentType.stageId}:fullScreenModeChangeAfter`, function (params) {});
Params Type
fullScreen boolean

Back to top

childContentType:sortStart

1

events.on("childContentType:sortStart", function (params) {});
Params Type
instance ContentTypeCollection
originalPosition number
ui JQueryUI.SortableUIParams

Back to top

childContentType:sortUpdate

1

events.on("childContentType:sortUpdate", function (params) {});
Params Type
instance ContentTypeCollection
newPosition number
originalPosition number
ui JQueryUI.SortableUIParams
event jQuery.Event

Back to top

stage:error

1

events.on("stage:error", function (params) {});
Params Type
error Error

Back to top

stage:{{preview.contentType.stageId}}:readyAfter

1

events.on(`stage:${this.contentType.stageId}:readyAfter`, function (params) {});
Params Type
stage Stage

Back to top

stage:{{preview.contentType.stageId}}:masterFormatRenderAfter

1

events.on(`stage:${this.contentType.stageId}:masterFormatRenderAfter`, function (params) {});
Params Type
renderedOutput string

Back to top

stage:updateAfter

1

events.on("stage:updateAfter", function (params) {});
Params Type
stageId string

Back to top

stage:childFocusStart

1

events.on("stage:childFocusStart", function () {});
Params Type
None  

Back to top

stage:childFocusStop

1

events.on("stage:childFocusStop", function () {});
Params Type
None  

Back to top

stage:viewportChangeAfter

Triggered on viewport changes in the Admin stage. Handle this event to control in your content type’s widget (widget.js) for cases in which your content type is rendered on the Admin stage from within a Block or Dynamic Block. In these cases, Page Builder loads your widget, not the preview component, to the Admin stage. This means that your widget as to make changes to your content type when users change the viewports on the stage.

1

events.on(`stage:viewportChangeAfter`, function (args) {});
Args Type
viewport string
previousViewport string

Back to top

stage:{{preview.contentType.stageId}}:viewportChangeAfter

Triggered on viewport changes in the Admin stage. Handle this event to control responsive changes to your content type from within your preview component.

1

events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, function (args) {});
Args Type
viewport string
previousViewport string

Back to top

state

1

events.on("state", function (params) {});
Params Type
state DataStore

Back to top

{{config.name}}:{{preview.contentType.id}}:updateAfter

1

events.on(`${this.config.name}:${this.contentType.id}:updateAfter`, function (params) {});
Params Type
contentType ContentType

Back to top

googleMaps:authFailure

1

events.on("googleMaps:authFailure", function () {});
Params Type
None  

Back to top

© 2021 Adobe. All rights reserved.