Tailwind Logo

Introducing Headless SXA

Experience Manager (XM)Headless SXAXM CloudNext.js

Published: 2022-12-14

Sitecore has launched Headless SXA, the headless version of the Sitecore Experience Accelerator's web components. These components are available in Sitecore XM 10.3, allowing users with existing Sitecore subscription licenses to utilize them seamlessly.

What is Sitecore Experience Accelerator ?

Sitecore is a collection of Sitecore components that has been available since Sitecore 8.1. The previous versions were based on ASP.NET MVC, which is a useful component to use when launching a website.

Some of the features with respect to this component are,

  • Standard components provide navigation and other general functions
  • Drag-and-drop component placement if you have page design permissions
  • Having multiple display formats for components makes it possible to create different looking components with the same data structure
  • HTML structure and style sheet definitions can be partially added in Sitecore

The same functionality can now be implemented as a headless CMS. In order to enable the same functionality to be implemented as a headless CMS, we have decided to provide a headless version.

Components offered

The components offered are as follows. First is the media.

components01.png

The basic component is capable of displaying images. Two patterns of images are provided: normal image display and display as background. Next is the navigation.

components02.png

Linked lists and navigation are provided. The link list is suitable for use with lists of new news and other information. The navigation component is used to create links within the site, such as headers and footers.

Then the page content.

components03.png

There are four components, but for page content and title, the data defined in the basic fields of the page can be displayed. Promo is a data template that combines images and descriptions, and Rich Text allows you to add fields that can contain HTML.

Finally, page structure.

components04.png

Splitters are used to separate the elements of a page into top, bottom, left, and right. As for containers, they are useful for allocating space or defining an area, such as placing some component within it.

Data folder

Folders are also provided to manage data that you want to share among pages as component data.

components05.png

The items can be managed separately by component. Page-specific data is stored in the form of items in the Data folder, which is a subfolder of items, but items under this Data folder can be reused.

Summary

In this issue, we introduced the features of the newly released Headless SXA. Basically, as with the existing SXA, it is possible to create the missing parts while keeping the basic functions in check.

Tags