Sitecore SPEAK 2 – Stage 2- creation of custom component

I had an opportunity to work again with SPEAK 2 and I have got few new tips for you.

If you have not seen yet my previous article – you can (if you are new in SPEAK you should) check it here. You have seen it? – great, we can move forward.

How to create custom component in SPEAK 2

I was looking for the answer for some time and I have found many blog posts which are not up to date – every time when I was trying to run the code, something was wrong. Hopefully my solution will work longer and for everyone ūüôā

Before we will start – remember one thing – location of files and items is extremely important in SPEAK2.

To create custom component you need to prepare following things:

  • item in core database – to define the component
  • cshtml file to define how it looks like
  • JavaScript file to define how it works

Item with definition in core database

In manuals on the internet you will find the information that you can put custom component in the structure tree below your SPEAK application – in this case structure would look like this:

 -- Renderings Folder
 --- Definition of the custom rendering

Probably it would work for SPEAK1 but will not work for SPEAK2. In new version of SPEAK you should put all your components in the place where all predefined components are “/sitecore/client/Business Component Library/version 2/Layouts/Renderings”.

So we are starting from creation of new directory for the component:

Then inside this directory we have to create definition of our component:

As you probably have noticed it is just a “View Rendering”. Inside this item we should define values at least for following fields:

  • Path (path to the file with view)
  • Model (definition of model which we want to use in our view – in my case I took just one prepared by Sitecore)
  • Parameters Template (item with configuration of parameters for the component)

Ok, before we will select value in Parameters Template field we have to create the configuration item – it should be placed below the Custom Component.

Yes it is template and it is a good idea to inherit fields from one of available base templates.

In my case I have selected “ButtonControlBase” template – later you can specify “__Standard Values” item.

Great – we have definition of our component – it is time for some coding.

File with definition of view

Files, exactly as items, should be placed in particular directory. In the case of our component it will be:

\sitecore\shell\client\Business Component Library\version 2\Layouts\Renderings\CustomComponent

Inside this path we can then create CustomComponent.cshtml file with content:

So at the end it will look like this:

Ok, we have our view – it is time for some JavaScript.

File with JavaScript code

JavaScript file should be placed in the same directory as cshtml file.

When we develop new component we should always define “initialize” function which will be called every time when our component will be displayed. We can also define own functions ¬†– like I defined “getTheListOfComponents”.

My function is taking the list of components from the application and then display some html.

As you can see there – I use “Sitecore.Speak” in JavaScript code – it is JavaScript object provided by Sitecore.

Inside Sitecore.Speak you will find a lot of useful functions and properties. Just open your browser console and play with it.

What next?

At this point you should have defined component with some HTML and JavaScript – it means that you should be able to use that component in the same way as others developed and provided by Sitecore.

To test our new component you need to define own application (If you do not know how to do this – check my previous post about SPEAK).

There is one extremely important thing which you have to check before you will put any SPEAK2 component in your application Рconfiguration of the PageCode component. 

Open “Design Layout” for your page and check the properties of “PageCode”. In the field “SpeakCoreVersion” you should have selected value “SPEAK 2-x”.

Now, when we are sure that everything is set properly – it is time to add new rendering to our application.

When your’s component is added – remember to define properly “PlaceholderKey” to be sure that your component will be visible.

In my case it is “ApplicationContent.Main” – but it strongly related to the structure of your application.

As a result you will see your content from the view:

That is cool! But you probably remember that we had also a custom function “getTheListOfComponents” – it is time to use it!

We can call our function from many places – to be honest, from every place where Sitecore.Speak object is available. We just need to use code:

In my example I will use button. Below the custom component I added Button rendering and I set the value “javascript:app.CustomComponent1.getTheListOfComponents()” in “Click” field:

Finally we have component and the button:

When we will click the button – our action will trigger the function from the Custom Component and will display the list of components inside it.

It is alive! What means that you can do with it everything what you want – have a fun ūüôā


Common issue

During development of my custom component I had and error message from Sitecore JavaScript library.

"Uncaught TypeError: Cannot read property 'model' of undefined"

Error was thrown from scSpeakPresenter.js file

More interesting was the fact that this part of code is not called by existing Sitecore components – it is called only when you register own components.

At this level you can also notice that even when we call SPEAK 2 components they are loaded with SPEAK 1 url


It means that we have there routing and behind it we have some code which search for particular files to load all ingredients of the component.

Because of that if you will put your files in wrong directory you will see an error similar or exactly the same which I had – check locations of your files once again. The second option – you forgot about the SpeakCoreVersion setting inside PageCode properties.

Impressions from SUGCON 2017 – Amsterdam

On May I had great opportunity (thank you Coders Center & SoftServe) to took a part in Sitecore User Group Conference in Amsterdam and in this post I will try to explain you why in my opinion it was worth to be there and why I will do everything what possible to be there in 2018.

From the left side: Lukasz Skowronski, Piotr Zadykowicz, Wojciech Urban, Rafal Dolzynski, Robert Debowski, Lukasz Zalewski, Mateusz Wadolowski, Artur Wojno – just a part of our team from Poland.

In general every participant has different impressions. I would say that they can have only good impressions – so do I. Because there was many really great things and it would take too much time to describe all of them, I will tell you what was the best from my point of view.

The Best People

I am starting from people because in my opinion it is the most important to get new contacts and refresh old ones. I had opportunity to talk again with many friends from different countries (greetings for Jason, Una, Tamas) and also get to know well known Sitecore “celebrities” like Kamruz Jaman,¬†Akshay Sura, Robbert Hock and many others. Not too often we have such great opportunity to meet all of them in one place.

The Best Presentations

In these times it is really hard to follow all the things related to Sitecore, sometimes I think that it is even not possible to be up to date with all Sitecore stuff. There is so many new tools, accelerators or just updates done by Sitecore that we need to get knowledge from all possible sources as fast as possible. In my opinion presentations done on SUGCON were so great that they were able to transfer in only 45 minutes knowledge which normally we would gather in few days with reading many available sources.

I will give you an example – during presentation conducted by Dmytro Shevchenko “Sitecore xDB in depth: Harnessing Contacts, Sessions & Clusters” all attendees were able to get to know how exactly work internal mechanisms and locking in xDB. Dmytro gave also many useful advices regarding to work with data from xDB. I am not sure if it is described somewhere in Sitecore documentation but check this photographs:

“Contact lock stages” describes when exactly which data is locked and for how long.

“Concurrency control examples” describes how concurrency in xDB works.

“Scenario 2: Background process” describes how to work with data in the case of contacts import.

You can check Dmytro’s presentation and many others on¬†SUGCON website – here.

The Best Inspiration

Conferences like SUGCON or Sitecore Symposium should not only transfer the knowledge, they should also inspire us to make bigger and greater things and I have to say that I was really inspired with “Robbie – The Sitecore robot”. Check it out here:

Bas Lijten and Rob Habraken did great job and in only 6 months they built real robot which was using Sitecore xDB to store information about “recognized faces” – you have to check that video above – great job Guys!

The Best Party

Let’s be honest – after party everyone can say that his party was the best. Have you ever seen this Heineken commercial:

Yes, the party in the¬†Mirabeau office was similar – trust me. It is also worth to mention that Mirabeau office is also impressive – probably even more than the fridge full of beer ūüôā

And they also have their own robot!

The Best Award

Almost the last point on my list – it was great to get the MVP Award!

The Best Experience

Finally, all previous best “things” make in general the best experience I have had in last few months and definitely I want to be on SUGCON in 2018 – hopefully you will be there as well.


Could not load file or assembly ChilkatDotNet – Email Experience Manager

From time to time, especially when you are setting up new Sitecore environment on local machine or server you probably have some dependencies issues.

My favorite one is error with dependency of ChilkatDotNet. Why it is my favorite? Because even when you have all Sitecore files on place and installed all modern versions of .Net Framework this library still can brake Sitecore application (You can find ChilkatDotNet library inside Sitecore Email Experience Manager).

In the internet you will find some solutions related to Sitecore environments:


But the problem is – they are all about x32 vs x64 bit architecture and used version of chilkatdotnet library – they were not helpful for me.

Enable assembly bind failure logging

I had started to find a way to extend logs to know more about the problem and I found some articles about additional logging mechanisms for assemblies. I decided to enable that in my registry:

DWORD ForceLog set value to 1
DWORD LogFailures set value to 1
DWORD LogResourceBinds set value to 1
DWORD EnableLog set value to 1
String LogPath set value to folder for logs (e.g. C:\FusionLog\)

Unfortunately it did not help for me – I did not find there anything significant (but in general I think that it is worth to know that settings).

You will find more about this here:

Old tool for modern work

After checking everything again I had started search of new solutions for my issue and I found one – Dependency Walker.

On website you will find simple tool which can check details about dll dependencies and display all errors/warnings.

It might looks like this:

As a result of “opening dll” you will see all broken dependencies. You just have to take the name of missing dll file and check from which library it is to add it to the system or directory.

In my case it was missing “Microsoft Visual C++ 2012 Redistributable” – yes, quite old version – I would not ever install this without Dependency Walker.

Hopefully this tool will also save your time as it saved my – enjoy!


Sitecore Data Exchange Framework – diagram

Few weeks ago I had an opportunity to take a look into Sitecore Data Exchange Framework. At first glance it was looking very cool and still it is but I have realized that one thing there is missing. In this post I will provide you something what will help you understand how it works.

If you do not know for what we can do with Sitecore Data Exchange Framework, following definition from documentation should tell you everything:

Data Exchange Framework is designed to facilitate the transfer of data between two systems.

You can find more on documentation page:

In documentation you will find very well described parts of the framework but it can be hard to “connect the dots” right away. That is why I have prepared diagrams – because image is worth a thousands words.

You can use them after/during reading of official documentation.

Standalone pipeline

Pipelines in batch


Diagrams describe how all elements of framework are connected and how they cooperate. If something on the diagrams is not readable then try to open pdf file from here: Sitecore Data Exchange Framework – Diagrams

Sitecore Customer Experience Maturity Model – Stage 3 – Align

In this post we will focus on Align¬†Stage which is Stage 3¬†of Sitecore Customer Experience Maturity Model.¬†It is a third and the last one stage of “Attract” phase.

What does it mean to be on¬†“Align stage”?

Things here are getting complicated. You have more data about your customers, ideas of your marketing department are more and more complex, your business has to align to all needs. This is a key for this stage – you have to find a way to make everyone happy (align digital goals with marketing objectives that drive strategic objectives to achieve a real value across used channels).

Sounds like something impossible – let’s try to make it possible!

Before we will move on to the list of main objectives in Align stage we have to be sure that we understand all things in the same way. So it is time for short glossary.

Short Glossary for IT Guys

Digital Goals - goals strongly related to actions made by users on our website, mobile application etc. For example it can be: sign up for newsletter, complete survey, connect with facebook account.

Marketing Objectives - objectives drive marketing departments. They want to know their clients. They are able to know their clients if they will gather the data/contacts. So in this case for marketing objectives we can give following examples: capture profile data, contact acquisition.

Strategic Objectives - objectives which are crucial for the company. The best possible example can be "Increase revenue".

Strategic Themes - high level objectives which are not define details but general goals for company. For instance it can be: the best quality on the market, lifetime customers, etc.

Authors of “Connect” book define three main objectives of this stage:

  • show how digital goals drive strategic and marketing objectives
  • create an Engagement Value Scale (EVS) – scale which values digital goals to its relative impact on organizational objectives
  • define Key Performance Indicators (KPIs) that measure marketing impact and efficiency as well as the relevance to customers

Ok, ok, wait a second, but what does it mean in simple words? If you are software developer as I am you probably still do not know about what they are talking.

Engagement Value Scale (EVS)

To understand that definition, we should be aware that all objectives and goals are somehow connected. They can be on different level, they can have different value for the company, but they should be identified and should build together strategic theme. In other words it means that, digital goals are ingredients of marketing objectives, marketing objectives are ingredients of strategic objectives and strategic objectives are ingredients of strategic themes Рsimple.

Now if we will check again the definition of EVS we should notice that if we have digital goals we should also have a scale to define which of them are more important from organization point of view.

Keep in mind that values which you will define will have impact for marketing objectives and later for higher levels of the objectives – so values should be proportional to how much that goal contributes in higher level (marketing objective).

Later in the “deep dive” series I will try to describe how to prepare EVS but for now you just should understand what it is.

Key Performance Indicators (KPIs)

You have defined goals with engagement value scale – but, would you be able to say for someone that your activities and marketing strategy brings you more money/value from visit/clients/satisfaction/what is important for you and your clients? You need to have indicators which values will define the scale of your success – all important for you indicators we can close in one definition “Key Performance Indicators”.

With provided by Sitecore “Executive Insight Dashboard” you can measure efficiency of your decisions and actions. You can use for it also different tools or just simple stats – depends on your defined KPIs.

What more we should know?

You already know what Alignment stage is and what you have to understand to move on. But it is not always enough to move to another stage.

Sitecore has prepared Marketing Optimization Matrix (MOM)¬†to help you use better your resources. You can check that topic alone or wait for me – I definitely will talk about this later in “deep dive” series.

If you will feel that you are fluently manage all your goals and objectives, that you have properly set values but you need some better strategy for multiple campaigns – then check MOM immediately. (Marketing Optimization Matrix on

In next article I will write about first stage in “Convert” phase which is “Stage 4 – Optimize”. That name tells us that we will already have really useful tools in our hands but we need to learn how to use it in optimal way.


Please keep in mind that this article is just an overview - later, in next articles or in brand new series I will prepare "deep dive" into digital maturity.

Stay with me, on my blog and learn more together!