Sitecore Speak ItemTreeView Multiple RootItem Handling

Hi Folkes,

Recently I am working on Sitecore Speak application, where I am stuck in a situation where requirement is to provide multiple source for the ItemTreeView which is not supported by OOTB. If you are not aware about ItemTreeView the from here you can go through with the documentation.

Generally ItemTreeView is used to show the tree structure in Sitecore Speak Application, it have various parameter for control over the tree like one is 'RootItem' which is responsible for 'The ID of the Sitecore item the ItemTreeView control starts from.', but this control only support one 'RootItem', So bt using below solution you can handle multiple 'RootItem' seprated by '|'. Here we go:

Step 1: Duplicate the existing ItemTreeView component : For doing the same you need to follow below steps:  

1. Navigate to  'core:/sitecore/client/Business Component Library/version 1/Layouts/Renderings/Lists and Grids/ItemTreeView' and respective view file '\sitecore\shell\client\Business Component Library\Layouts\Renderings\ListsAndGrids\TreeViews\ItemTreeView.cshtml' and create a duplicate copy as per your convince like 'ItemTreeViewNew'.
2.  Once you done from above steps delete the 'ItemTreeView Parameters' Item from this location 'core:/sitecore/client/Business Component Library/version 1/Layouts/Renderings/Lists and Grids/ItemTreeViewNew/ItemTreeView Parameters' as duplicate item still point to the old ItemTreeView Parameter item in 'Parameter Template'.
3. Also keep in mind ''core:/sitecore/client/Business Component Library/version 1/Layouts/Renderings/Lists and Grids/ItemTreeViewNew' update the path field to the new .cshtml file like: '/sitecore/shell/client/Business Component Library/Layouts/Renderings/ListsAndGrids/TreeViews/ItemTreeViewNew.cshtml'

Step 2: Add Multiple RootItem Logic

Comment the original line:
//var rootItemId = userControl.GetString("RootItem");

Add our new logic:
var rootItemIds = userControl.GetString("RootItem").Split('|');
var rootItemId = rootItemIds.FirstOrDefault();

Step 3: Handle other RootItem Logic: At the bottom of page paste below code:

@{
var lstAttributes = new List<HtmlString>();
for (var i = 1; i < rootItemIds.Length; i++)
{
rootItem = null;
if (!string.IsNullOrEmpty(rootItemId))
{
rootItem = database.GetItem(rootItemIds[i], Language.Parse(contentLanguage));
}
if (rootItem == null)
{
rootItem = database.GetRootItem();
}

rootItemIcon = Images.GetThemedImageSource(!string.IsNullOrEmpty(rootItem.Appearance.Icon) ? rootItem.Appearance.Icon : "Applications/16x16/documents.png", ImageDimension.id16x16);
userControl.SetAttribute("data-sc-rootitem", rootItem.DisplayName + "," + rootItem.Database.Name + "," + rootItem.ID + "," + rootItemIcon);
userControl.SetAttribute("data-sc-rootitempath", rootItem.Paths.Path);
lstAttributes.Add(userControl.HtmlAttributes);
}
}

@foreach (var htmlAttr in lstAttributes)
{
<div @htmlAttr>
<ul></ul>
</div>
}

After doing above steps you can pass multiple RootItem by separate by '|', So tree looks like below:






I hope you enjoy this Sitecore blog. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)


Please leave your comments or share this article if it’s useful for you.