Tuesday, March 21, 2017

Sitecore User Group - BeLux session recap and a future sesion

Since June 2014, we have been hard put at keeping the Sitecore User Group for Belgium and Luxembourg alive, kicking and interesting (in whatever order).

Over the course of that time, we have had some very interesting speakers and sessions.

If you have never visited us, I can highly recommend each and every session.

You can find general information on the Meetup platform here:
https://www.meetup.com/Sitecore-User-Group-Belgium/


What's next?

 

The next session will be focussing on;
  • SUGCON Recap: http://www.sugcon.eu/
  • Sitecore Cloud with Azure PaaS
  • Sitecore Experience Accelerator - hands-on
We are finalizing the agenda but if you need more information, please follow here for more information on the location, specific agenda details and the various speakers:

https://www.meetup.com/Sitecore-User-Group-Belgium/events/238460208/

Previous sessions

 

With regards to previous sessions and the presentations, we tend to make these available on the platform. However, since the meetup platform no longer supports file-hosting, information is now spread across the following pages:

Older sessions: https://www.meetup.com/Sitecore-User-Group-Belgium/pages/22666793/Files_and_Presentations/

Recent sessions: https://www.meetup.com/Sitecore-User-Group-Belgium/files/

If there are any questions, if you are interested in hosting a future session or wish to present a topic yourself, do please reach out and contact us.

Friday, March 3, 2017

Sitecore and Microsoft - An Azure story



Kind reader, perhaps a small introduction might just suit this blogpost perfectly. What exactly is Azure and the cloud as a whole? I know that for most of you readers, the following information is nothing more than a lesson in history and may even very well be within your set of active knowledge. Worst case, you can skip it altogether and jump right into the next paragraph. 

So, what is Microsoft Azure?

Not so long ago, and here and there the following scenario still stands, a typical website or application was hosted on internally hosted machines per company. Big companies tend to have centralized IT departments and data centers to secure and manage their IT infrastructure through meticulously defined processes and monitoring. Smaller companies need to fend for themselves while making due with the tools and budgets available to provide the best server maintenance as possible. And typically, web servers are not exactly put at the top of the priority list.
 
In both cases, the IT department is tasked with the painstaking task of maintaining servers to have up to date software and hardware. This often makes IT a liability or blocking factor for continuous business development.

Enter Cloud based platforms such as Azure. The idea behind these platforms is simple enough; Move the overhead and workload of the IT departments from inside of the (often departmental) companies and outsource them to specialized data centers. When talking about cloud, 3 acronyms come into play; IaaS, PaaS and SaaS. These cloud models are explained below by highlighting the differences between what you manage and what is managed for you.



I will not go into any more detail on what Microsoft Azure has to offer. If you need more information, I advise to read their documentation on https://docs.microsoft.com/en-us/azure/ and any other resource available online.

Now that we have set the stage on Azure it is time to give some history and evolution on how Sitecore has been reaching out to Microsoft to incorporate this way of managing your IT services.

Sitecore and SaaS

 Software as a Service takes all the previous mentioned things to an even higher level. You basically subscribe to a specific product that runs on Azure and simply use it.
Sitecore has no SaaS solution or offering. But if they did, it would behave (kind of) like this: you subscribe to a Sitecore SaaS and choose your type of solution (for example a CM with two CD’s) and you would start developing, content creation and what more directly on that platform. Without doing deploys or module installations. On top of that, the SaaS solution would allow you to opt-in or out of specific functionalities and modules and would ensure that you (and any SaaS user) are always on the latest version of the platform.

But just to be clear; Sitecore has (at the moment of writing) no solution for SaaS, nor have they shown any interest in the creation of such a solution.

Sitecore and IaaS

Since Infrastructure as a Service gives you the same access as you would have on any on premise machines, there is little to no difference for the hosting of your application environment. This implies that it is generally beneficial to move into Azure hosting as it gives flexibility for machine scaling as well as a pricing that is based on the actual server usage.

Sitecore and PaaS

The story becomes entirely different once you move into Platform as a Service. In a side by side comparison, obviously PaaS would win over IaaS anytime. As it makes an abstract of all layers of your hosting environments except for your own application and data. However, that same abstraction obviously removes some flexibility that we have become accustomed to when using on premise or IaaS. Since Microsoft is in charge of the runtime, OS and middleware, any changes and settings that get changed outside of your dedicated application and data environment are reset whenever Microsoft performs an update or reboot of the system.
A number of solutions exist for Sitecore and PaaS and there is quite some history around them.

The PaaS Hybrid solution

It might be good to briefly touch on this solution before we dive into the other solutions that are available. Hybrid means that the different Sitecore roles are placed on different cloud models. Generally the CM (content management) environment is placed on IaaS whereas the CD (content delivery) environments are hosted in PaaS. The means as to how the deployments, provisioning and configurations can be handled are described by Sitecore in more detail.

The Sitecore Azure module

On December 2011 – Sitecore released a first version of their Azure module. This module was to be installed as any Sitecore module into your internal Content Management environment combined with a Sitecore Azure environment file. It offered the following Azure capabilities: Cloud Service, Storage Service, SQL Databases Service, Traffic Manager Service, and Cache Service. 

Through the interface, a number of hosting locations allowed for the creation of an Azure Content Delivery Environment:



The overall idea behind this module was sane, but it came with some overall flaws and early product problems. First off, not all existing modules were supported by the Azure PaaS model. And furthermore, even newly created modules were not guaranteed to be PaaS enabled.

You can check the entire list here: https://kb.sitecore.net/articles/880886
Another problem was that the module had some issues with SQL Azure, especially when upgrading and deploying. 
A number of issues have been listed here: https://doc.sitecore.net/cloud/81/azure/using_sitecore_azure/troubleshooting_sitecore_azure ...as this list is quite extensive, I chose not to go into detail on this.
 
Bottomline: Great idea but not to good in real life projects that need to run really smooth and have error-free deployments

So, even though this approach to PaaS seems like a sure win, keep in mind that to any solution there still is an amount of effort that needs to be performed. And certain implementations and modules will simply not yet be suited for the PaaS architecture. That simply is the tradeoff between self-managed and provided services.

Sitecore with pure PaaS

Sitecore has now opened up a new chapter by introducing Microsoft Azure’s PaaS solution with Web Apps. As this is a venture the stepped in to together with Microsoft, you can expect to see a whole lot of high-value seminars and webinars coming your way on this topic.



What is so different and what does this offer?
  • No longer restricted to a number of predefined configurations
  •   Full flexibility to use ARM templates to provision the environments of your choice
  • Fast and Easy deployment  through web deploy with
  • Based on Azure best practices allowing for flexibility and ease of scaling
  • Development improvements through streamlined deployments, remote debugging and advanced application insights
Ideally, as is the idea with any and all of the Azure solutions, this should over time not only reduce your overall development cost but also reduce your hosting cost. Opening more budget to analyze and develop all those features requested by the business department.
For more specific information on the Sitecore cloud solution, go here: https://doc.sitecore.net/cloud
And a fantastic document by Pieter Brinkman on the benefits listed above, with more detail on the solution and Web Apps right here: https://www.sitecore.net/en/company/blog/489/five-reasons-why-microsoft-azure-web-apps-and-sitecore-are-a-match-made-in-heaven-4415
Want to know how to go forward from here and use the ARM templates? Then head on over to the getting started section here: http://www.sitecore.net/getting-started/deployment/sitecore-on-azure

 

Any pitfalls?

As this is a new solution, there is still a steep learning curve. And yes, you will need to know more on Azure then we used to know before. But that it turn will give more flexibility and ability to manage that same cloud environment.

However, some things still need some clarifications I guess:
  • How will licensing keep up with this? If I don’t have a Consumption based license, will I be able to use this?
  • A number of possible solutions still exist on where configurations per environment should be stored. It is good that multiple solutions exist rather than being unable to perform that task, but it would be even better if only a single solution was preferred and put forward as best-practice.
  • The sample ARM templates still need to be expanded on to cover heavier topologies. As this approach will become more globally adopted and more knowledge gets retained, this will go away
  • A number of solutions are still not able to run in the PaaS solution:
    • ExM
    • WFFM
    • FxM
However, Sitecore is well aware of this and will be releasing updates to these modules to make sure that they match up with the new solution.
 It is good to see that Sitecore and Microsoft are working together so closely both from a development and architectural point of view. This synergy will really help to reach out into the future and serve faster, more scalable top of the line enterprise solutions.

Tuesday, January 31, 2017

Sitecore MVP's announced for 2017

Hi all,

just a small message since I am honored to call myself Sitecore Technology MVP for 2017.




My congratulations to all fellow MVP's that made it to the list in 2017!
I'm looking forward to sharing ideas, concerns and research with you all.

See you somewhere in Las Vegas, Usergroups and any of the online and offline platforms that help us share and care!

Wednesday, September 14, 2016

Sitecore MVP Summit 2016 - Day 2

Welcome into a humble recap of the second MVP Summit day. 



A beautiful second day that took place at a unique location, more specifically the NOLA Motorsports Park. As the information that is shared to the attending MVP’s is mostly confidential and should under no circumstances be shared publicly it is challenging to disclose what the summit is actually all about.
The MVP Summit aims at providing first-hand information, concepts and new product development into the various types of MVP’s present. This allows for Sitecore receive early feedback and insights which can help to further streamline new or existing product features.

A while back, Sitecore promised that they would adapt their product development strategy to better fit the requirements set forward by the actual customers as well as technology and feature requests from the user base and developers.

And most of the topics offered in this second day of the MVP Summit proved exactly that. No gigantic new features and functionalities but rather a number of development and integration accelerators that will help you with your actual digital project.

Sitecore is not shying away from adopting new Microsoft technologies and even has to hold off from time to time in order for Microsoft to pick up the pace and help realize the Sitecore vision. Different aspects were covered in the various sessions; Architecture, Hosting, Cloud solutions, Integrations and even the whole Habitat/Helix approach were openly discussed.

And to further prove that Sitecore is set on listening for feedback and the customer’s buy-in for their product approaches, with regards to documentation, product development, training, personalization, commerce and so on, there were a set of round-table discussions prepared. These allow for partners and customers alike to share their view on the product, challenge Sitecore with product requirements or known issues in a face-to-face discussion with both peers and Sitecore Product owners alike.

As mentioned, MVP’s are not allowed to share all received information, but what we are able to share is that Sitecore is still becoming a stronger, more matured product that holds a strong promise. The promise of offering a large toolkit, numerous strong and competitive functionalities as well as a product that is built by a highly motivated and innovative team that has opened up to its user base tremendously over the last years.


A big thanks goes out to all the people at Sitecore that helped make the MVP summit possible. It was an unforgettable experience that has prepped us for the Sitecore Symposium that is coming in the next 3 days.

Tuesday, September 13, 2016

Siteocre MVP summit 2016 - Day 1

Sitecore MVP Summit 2016 – Day 1



This year’s Sitecore MVP Summit is being hosted in New Orleans for the second time in a row. An ideal opportunity for dedicated Sitecore users and developers that have earned the title of MVP in the past year to help set the roadmap for the upcoming year. It also offers a unique opportunity to get a firsthand insight into what the product wants to evolve into and what the overall roadmap is for the upcoming releases.

As a technicalical MVP, I am attending the Summit with our Digital Strategy MVP - Thomas Danniau. We are are currently at the MVP Summit to make sure that every aspect that holds significant value to our new and existing customers is taken in and properly evaluated.

As the information that is disclosed on the summit is mostly under NDA, MVP’s are not allowed to share any specific details on the product’s next features or overall roadmap. So, we’re afraid that is not what we are able to share with you on this blog post.

However, what we can share though is that Sitecore has been good at work to further establish a strong MVP user base. This means, that there is a very strong group out there that holds Sitecore’s interests close at heart and helps companies that consider or have chosen Sitecore as a CMS to make the right decisions and help them optimize their digital business.

This year’s summit kicked off with an insight into the types of MVP’s as well as their origin. Turns out that the MVP’s hail from 19 different countries and make up for a total of 142 experienced and driven Sitecore specialists. These consist of 9 Ecommerce MVP’s, 22 Digital strategists and approx. 110 Technical MVP’s.

As I mentioned, most if not all, information shared on the summit is not meant to be shared so I cannot provide you with an overview on all the topics handled on this first day?

However, it is fair to say that Sitecore understands the need for a thoroughly documented system and will keep on investing there.The same can be said about  E-commerce, which is an undeniable web strategy that Sitecore is determined to take on head-first.,

And Sitecore, as any strong and self-sufficient product, is challenging itself as a product on both a feature and implementation level. This means that they look for customers and developers alike to provide feedback that can help to streamline the product even more.


This, as was the case with the MVP Summit in 2015 holds a lot of promise for the future of the products and we are already excited about what 2016/2017 will bring.

Friday, September 2, 2016

Sitecore Symposium 2016 - New Orleans


So, in one week time from now, the Sitecore MVP Summit is upon us. Starting on September 12th, we have two days of intense collaboration and feedback planned for us. Following closely is the already sold-out Sitecore Symposium which is also taking place in New Orleans 2016.

I'll be posting that which can be released under NDA on my blog when possible and in the extent possible :)

Hope to see many of you there and let's mingle for a full week of New Orleans Sitecore madness.

Kind regards.

Wednesday, August 3, 2016

Sitecore Speak - Hands-on and how-to expand the Experience Editor

Mild introduction


A while back, we hatched the idea to create a new Marketplace module based on our experience and the feedback of editors with regards to content management in sites that are both heavy on amount of hosted sites and the available languages.
All of that and much more detailed information with regards to the EasyLingo module can be found on Gert Gullentops blog here: http://ggullentops.blogspot.be/2016/08/easylingo.html

However, the first version only featured an integration into the Content Editor as a new bar in your editing pane of the selected item.
We decided to up our game a little and introduce our new functionality into the Experience Editor.

My first idea was that this would go rather smoothly, because, let's face it, all I had to do was look at how Sitecore does it now and find a way to display the same HTML we were already rendering into the Content Editor. So, how hard could it be?

Note that I have no (zero) experience on creating or using Speak components offered by or through Sitecore.

First steps and approach

My first, somewhat naive idea was to go into doc.sitecore and find the tutorial, how-to or whatever that would guide me into realizing my goal. Turns out that the doc.sitecore site is either really good at hiding that kind of information or (as it might turn out), my searching skills are well below par.

My next idea was to go into stackexchange or the community and look for someone who had had the same challenge before him/her and learn from that. Unfortunately, the same conclusion as mentioned above applies here.

I then decided to dive head first into the Sitecore Core DB, all the relevant DLL's and the config files.
This last approach was the one that got me there in the end, but not without some pitfalls and concerns on how I had to approach this issue. As well as some support from, well..., Sitecore support. (Thanks Andrey Krupskiy)

Inspecting Sitecore Speak as-is

I decided to have the added functionality displayed in a control bar. Much in the same way as the Navigation Bar is shown as a control in the Experience Editor. So, in theory, if I would look into the core and find out how this one is configured I should be able to derive what to do next.
And that is where I got stuck the first time. Turns out that Sitecore still supports Sheer UI next to Speak, but Speak is enabled by default. This means that everything you find in the core definitions on the ribbons are configured to handle both scenarios...
And that is where my confusion set in... I noticed that on the Core configuration item for the navigation bar, there was a command defined onclick : "webedit:toggletreecrumb".
However, everything this command referred to based itself on Sheer UI. And all the HTML that I was inspecting in the frontend of my Sitecore dummy project was rendering Speak controls.

So, just to be clear: Everything worked out in the end. And with the information below I hope to provide ample insight in how you could go ahead and (ab)use the Speak functionalities to get your own speak interface up and running.

Step by Step guide

I've tried to walk through this step by step without makeing too many awkward jumps. I'll try to summarive at the bottom to give insight on which items/files/configs are required to go forward.

Showing the toggle button on the View chunk of your ribbon

First things first; we needed this bar to be toggled on and off. Exactly like any of the other (optional) bars. To do this:

  1. Navigate to the Core database
  2. Navigate into: /sitecore/content/Applications/WebEdit/Ribbons/WebEdit/View/Show
  3. Create (or copy) a new "Small Check Button" 
  4. Ignore the Click property, but do fill in the Header, Tooltip & ID value (smells like best practice doesn't it)
  5. Modify the Rendering (raw values) to adhere to the code block below:

<r>
<d id="{FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3}">
 <r 
  id="{BDE651C9-7988-4950-8E01-EA80106563A2}" 
  par="
   Click=trigger%3abutton%3acheck&amp;
   Command=YOUR-JS-COMMAND&amp;
   RegistryKey=%2fCurrent_User%2fPage+Editor%2fShow%2fYOUR-BARNAME&amp;
   PageCodeScriptFileName=%2fsitecore%2fshell%2fclient%2fSitecore%2fExperienceEditor%2fCommands%2fYOUR-JS-FILENAME.js&amp;
   PostponedCall=0" 
  uid="{7996FBF1-10B4-457F-B2CD-E120559F08DC}" 
 />
</d>
</r>

Not on the above, obviously you can choose whichever path you see fit for the JS file as well as the registry key you choose to work with.

Making the toggle button actually work

The above made sure you got a checkbox that will be able to toggle your bar in and out of the experience editor. But it is time to hook up that JS file and show some first bar to render.

Let's start with creating the JS file we just referred to from our toggle button:

define(["sitecore", "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"], function (Sitecore, ExperienceEditor) {
  Sitecore.Commands.YOUR-JS-COMMAND =
  {
    canExecute: function (context) {
      context.app.YOURRIBBONBAR.set("isVisible", context.button.get("isChecked") == "1");
      context.app.setHeight();
      return true;
    },
    execute: function (context) {
      ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.ToggleRegistryKey.Toggle", function (response) {
        response.context.button.set("isChecked", response.responseValue.value ? "1" : "0");
        response.context.app.YOURRIBBONBAR.set("isVisible", response.responseValue.value);
        response.context.app.setHeight();
      }, { value: context.button.get("registryKey") }).execute(context);
    }
  };
});


The above JS can now be executed successfully but doesn't have any clue on what to toggle visible as we have not yet defined the YOURRIBBONBAR anywhere.. Time to head back down into the Core db of Sitecore.

  1. Navigate to the Core database
  2. Navigate into: /sitecore/client/Applications/ExperienceEditor/Common/Layouts/Renderings/Ribbon/
  3. Create a new Folder: YOURBAR
  4. Create a new "View Rendering" in the newly created folder.
  5. Fill in the Path field with a reference into your cshtml file, which forexample could be here:
    /sitecore/shell/client/Sitecore/Speak/Ribbon/Controls/YOURBAR/YOURBAR.cshtml
The cshtml file is simply the place where you register your control:

@using Sitecore.Mvc
@using YOURNAMESPACE
@model Sitecore.Mvc.Presentation.RenderingModel
@Html.Sitecore().Controls().YOURBARCONTROL(Model.Rendering)

Now, in order for this control to be rendered, you need to create the control extension class:

using System.Web;
using Sitecore.Diagnostics;
using Sitecore.Mvc;
using Sitecore.Mvc.Presentation;

namespace YOURNAMESPACE
{
    public static class ControlsExtension
    {
        public static HtmlString YOURBARCONTROLEXTENSION(this Controls controls, Rendering rendering)
        {
            Assert.ArgumentNotNull(controls, "controls");
            Assert.ArgumentNotNull(rendering, "rendering");
            return new HtmlString(new YOURBARCONTROL(controls.GetParametersResolver(rendering)).Render());
        }
    }
}

And in turn, this control extension class requires a (duh) control to render:

using System.Collections.Generic;
using System.Web.UI;
using Sitecore.Diagnostics;
using Sitecore.ExperienceEditor.Speak.Caches;
using Sitecore.ExperienceEditor.Speak.Ribbon;
using Sitecore.Globalization;
using Sitecore.Mvc.Presentation;
using Sitecore.Web;
using Sitecore.Web.UI.Controls;

namespace YOURBARNAMESPACE
{
    public class YOURBARCONTROL : RibbonComponentControlBase
    {
        public YOURBARCONTROL()
        {
            InitializeControl();
        }

        public YOURBARCONTROL(RenderingParametersResolver parametersResolver)
            : base(parametersResolver)
        {
            Assert.ArgumentNotNull(parametersResolver, "parametersResolver");
            InitializeControl();
        }

        protected virtual IList<ComponentBase> Controls { get; set; }

        protected void InitializeControl()
        {
            Class = "sc-YOURBARCSS";
            DataBind = "visible: isVisible";
            ResourcesCache.RequireJs(this, "ribbon", "YOURBAR.js");
            ResourcesCache.RequireCss(this, "ribbon", "YOURBAR.css");
            HasNestedComponents = true;
            Controls = new List<ComponentBase>();
        }

        protected override void PreRender()
        {
            base.PreRender();
            Attributes["data-sc-itemid"] = RibbonDatabase.GetItem(WebUtil.GetQueryString("itemid")).ID.ToString();
            Attributes["data-sc-dic-go"] = Translate.Text("Go");
            Attributes["data-sc-dic-edit"] = Translate.Text("Edit");
            Attributes["data-sc-dic-edit-tooltip"] = Translate.Text("SOME TOOLTIP.");
            Attributes["data-sc-dic-treeview-tooltip"] = Translate.Text("SOME VIEW TOOLTIP");
        }

        protected override void Render(HtmlTextWriter output)
        {
            base.Render(output);
            AddAttributes(output);
            output.AddAttribute(HtmlTextWriterAttribute.Class, Class);
            output.AddAttribute(HtmlTextWriterAttribute.Id, "YOURBARCONTENT" + Attributes["data-sc-itemid"]);
            output.RenderBeginTag("nav");
            output.RenderBeginTag(HtmlTextWriterTag.Div);
            output.AddAttribute(HtmlTextWriterAttribute.Style, "display=none");
            output.RenderEndTag();
            output.RenderEndTag();
        }
    }
}

As you can see. this control in itself hardly does anything at all. It just renders some Nav tag and applies a display=none to a div the is included. But the magic start to happen here when it, in the InitializeControl method registers your final (phew, are we almost there?) JS and CSS files that will handle the actual bar content generation.

So.... That was easy wasn't it? All we had to do is register some things, make some classes and bam, we have...
well nothing really at this point...

We still need to define what is to come in our JS file and make sure we are able to call our backend code. And remember that View Rendering we created? We still need to make sure that gets used somewhere from Sitecore.

Bringing all the final block together

Let us start of with doing the last modification we need to do in the Core database to make sure that our ViewRendering is displayed correctly.

  1. Navigate into the Core database
  2. Navigate into this item: /sitecore/client/Applications/ExperienceEditor/Ribbon
  3. Go into the Renderings field of this item
  4. Add a reference to your ViewRendering ID

<r id="VIEWRENDERINGGUID HERE"
 par="Id=YOURRIBBONBAR&amp;IsVisible=0" 
 ph="PageEditBar.Content" 
 uid="{45348FD9-3458-4284-B0E1-18153E3516B5}" />

The 'ph' (placeholder) can remain the same, just make sure to refer to the right ViewRendering and create a unique uid (untested what happens if it is not unique, but lets play safe)...

And finally only a few steps remain. The sample of YOURBAR.JS and how to call your own business logic through Speak calls.

YOURBAR.JS as stored under ...sitecore\shell\client\Sitecore\Speak\Ribbon\Controls\YOURBAR:

define(
  [
    "sitecore",
    "/-/speak/v1/ExperienceEditor/RibbonPageCode.js",
    "/-/speak/v1/ExperienceEditor/ExperienceEditor.js"
  ],
function (Sitecore, RibbonPageCode, ExperienceEditor) {
    Sitecore.Factories.createBaseComponent({
        name: "YOURRIBBONBAR",
        base: "ControlBase",
        selector: ".sc-YOURBAR",
        attributes: [
        ],

        initialize: function () {
            document.RIBBONBARCONTEXT = this;
            window.parent.document.RIBBONBARCONTEXT = this;
            var mode = ExperienceEditor.Web.getUrlQueryStringValue("mode");
            this.model.on("change:isVisible", this.renderRIBBONBAR, this);
            ExperienceEditor.Common.registerDocumentStyles(["/-/speak/v1/ribbon/YOURBAR.css"], window.parent.document);
        },

        renderRIBBONBAR: function (itemId) {
            if (!itemId
              || typeof (itemId) == "object") {
                itemId = this.$el[0].attributes["data-sc-itemid"].value;
            }

            //Do some business logic
            this.requestBusinesslogic(itemId, this);

            //Build HTML
            var htmlSource = "<div class=\"sc-YOURBAR\">";            
            ... Do whatever here ...            
            htmlSource += "</div>";

            //Assign HTML to bar div
            var barContent = ExperienceEditor.ribbonDocument().getElementById("YOURBARCONTENT" + this.$el[0].attributes["data-sc-itemid"].value);
            barContent.innerHTML = htmlSource;
        },

        requestBusinesslogic: function (itemId, appContext) {
            var context = ExperienceEditor.generateDefaultContext();
            context.currentContext.itemId = itemId;
            ExperienceEditor.PipelinesUtil.generateRequestProcessor("YOURSPEAKCOMMAND", function (response) {
                appContext.SOMERESPONSEVALUEVARIABLE = response.responseValue.value;
            }).execute(context);
        },
    });
});

I have purposely not included the CSS file to which I refer... This depends on a case by case scenario so it has no added value in placing it here. You surely spotted all the css class references throughout the code by now, so that should be clear in itself.
Css files are stored under: .\sitecore\shell\client\Sitecore\Speak\Ribbon\Assets\Generated

So, that kind of concludes the various steps needed to get this additional bar rendered. One last (somewhat optional) step remains and that is the part where we actually call the backend through a Speak command

Speak Commands from JS

The block below is the JS part that actually uses the context to call the Speak command through a given context that can be set up with a variety of parameters.

requestBusinesslogic: function (itemId, appContext) {
    var context = ExperienceEditor.generateDefaultContext();
    context.currentContext.itemId = itemId;
    ExperienceEditor.PipelinesUtil.generateRequestProcessor("YOURSPEAKCOMMAND", function (response) {
 appContext.SOMERESPONSEVALUEVARIABLE = response.responseValue.value;
    }).execute(context);

This "YOURSPEAKCOMMAND" needs to be registered into the Sitecore speak config and this is done here:

<sitecore.experienceeditor.speak.requests>
      <request name="YOURSPEAKCOMMAND" type="YOURNAMESPACE.SPEAKCOMMANDCLASS, YOURDLL" />
</sitecore.experienceeditor.speak.requests>

And the commandclass definition:

using Sitecore.ExperienceEditor.Speak.Server.Contexts;
using Sitecore.ExperienceEditor.Speak.Server.Requests;
using Sitecore.ExperienceEditor.Speak.Server.Responses;
using Sitecore.Globalization;

namespace YOURNAMESPACE
{
    public class SPEAKCOMMANDCLASS : PipelineProcessorRequest<ItemContext>
    {
        public override PipelineProcessorResponseValue ProcessRequest()
        {
            if (RequestContext.Item == null)
            {
                return new PipelineProcessorResponseValue { AbortMessage = Translate.Text("The target item could not be found.")};
            }
            var stuff = SomeClass.DoSomething(RequestContext.Item);
            return new PipelineProcessorResponseValue { Value = stuff };
        }
    }
}

Do note that Sitecore ships with a whole lot of available SpeakCommands that you are free to call. This offered set is already very rich and diverse so check it out first before you start to make your own specific command. Although, in a lot of cases, this will prove to be the only way.

Summary

I honestly hope the above helped you either create your own bar of extra piece of Experience Editor Speak based component or has at least tought you on the different steps that may be needed and the skills required to develop this.
It was a much rougher patch then I initially expected but it worked out in the end and I have to say that I like the Speak calls especially. There is something clean about doing those very distinct, single-purpose calls into your backend that I liked.

But the list of files that were required to be changed or created is quite lengthy:
  • ShowXBar.js
  • XBar.js + XBar.css (or at least in most cases)
  • XBar.cshtml
  • ControlsExtension to register your XBarControl
  • XBar.cs
  • ShowXBar Sitecore item checkbox control
  • XBar Viewrendering control
  • Ribbon item to visualize the XBar

And why did I start calling everything XBar here? I'm not really sure, just call me chaotic.
Kind regards and thanks for the read.