Reading time: 7 min read
XM Cloud: Sitecore Components Overview
What is Sitecore Components and why we should use it
What is Sitecore Components?
Sitecore Components or perhaps “Components” is new feature / module that is part of Sitecore’s XM Cloud platform.
It’s a brand new offering, not a rebrand of existing functionality. And there is nothing even close to it in the pre-XM Cloud offerings from Sitecore (i.e. Sitecore XP 9, 10).
So what is it?
It is very distinct SaaS offering exclusive to Sitecore that could be more specifically classified as Front-End As A Service (FaaS or FEaaS). A high-level it does the following:
- Provides low-code, visual way to create new components for Sitecore (think banners, carousels, product lists, etc)
- Allows mapping of content / data into these components from any source with an endpoint
- Components are then available in XM Cloud (via Sitecore Pages) for authors to add to pages and templates
With Components it’s been stated that Sitecore is “trying to build the best visual builder in the world” and it definitely looks quite innovative and promising. Let’s dig into to how it works and what it looks like.
Sitecore Components: It’s A Front-End As A Service
Front-End As A Service (FaaS) is a relatively new concept in web development that offers a more efficient and convenient way to build the front-end of a website or application.
Instead of developing components from scratch, FaaS provides the ability to leverage elements from your design system and extend pre-built components that can be customized and integrated into a site.
Being able to integrate content from any source and being able to build high quality components with less code are two of their key advantages.
They’re popular in eCommerce for storefronts, but you can imagine how much more useful they’d be when allowed to serve the needs of content managers. And this is where XM Cloud’s Sitecore Components really differentiates itself in the space.
Sitecore Components: Features
Let's look at the features of Sitecore Components with some screen caps to help illustrate how the actual software works.
Supports Content From Any Source
Three methods are supported for getting data to Sitecore Components:
- Static JSON: Copy and paste JSON to be used. This could be used to mock up data or hard-code content well keeping a separation between layers.
- REST: An HTTP request supporting Method, URL & Headers which can be used to access most APIs available.
- GraphQL: This is queryable API that allows to request the information we need and ask more specific questions of our endpoint.
You can create as many data sources from multiple primary sources, mix and match sources across components and perhaps more interestingly scope them and most interestingly scope the data sources to a specific uses cases.
For example you could create a data source for news, for people, for popular content and then allow creators to build whatever UX they need for the components.
Map Source Data Directly Into Components
In this example, we’re looking at a Contentful as a data source.
The Image Block references the the URL property retrieved from Contentful and maps it
to the Image Source field which is rendered as part of the component.
The entire data structure from Contentful available for use. You can see how easy it would be to create a
Type field in the component and map it to CONTENTTYPE.
Map Collections Of Data
The Card component repeats because it’s mapped to a collection. A collection is
array of data returned from a data source. In this case the Card is referencing
INCLUDES[].ASSET where each instance ASSET renderer a new Card.
Control Layout & Styling
In the menu bar for an element, note we’re within the Section component (I may use component and element interchangeably) that is one level up in the hierarchy from the Card.
The Section shows a ribbon that allows us to:
- Configure Attributes: For functional elements of the component, like how many items should we display, show paging be turn on our off.
- Adjust Layout & Alignment: For structural elements of the component including layout & alignment, dimensions & spacing.
- Pick Element Style: For visual treatment changes like background colors, button treatments that you’d associate with CSS.
In the screenshot provided could say how columns, column widths, horizontal & vertical alignment can all be managed.
Compose Feature Rich Components From Multiple Components
As your build components / elements, you can nest & combine them to make increasingly more sophisticated components.
In the screenshots in the last section, you can see a composition of a Heading, Section, Card being used to create this real-world Speaker Line-Up feature.
To say it another way - create elements based on your design system and compose them into rich functionality and then map content into into your UI from data sources. A very powerful approach.
Combining Multiple Content Sources In A Single Component
With multiple sources for content (for example Sitecore, Content Hub, Contentful, and Newswire) you can do some innovative things.
If we wanted to build an Upcoming Events component we could set up:
- Sitecore Data Source: Content for component heading and introductory description.
- CVent Data Source: Gets 12 upcoming events managed by the global events team (popular SaaS event management platform).
- Social Media Source: Gets 6 related posts and images by hashtag.
The team can leverage these sources, map their data into Card & List components, sprinkle in a Banner or Heading component and have created a very compelling component with relative ease.
Integrated Into Sitecore Pages
As no surprise, you can see anything created in Sitecore Components is integrated into Pages and available to be added / dragged and dropped into into a page on your site in Sitecore XM Cloud.
Sitecore Components: Impact for Websites?
It feels like we can do new things. Sitecore XM Cloud is of course an enterprise headless CMS. When we say headless, we can always think decoupled. This is a level of decoupling and composition at the component level that didn’t exist before.
FWIW - with SXA components could be created without code but they were tied to Sitecore’s CMS and rendered on the server side (apologies to JSON Renderings in SXA, they’re data-only).
Sitecore Components FaaS is making me reconsider the following things:
- Design Systems: Thinking and building in design systems will continue to be a winning strategy and is great fit for Components. Think small, build big.
- Think API First: Establish the the API data sources at the beginning of the project, decoupling them from component development lifecycle, allowing them to be available to everyone when needed.
- Different Skill Sets: Every time you eliminate a task for a developer, a new one pops up using a more efficient technology. Depending on our adoption and implementation of Components, you could find people with lower-tech but more visual skillsets adding value to your project.
- Less Content Consolidation: Before the era of composability (and perhaps hyper-composability that they’re looking at here) the was always strategic emphasis put on consolidating your content into a single CMS or platform. With modern APIs and Sitecore Components as our FaaS, this allows us to consolidate at the page or component level instead of the CMS level.
Closing Thoughts
Sitecore Components is a new product I’m quite excited about. It’s easy to see the use case and value. Front-End As A Service appears to here along with a new level of composability. It comes across as a big-tent, welcoming more options data sources into the ecosystem. While at the same going low-code, which creates an even bigger tent.
Will it be a panacea? A no code nirvana? Time will tell. But it appears to be a proper next-generation SaaS tool that fits nicely in our new composable world.
If you’re looking for help evaluating, consulting our implementing Sitecore Component please reach out and ask for me.
Image Attribution
The screenshots in this article are screen caps from videos posted by Sitecore folks on Sitecore Slack and YouTube. A special thank you to Jason St-Cyr for putting together the YouTube version.