Help Center

Menu

Context object

This utility is only available for Components at Edge.

The context object contains a collection of information about the "context" in which the component is rendering:

  • The current URL,

  • (where applicable) The Content Management Asset ID of the parent of the component.

The context object is accessible through the info parameter of the main function.

Object definition

"ctx": {
    "url": "http://example.com", (1)
    "assetId": "123456", (2)
}
1 Information about the URL which component is being rendering on.
2 (Optional) Content Management Asset ID for the asset the component is being rendered on.

Usage

The following example shows a simple method to use the url and assetId fields.

Read Context asset ID and Context URL for more detailed examples.

export default {
  async main({}, info) {
    const currentAssetId = info.ctx.assetId; (1)
    const currentUrl = info.ctx.url; (2)
    return ` (3)
    <div class="container">
      <h1>My Component Context</h1>
      <p>
        The asset ID is ${currentAssetId}
      </p>
      <p>
        The URL is ${currentUrl}
      </p>
    </div>
    `;
  }
}
1 Retrieve the asset ID of the parent asset of the component.
2 Retrieve the current URL on which the component is rendering.
3 Print out a simple container.

Set editing mode (ctx.editor)

Components can access the ctx.editor boolean attribute within a context object. This attribute indicates whether a component is being rendered in Page Builder’s display mode.

This attribute allows developers to conditionally render different content or behaviour based on whether the component is in either of these states:

  • being edited (in editing mode)

  • being viewed (in standard front-end render mode).

Example usage
if (ctx.editor) {
  // Show editing UI
    } else {
  // Show standard front-end view
}