Sitecore Speak Components: Part1

Posted 11/08/2016 by Yogeshwer Sharma

Recently I started learning Sitecore speak and found many of blogs/tutorials about Sitecore speak. I am sharing the information that I have built so far with Sitecore speak and few of the properties of components which is not easily available on internet to save your time.

My application needs data templates in the tree to start. So I started finding about treeview control in Speak and found three types of treeview components: 

  1. FilteredTreeview
  2. ListManagementTreeView
  3. ItemTreeView

I added ItemTreeview in my speak application and with the default properties I can able to see a content tree with two nodes

If you want to show the complete tree then you can open the properties by double clicking on the component.

Change the ShowHiddenItems property to true and save the properties 

Now you can see complete content tree on your speak applications 

There are a few properties which we can apply to improve the user experience –

  1. RootItem - If you want to show the tree with only specific node like in my case I just wanted to show Data Template Tree then provide nodeID/ItemID in RootItem field.

    In this example I have provided Templates (/sitecore/templates) node Id in RootItem field. Now we can see only the items under the Templates node in our ItemTreeview.

  2. IsCheckboxEnabled – By default we can see checkbox with each node if you want to remove the checkboxes from node and want to use node select functionality then Make this field False.

    How it will look like on application page (Without checkboxes) now you  need to click on node to select any item or node – 

  3. SelectMode – If you want to control your selection to specific items or specific node then you can use this property. It provide three types of selections -
    1. Enter “1” only one node can be selected at a time. Selecting a node deselects any node that was already selected.
    2. Enter “2” multiple nodes can be selected but child node will not be select.
    3. Enter “3” multihierarchal – child nodes are selected when a node is selected and multiple node selection is also possible.

In next part of this series we will learn few more properties of this component and also we will learn how to get and set values from code. 


Add your comment