Saturday, May 14, 2016

Sitecore SPEAK MultiSelectList - Getting it to work

In my SPEAK application I wanted user to be able to select multiple options in a list. Sitecore SPEAK ListControl can be extended to be able to use it as a checkbox list / multiselect list. In this blog post I am explaining the workings of MultiSelectList control which is an extension of Sitecore SPEAK ListControl

  1. You need to first add a ListControl on your Sitecore page and a MultiSelectList component as shown below 

  2. Configure the ListControl "Behaviour" property as "MultiSelectList". Note: This is irrespective of the name / id of the control you have added in the first step. 

  3. This basically extends ListControl capabilities and make some of the additional functions available to your Javascript page code such as
        • checkItem(item)
        • checkItem(itemId)
        • checkItems(array of items)
        • checkItems(array of itemIds)
        • uncheckItem(item)
        • uncheckItem(itemId)
        • uncheckItems(array of items)
        • uncheckItems(array of itemIds)
  4. You would first bind the List control Items property under Data Bindings to the datasource component Items property (e.g. {Binding DataSource.Items})

  5. Now you would have a situation where you have all the items (original source) shown in the list and user selected option somewhere else that you are receiving perhaps by calling an Item web APIs OR entity service APIs. To ensure that you show the selected items appropriately you need ensure that the list control has items in the first place (i.e. data source has retrieved items from Sitecore). Here is how you do it

  6.  app.DataSource.on("change:hasItems", function () {
                    for (var i = 0; i < entity.UserSelectionsList.length; i++) {

  7. Her is how it looks like

Documentation for MultiSelectList control can be found here