Maksym Ponomarenko
Sitecore Consulting

Sitecore SPEAK behaviors

Sitecore Logo

In this blog post I would like to explain how to extend an existing Sitecore Speak component using SPEAK behaviors. To improve a component, you don’t need to change any row of the component’s code or create inherited components. The only thing you need is to set a behavior for the component. So let’s imagine a situation where you need to show a list of items where one field should be shown as a chart, like in the screenshot below:

Sitecore SPEAK

To implement this we need to do a few easy steps: First we need to create a list page and add a standard list control. In this example I will use SearchDataSource as a data source control for the list.

Sitecore SPEAK

Create data items and set the RootItemID property of our data source control to the root item.

Sitecore SPEAK

To simplify my example, items already have fields with json data for the charts.

Sitecore SPEAK

Demo Data Item Template

Sitecore SPEAK

Demo Data Item

Create a ListControl DataSource item with ColumnField child items for the “Name” and “Chart” fields. The “Name” column can be configured in the common way by just setting HeaderText and DataField properties.

Sitecore SPEAK

But for the chart column there is a trick. We need to wrap its value into a tag that can be recognized by our behavior component, as shown below:

Sitecore SPEAK

Now we define the DataSource property and our list control is almost ready.

Sitecore SPEAK

Sitecore SPEAK

Creating Behavior



Behavior’s code

Now we can create the Chart Behavior Component. In your VS create a folder “Behavior” for your component with a .js file “chartBehavior”. In my example I use the jQuery Chart plugging that you can find here: http://www.chartjs.org/ . Download it into the same folder:

Sitecore SPEAK

Here there is the JavaScript code for our behavior:

define(["sitecore", "/sitecore/shell/client/Applications/demo/Components/Charts/lineChartpluggin.js"], function (Sitecore, Chart) {

    Sitecore.Factories.createBehavior("chartBehavior", {
        
        afterRender: function () {
            var self = this;
            var charts = this.$el.find("chart");
            $.each(charts, function () {
                var el = $(this);
                self.setChart(el);
            }); 
        },

        setChart: function (el) {
            var parent = el.parent().get(0);
            var value = JSON.parse(el.text());
            var titles = [],
                values = [];

            $.each(value, function () {
                titles.push(this.title);
                values.push(this.value);
            });
           

            var data = {
                labels: titles,
                datasets: [
                    {
                        fillColor: "rgba(220,220,220,.6)",
                        strokeColor: "#6CD132", 
                        data: values
                    }
                ]
            };


            $(parent).html('');
            var ctx = $(parent).find("#myChart").get(0).getContext("2d");
            var myNewChart = new Chart(ctx);

            var options = { animation: false};
            myNewChart.Line(data, options);
        }
    });
});
Code Explanation:

There are two important areas: 1) To import chart plugin code using RequireJS. 2) All logic is implemented in a method “afterRender”. This method is called automatically by Sitecore Speak, when the component has been rendered. When the ListControl has been rendered as on the picture below, the behavior searches all tags and overrides them.

Behavior’s item
1) Create the “view rendering” item.
Sitecore SPEAK

2) Create a template “ChartBehavior-Parameters” and set the base template to „BehaviorBase“

Sitecore SPEAK

3) Configure the behavior item: a. Set the path property to “/sitecore/shell/client/Business Component Library /Layouts/Renderings/Behaviors/Behavior.cshtml”

Sitecore SPEAK
b. Set the parameters template to “ChartBehavior-Parameters”

Sitecore SPEAK

c. In the “Designer Options” section fill in the “Default Properties” field: i. PlaceHolder: Page.Code ii. PageScriptFileName: path to your Behavior’s .js file iii. Name: chartBehavior

Sitecore SPEAK

d. Add the behavior component to the page and check path to the .js file. Sometimes it can be automatically encoded, so you need to fix it.

Sitecore SPEAK

Now, when our behavior is ready, we need to bind it with the ListControl

Sitecore SPEAK

Bind more than one Behavior

If you need to create more than one behavior for a component, separate their names in the “Behavior” field by a space.

Sitecore SPEAK

Kommentare
Es wurden noch keine Kommentare zu diesem Eintrag geschrieben.
Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar