Placeholders in Content SDK apps
A placeholder is a special component included with Content SDK. When added to the app's root component or another component, a placeholder creates a named placeholder key. You can use this key to dynamically place other components registered with Content SDK in the corresponding placeholder.
Placeholders enable editors to alter a page's layout. The contents of placeholders are determined by how content authors and editors have structured the page layout.
Conceptually, a placeholder is similar to a <div/> tag with child elements, where each child is a component or a static component tree.
Placeholders can be nested, meaning components can have placeholders, not just at the root. A common example of this might be a hierarchy like main (placeholder) > Tabs (component) > tabs (placeholder) > Tab (component).
Content SDK app development generally involves designing a placeholder-component hierarchy and implementing each component. Content SDK implements this architecture differently depending on the underlying framework.
Placeholder naming considerations
Choosing meaningful placeholder names can enhance the maintainability of any Content SDK app.
Consider the names of placeholders carefully when assigning them and follow these best practices:
-
Prefix placeholder names with an app-specific prefix. For example, instead of
content, usemyapp-content. This is important because an SitecoreAI instance can host multiple Content SDK apps and websites, and it is best to avoid conflicting placeholder names. -
Choose a name that describes the general purpose of the placeholder and avoid jargon.
-
Assign a user-friendly display name for each placeholder. Using a placeholder on a route is enough to register it. However, adding a display name makes your app more intuitive for authors. Display names do not need to be unique.
Varying root placeholders by page template
Sometimes, it might be necessary to render different root placeholders depending on the page type.
Because components can return different elements conditionally, this can be achieved easily by returning different components based on the value of props.layoutData.sitecore.route.templateName or props.layoutData.sitecore.route.templateId.