Editor integration using metadata

This topic describes the metadata-based integration of Angular applications with the SitecoreAI Page builder. The Page builder uses the metadata provided by the layout service for placeholders, renderings, and fields to identify them and enable visual editing directly in the browser.

The following diagram illustrates the architecture of integrating a Content SDK Angular app with the Page builder:

The architecture of integrating a Content SDK Angular app with the SitecoreAI Page builder using metadata.

Important

Certain header configurations restrict the loading of iframes that can prevent metadata integration from working. For example:

Setting the X-Frame-Options header to "SAMEORIGIN".
Setting the Content-Security-Policy header to "frame-ancestors 'self'".

To avoid this issue, ensure your response headers allow the Pages domain to load the response inside an iframe, either by adjusting these settings or adding exceptions as needed.

API routes

The Angular Content SDK sample application uses two routes for the editing support:

The Render API route, /api/editing/render, handles GET requests via the editing-render-middleware, initialized by createEditingRenderMiddleware() in src/server.ts. This route processes the editing data in the incoming editing request and prepares it to be correctly handled by Angular routing.
The Config API route, /api/editing/config handles GET requests via editing-config-middleware, initialized by createEditingConfigMiddleware in src/server.ts. This route helps Pages identify the type of editing host it works with.

See Angular middleware for more information.

Sitecore editing secret

The Sitecore editing secret is a token for securing the Sitecore editor endpoints exposed by the Content SDK Angular apps through the middleware.

The middleware handler automatically validates the token. If validation fails, it returns a response with the HTTP status code 401.

Understanding data editing in Content SDK Angular

A GET request made by Pages to the render API route contains the required query string parameters to render a given page route.

The SitecoreClient uses those query string parameters to fetch editing data. The editing data contains the layout data necessary for rendering the page.

The following represents an example GET request to the editing render endpoint when using metadata-based integration:

/api/editing/render?secret={EDITING_SECRET}&sc_site=my-app&sc_itemid=54C8E9B5-0B2C-5363-8FA6-D32A3A302F51&sc_lang=en&route=/&mode=edit&sc_version=latest&sc_variant={VARIANT_ID}&sc_layoutKind=shared

sc_layoutKind is an enum with a default value of final, but it can be set to shared instead if needed.

The sc_version, sc_variant, and sc_layoutKind parameters are all optional.

If you have suggestions for improving this article, let us know!