Go to the homepage
Powered bySitecore Search logo
Skip to main contentThe Creating Branch Templates | Sitecore Accelerate for Partners page has loaded.

Creating Branch Templates

The developer workflow to create a new branch template

Last updated: Oct 1, 2024

Problem

Within XM Cloud sometimes your content authors will have a requirement to create multiple items which have a predefined consistent structure. Authors need to be able to create these items quickly and efficiently while maintaining this structure. As a developer how can you support this requirement.

Solution

This is where branch templates in XM Cloud come in to address these common challenges in content management and site development:

  1. Consistency: When creating similar items (e.g., product pages, news articles, landing pages), branch templates ensure a consistent structure. Content authors can follow predefined guidelines, resulting in a cohesive user experience.
  2. Efficiency: Branch templates allow authors to start with a pre-configured structure, saving time and effort. Instead of manually setting up each item, they duplicate the template and customize specific details.
  3. Initial Field Values: Unlike standard values (which apply to all items based on a data template), branch templates copy initial field values into each created item. This is useful for setting default values or customizing specific fields.
  4. Access Rights: Branch templates can include predefined access rights. When creating items, authors inherit these permissions, ensuring proper security settings.
  5. Multiple Item Creation: Authors can insert multiple items at once using branch templates. For instance, creating a set of related pages (e.g., FAQs, team bios) becomes more efficient.

Modules

When setting up a new branch template we need to make sure a headless module has been created to hold our new template. This module should have been created during the creation of your site collection and site items. See the Creating a Site recipe for more details.

How to create a branch template

  1. In the Template Manager or the Content Editor, go to /Sitecore/Templates/Branches/Project/Your module name, right-click this folder and then click Insert, Branch Folder to create the required project-specific folders.
  2. In the content tree, click the relevant project-specific folder and insert a new branch template definition item using the /System/Branches/Branch data template.
  3. With the newly created branch template definition item selected, right-click and insert one or more items or hierarchies of items.
  1. Navigate to the SXA Link List component /sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Navigation/LinkList
  2. Right click the item navigate to Scripts and click Clone Rendering.
Screenshot showing cloning of link list
  1. Provide a rendering name and select the location of our module.
Screenshot showing clone dialog general tab
  1. Select Make a copy for both Parameter and Datasource dropdowns.
Screenshot showing clone dialog parameters tab
Screenshot showing clone dialog datasource tab
  1. Click proceed and when complete click close.
Screenshot showing clone dialog done message

Now in the in our project templates folder we have a number of items for the cloned Link List including branch templates. We need to add some structure here and move items around to help keep things organized.

Screenshot showing project templates
  1. Create some template folders to help keep our items organized. Right click the site collection name click Insert then select Template Folder.
Screenshot showing template folder dialog
  1. Name this folder Components.
Screenshot showing template folder name dialog
  1. Right click components click Insert and add another template folder named Navigation.
Screenshot showing created navigation template folder
  1. Move the following items within the Navigation template folder.
    • /sitecore/templates/Project/Sites For Accelerate/Accelerate Link List Folder
    • /sitecore/templates/Project/Sites For Accelerate/Link List
    • /sitecore/templates/Project/Sites For Accelerate/Link
    • /sitecore/templates/Project/Sites For Accelerate/Rendering Parameters
Screenshot showing created navigation template folder items
  1. Move the Link List_2 branch template into the branch templates folder. I have already created a Navigation branch folder to organize our items.
Screenshot showing created branch template folder items
  1. Finally rename the Link List_2 item.
Screenshot showing renamed link list item

If you navigate to the rendering created for the link list you will notice that it has an integrated GraphQL query to return the child items.

Screenshot showing integrated graphql query

Within the existing LinkList.tsx component notice that fields have been created that match the shape of the integrated GraphQL query being returned from the layout service.

interface Fields { data: { datasource: { children: { results: ResultsFieldLink[]; }; field: { title: TextField; }; }; }; }


Please note there are OOTB Rendering Content Resolvers that can also be used to return child items to reshape the layout service.

Screenshot showing context item children resolver

© Copyright 2024, Sitecore. All Rights Reserved