Using SPEAK ItemTreeView with an external data source

Question

I want to display an list of folders and images within them as clickable folders that expand and contract within a SPEAK modal page. However these are not items in Sitecore, they need to be loaded from an 3rd party API.

The ItemTreeView seems like the right component to use but looking at the ItemTreeView.cshtml file and the documentation (https://doc.sitecore.net/speak/components/itemtreeview) it doesn't seem to support an external data source and expects and root item path passing into it from Sitecore.

Short of Creating an Custom Data Provider to pull the items from the API into Sitecore I can't think of how best to do this.

Any advice would be appreciated.

Answer 1

Yeah, you are right, ItemTreeView doesn't support external source. I ran into this during imlementing a module where I've overrided a the defoult select rendering dialog but the "TreeViewEx" control is used there. It is a bit different with control that you are going to customize, but the meaning of changes is the same

You actually need to override (my recommendation add your own control based on the existing) some functions at the ItemTreeView.cshtml and at the ItemTreeView.js. You can find them by the following paths:

\sitecore\shell\client\Business Component Library\Layouts\Renderings\ListsAndGrids\TreeViews\ItemTreeView.cshtml

\sitecore\shell\client\Business Component Library\Layouts\Renderings\ListsAndGrids\TreeViews\ItemTreeView.js

As far as I can see ItemTreeView.cshtml is used just for initialize attributes which are subsequently used by the javascript for building the control. You need to debug the ItemTreeView.js and see what is a data a passes to the following method (at the bottom of the file):

_sc.Factories.createJQueryUIComponent(_sc.Definitions.Models, _sc.Definitions.Views, control);

I guess the "control" parameter is the most important for you. The source of the tree should be there. You need to prepare your own source with the same structure and pass the instead.

I can see there are two ways how to prepare data:

1) You can call your api at the CustomItemTreeView.cshtml (that you will be added, for example) and build the source for tree and put that entirely to a data attribute. It is easer way but I am not recommend it as your data can have a large size and it can exceed the limits.

2) You can call your api at the CustomItemTreeView.cshtml and put to a data attributes just values that needs for building tree. Then, at the "CustomItemTreeView.js", You can get those values and build the source use the ajax call.

I've described just an idea how it can be implemented. Some pitfalls can be there. Put a further comments and I will try to help you.

Also you can see the implementation of the treeview that I've added for my module: Recommended Renderings Tree View