Florianópolis, SC, Brazil — January 31, 2023 — Arke Systems, today announced that Rodrigo Peplau, Country Head in Brazil has been named a Most Valuable Professional (MVP) in the Technology category by Sitecore®, a global leader in end-to-end digital experience management software. Rodrigo Peplau was one of only 137 Technology MVPs worldwide to be named a Sitecore MVP this year.

Now in its 17^th year, the MVP program recognizes professionals who actively share their fascination, knowledge and expertise with online and offline Sitecore communities to help them best utilize Sitecore products to deliver premier customer experiences.

Selected out of more than 16,000 certified developers and over 30,000 active community participants, the 241 MVPs are truly an elite group. This year’s MVPs were selected by a panel of Sitecore employees for the quality, quantity and impact of the contributions they made in 2022, including the sharing of product expertise and advanced knowledge of the Sitecore platform to support both partners and customers.

 “We’re pleased that for the seventeenth time, we’re honoring experts who have distinguished themselves through their technical acumen and dedication to helping others build great digital experiences,” said Dave O’Flanagan, Sitecore’s chief product officer. “We continue to be impressed by the passion with which the MVPs share their professional and technical expertise and experience with customers and partners. They’re an invaluable asset to the global Sitecore community, and we’re truly grateful for their unique contributions.”

More information about the MVP Program can be found on the Sitecore MVP site: https://mvp.sitecore.com

When you try to do that, the infamous screen “Layout not Set” shows right after saving.

Initially, I observed that when saving in a _Standard Values, but later I noticed it can also happen with ordinary items. If you want to see how to reproduce the error, check this video.

Interesting enough, when you look at your Layout and Final Layout fields in Raw mode, you notice that the Shared Layout has a value such as:

<r xmlns:p=”p” xmlns:s=”s” p:p=”1″><d id=”{FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3}”><r uid=”{597C17AD-DEF3-4947-BE5B-4104A2143F17}” p:after=”*[1=2]” s:id=”{493B3A83-0FA7-4484-8FC9-4680991CF743}” s:ph=”/main/centercolumn/content” /></d></r>

Which seems to have a more appropriate syntax to be in the Final Layout field instead, as you can check if you match this against the original value:

<r xmlns:xsd=”http://www.w3.org/2001/XMLSchema”><d id=”{FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3}” l=”{14030E9F-CE92-49C6-AD87-7D49B50E42EA}”><r ds=”” id=”{885B8314-7D8C-4CBB-8000-01421EA8F406}” par=”” ph=”main” uid=”{43222D12-08C9-453B-AE96-D406EBB95126}” /><r ds=”” id=”{CE4ADCFB-7990-4980-83FB-A00C1E3673DB}” par=”” ph=”/main/centercolumn” uid=”{CF044AD9-0332-407A-ABDE-587214A2C808}” /><r ds=”” id=”{493B3A83-0FA7-4484-8FC9-4680991CF743}” par=”” ph=”/main/centercolumn/content” uid=”{B343725A-3A93-446E-A9C8-3A2CBD3DB489}” /></d><d id=”{46D2F427-4CE5-4E1F-BA10-EF3636F43534}” l=”{14030E9F-CE92-49C6-AD87-7D49B50E42EA}”><r ds=”” id=”{493B3A83-0FA7-4484-8FC9-4680991CF743}” par=”” ph=”content” uid=”{A08C9132-DBD1-474F-A2CA-6CA26A4AA650}” /></d></r>

Sitecore Helpdesk heroes

Then I reported the issue to our amazing Sitecore Helpdesk, who after a couple weeks came out with a bugfix, that now I want to share with our Sitecore Community.

I would like to thank the whole gang of superheroes at Sitecore Helpdesk, for providing this good HotFix in a proper time and allowing me to share it, in special to Igor Denisenko, Pavel Ivashchenko and Ielyzaveta Kalinchuk, the good guys who replied to my ticket. You are awesome, mates!

The cure: HotFix 203387

You can find the hotfix at this link.

• Please be aware that the hotfix was built specifically for Sitecore XP 9.0 rev. 171219 (Update-1)! You should not install it on other Sitecore versions or in combination with other hotfixes unless explicitly instructed by Sitecore Support;
• Note that you need to extract ZIP file contents to locate installation instructions and related files inside it.

If you have anything to add on this, please drop a comment and let me know!

The problem

Take for instance this set of renderings of a certain page:

If in Experience Editor someone tries to delete it:

The result will be a “ghost” orphan item, which will not render when the page loads because its placeholder does not exist anymore.

That rendering will continue at the page rendering, being either forgotten forever or re-appearing when someone tries to add a new Carousel to the same Full-Width Container placeholder.

Not just me

I’ve seen more people concerned with that – such as the author of this question at Sitecore Exchange – and some other people suggested possible solutions.

One approach I tried was to follow this blog post by Mike Tschida and implement a pipeline processor to clean-up the Page Rendering, removing orphan components when the page is saved. That would be perfect, however during development or debugging, it is very common to temporarily move a component to an unexistent placeholder to make it vanish from the page. In cases like that, the component would be deleted, which is not desired.

Acting at the other end

So what if, instead of acting later at the server, we stop content editors at the root of the problem: the Experience Editor? At that case, when an editor attempts to delete a component which has inner components, a prompt like this would be displayed. In order to delete the outer component, the editor now needs to delete the inner components first.

Inspired by this simple Stack Overflow post,  in which the author was looking for a way to simply ask for a confirmation before deleting a component, I ended up with the solution below.

Nip the evil in the bud

The deletion of a component is handled by javascript code located at \sitecore\shell\Applications\Page Modes\ChromeTypes\RenderingChromeType.js – more specifically at the deleteControl method. Our fix will comment out the original code (I will leave there for future reference in case of an upgrade) and add the following code:

    deleteControl: function () {
        var canDelete = this.canDeleteControl(this.chrome);
        if (canDelete === false) {
            alert("Please delete inner controls before deleting this.");
            return false;
        }
        var placeholder = this.getPlaceholder();
        if (placeholder) {
            placeholder.type.deleteControl(this.chrome);
            return true;
        }
        return false;
    },

Along of course with the new canDeleteControl method, which does the trick of verifying if the component attempted to be deleted has inner components.

    canDeleteControl: function (chrome) {
        var canDelete = true;
        var childChromes = chrome.getChildChromes();
        for (var i = 0; i < childChromes.length; i++) {
            if (childChromes[i].type.key() == "placeholder") {
                canDelete = this.canDeleteControl(childChromes[i]);
                if (canDelete === false)
                    break;
            }
            else if (childChromes[i].type.key() == "rendering") {
                canDelete = false;
                break;
            }
        }
        return canDelete;
    },

And that’s all we need! Replace this file in all instances, clean up your browser caches and don’t worry about orphan components anymore!

92 teams participated with members from 26 different countries!

This was our first participation, so we were not sure what to expect. Like any other professional development we execute, we made sure to read all requirements and rules and to strictly obey to everything: deadlines, supporting documentations, Youtube video, the software itself, etc. And yes, that was important, as we’ve seen so many teams being declassified by not following just a small portion of these.

The Go Horse Team

Our team was composed by Anderson Fortaleza, João Amancio Neto and Rodrigo Peplau (myself). We joined together because at that time we were colleagues at Nonlinear Creations in Florianópolis, Brazil. Nowadays João is at Virtual Affairs in Netherlands, and I am working at Nish Tech Inc.

But what exactly is “Go Horse”?

The Go Horse Process is a joke in the form of a software development anti-pattern. Despite everybody knows its practices are not to be followed, the funny part is that at some point in our career, everyone had to “follow” it to deliver in time. Some of its axioms are:

1. I think therefore it’s not Go Horse - In Go Horse you don’t think, you do the first thing that comes to your mind. There’s not a second option as the first one is faster;
   
2. There are 3 ways of solving a problem: the right way, the wrong way and the Go Horse way which is exactly like the first one but faster. Go Horse is faster than any development process you know

These funny principles are pretty self-explanatory and also gives a sense of our mindset for this 24 hours contest: we got no serious ambitions, we were there just for fun, we had to be “pragmatic” but deliver something functional within the deadline.

Choosing the subject

Maybe one of the most important steps, if not the most important, was to select the subject. This step will define if you’ll have a good chance to win or if you’ll fail miserably. The first thing we made was to take our team out of the computer and go to a place where we could brainstorm.

Next, we got to measure our team and the individual skills of each member. Maybe a member of your team masters Azure technologies while other is good at doing SPEAK interfaces. During brainstorming, we wrote down any ideas (bad, good, mild) that came to our mind based on every subject of the contest. We opted as individuals to not be afraid of suggesting dummy ideas, which encouraged the whole team to not be afraid as well. Remember: from stupid ideas, good ones can come forth.

We ended up with the idea of using the Wikipedia API to generate content inside Sitecore, using Data Exchange Framework. Of course, other suggestions came before, but we decided this would be a simple one and easy to execute. One of the team members had already done some integration with Wikipedia’s API before so he was familiar with that. Other member had already implemented some SPEAK interfaces before. What remained? Learning Data Exchange Framework.

Some important things at this stage:

• Avoid spending more than 1 hour to choose your subject. It is a 24 hours competition, and the software itself is only part of the delivery. Every minute is of much importance;
• Don’t be too ambitious. Again, the short time to implement won’t let you much time to refinements. It’s better to deliver something simple but that works, then having to deliver something unfinished or buggy.

Execution: Work distribution and Teamwork

We choose our theme, made sure every team member was comfortable with that. What now? Let’s start to plan the execution. Who is going to do what? You don’t want to have in the middle of the Hackathon somebody in your team uncomfortable with the plan and willing to change everything. It’s the receipt to fail miserably.

In our case, I was already experienced with SPEAK, so I got responsible for the interfaces, which took most of my time. Anderson and João took the responsibility to learn Data Exchange Framework, understand how it works and come up with technical solutions that I would be binding together with the interface. From time to time, we stopped our work for a quick desk check, in a way that the whole team is aligned: I got to understand how the framework works, they got find solutions to our software needs such as how to programmatically trigger data importation.

Take a rest! It’s important

It was also very important to plan and optimize our team member’s presence. 24 hours is a little time to develop a software, but is time enough for people to get tired, and we don’t want everybody sleeping at the same time. So what we did was to plan our rests in such a way that there’s always someone producing. Honestly SPEAKing I tried to sleep but I couldn’t, my mind couldn’t stop scanning all gaps and possible flaws, so I took the time to lay down, rest my body and keep on planning and projecting.

Supporting material

As previously described at this post, the software itself was only part of the whole deliverable. Along with that, we had to prepare 1) Installation instructions (1-2 pages); 2) Module documentation (2-5 pages); 3) A video explaining the module (2-10 minutes). These tasks seems trivial, but they also demand strict attention as they count as much as the software itself. We split these tasks into our team members, each of us doing one of these.

Final touches

When everything was pretty done we still had about 1 hour to deliver, so we concentrate our efforts to revise everything. Members started to check each other’s work: does the documentation makes sense? Is there any typo? Is that covering everything? Is the module installing and working in a vanilla solution? Everything should be well aligned and ready for deployment.

Respect the deadlines!

We ended up uploading our work 20 minutes before the deadline. That is also something extremely important to respect, as the judges are not tolerant to delays. Our friends from the “Works on My Machine” team took more than it should to deliver and had their Dropbox access cut in the middle of the upload, which is frustrating after so many hours of hard work.

Judges Feedback

Since that was our first participation, we were not expecting to win. Surprise, we have been announced the winners, with very flattering feedbacks from the jury.

Main lessons extracted from their feedbacks:

• Choose something with a practical use. It is ok to implement an abstract case study, but if your module have a real life use, it may help judges to understand it, which can potentially call their attention to your team;
• Be respectful to the category you chose. No matter what category you picked, someone have implemented the base software you will work to extend. Respect its principles and best practices, implementing something that creators will be glad to see.

Our module – WikiDX

Resulting module is called WikiDX and is available to download at the Marketplace – check it out!

Next Year?

Now that members of the Go Horse team are not working at the same company, will they be at the next contest? Of course we will! We need to defend our belt and have fun together again! While João is in Netherlands, and thus will have to join us remotely, myself and Anderson are still living at the same city, so we plan to get together for the next effort and repeat the good work.

What would we make different?

We were newbies and didn’t know what to expect. Our preparation was close to zero, we just got our own professional experiences and a lot of curiosity. For the next year we plan to have a better pre-Hackathon preparation: getting familiar to existent categories, getting to know for instance Sitecore on Azure, SXA in deep, etc. But it is also important to keep an eye at the new modules Sitecore launches, as new categories can arise. Data Exchange Framework for instance, was a new category this year, and has been released just a few months before the Hackathon. As a result of this preparation we may end up with a collection of knowledges and code snippets, which could be very helpful to a smoother execution.

This issue has been reproduced in empty (clean) instances of Sitecore 8.1 rev 160302, 160519 and Sitecore 8.2 rev 161221, and has been registered by Sitecore as a bug at their Bug Tracking System with the reference number 101901.

Solution

To resolve the issue, please update the Telerik RTE assemblies to the newer version:

1. Extract the Telerik.Web.UI.dll and Telerik.Web.UI.Skins.dll assemblies into your bin folder (replacing the existing ones);
2. Replace the Telerik.Web.UI.XML file in your bin folder with the attached one;
3. Add the Telerik.Web.UI assembly binding to your web.config:

   <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
    ...
    <dependentAssembly>
    <assemblyIdentity name="Telerik.Web.UI" publicKeyToken="121fae78165ba3d4" />
    <bindingRedirect oldVersion="2015.1.401.45" newVersion="2015.3.930.45" />
    </dependentAssembly>
    </assemblyBinding>
   </runtime>

According to what Sitecore Development Team announced at this community post for why Sitecore adopted PhantomJS:

Content Testing in Sitecore uses the Phantom JS tool for generation of the screenshot image files. In case you didn’t know, Sitecore has had screenshot generation features for quite some time. We use it to generate icons for items that you’ll be listing in the UI like renderings. These icon generation features are based on the System.Windows.Forms.WebBrowser control built into .net. So why did we not use the existing screenshot features for Content Testing? In early testing we found discrepancies with the WebBrowser control. WebBrowser uses Internet Explorer installed on the server where Sitecore is running. But the specific version that it uses isn’t always the latest. There are registry updates one can make to force the appropriate IE version, but this seemed like a big ask of users. This was one of the reasons we chose to use Phantom JS instead.

Cause and Solution

The error in question will show the full path to where Sitecore is looking for PhantomJS. This path is defined at Sitecore.ContentTesting.config, at the entry “ContentTesting.PhantomJS.ExecutablePath”. Start your investigation by checking where your setting is currently pointing to.

By default this setting points to “$(dataFolder)/tools/phantomjs/phantomjs.exe”. If that is your case, check if your Data folder has the PhantomJS executable under that path. If this file is lacking, take a copy from a fresh Sitecore installation (make sure to use the very same revision your site is using).

See also: PhantomJS and security hardening

You can get cockeyed by doing this manually, so of course I looked for a way to automatize it. Ended up discovering this simple powershell script written by Michael West. The only issue with this script is it does touches the files while checking, something I’d never dare doing in production.

I have modified his script so that, instead of touching the files, it takes notes of files that are different than specified by Sitecore’s spreadsheet so one can compare it manually afterwards. Resulting script can be seen at this link.

Multiple roles

But what if you wish to have the same Sitecore installation handling multiple roles? According to Martina Welander, the general recommendation for mixed roles is that, if something must be enabled anywhere, that config must be enabled. Well, while this is not a rule we can trust 100%, still the script is not changing anything and thus it won’t hurt if it does this check.

You can check for multiple roles by adding them separated by commas (Eg: CM, RPT)

In short, to take advantage of CSS styling over SVG files, you must throw the XML content of the SVG file, directly into the HTML markup. So instead of the traditional <img tag:

<img src="image.svg"

You must throw inline the content of the SVG file, which will be something like:

<svg ...> <ellipse class="chair" .../> </svg>

In Sitecore that means you can’t use the standard sc:Image control to render the content of an Image Field – that will render your SVG as an <img HTML tag, which can’t be touched by CSS styling…

Usercontrol

In order to have something that is compatible both with CSS Styling and Sitecore’s Page Editor mode, my proposal is to have a custom asp usercontrol like this:

Image.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Image.ascx.cs" Inherits="Layouts.UserControls.Image" %>
<sc:Image runat="server" ID="scImage" />
<asp:Literal runat="server" ID="litImage"></asp:Literal>

 Image.ascx.cs (Codebehind)

namespace Layouts.UserControls
{
 public partial class Image : UserControl
 {
   /// <summary>
   /// Component's Field
   /// </summary>
   public string Field { get; set; }

   /// <summary>
   /// Component's Item (Default=Context)
   /// </summary>
   public Item Item
   {
      get { return _item ?? Sitecore.Context.Item; }
      set { _item = value; }
   }
   private Item _item;

   protected void Page_Load(object sender, EventArgs e)
   {
     // When editing in Page Editor mode, always use an <sc:image
     // If no field is set, escape and let it break
     if (Sitecore.Context.PageMode.IsPageEditorEditing || string.IsNullOrEmpty(Field))
     {
        ShowScImage();
        return;
     }

     // Escape if field is not found
     var referencedImageField = (Sitecore.Data.Fields.ImageField)Item.Fields[Field];
     if (referencedImageField == null)
     {
       ShowScImage();
       return;
     }

     // Get referenced image - Scape if image is not found
     var imageItem = referencedImageField.MediaItem;
     if (imageItem == null)
     {
        ShowScImage();
        return;
     }

     // If this is not an svg use a normal <sc:Image
     var imageMediaItem = (MediaItem) imageItem;
     if (!imageMediaItem.Extension.ToLower().Contains("svg"))
     {
        ShowScImage();
        return;
     }

     ShowSvgImage(imageMediaItem);
 }

 public static string GetMediaUrlWithServer(MediaItem mediaItem, Item item = null)
 {
    item = item ?? Sitecore.Context.Item;
    var options = new UrlOptions { AlwaysIncludeServerUrl = true, AddAspxExtension = false };
    var itemUrl = LinkManager.GetItemUrl(item, options);
    var mediaOptions = new MediaUrlOptions { AbsolutePath = true };
    var mediaUrl = MediaManager.GetMediaUrl(mediaItem, mediaOptions);
    return itemUrl + mediaUrl;
 }

 private void ShowSvgImage(MediaItem mediaItem)
 {
    litImage.Visible = true;
    scImage.Visible = false;

    // Get string from Image Stream
    var stream = mediaItem.GetMediaStream();
    var reader = new StreamReader(stream);
    var svgString = reader.ReadToEnd();
    reader.Close();
    stream.Close();

    // Get SVG tag from string

    // No SVG tag found - fallback to <sc:Image
    if (!svgString.Contains("<svg"))
    {
       ShowScImage();
       return;
    }

    svgString = svgString.Substring(svgString.IndexOf("<svg",StringComparison.Ordinal));
    litImage.Text = svgString;
 }

 private void ShowScImage()
 {
    litImage.Visible = false;
    scImage.Visible = true;

    scImage.Item = Item;
    scImage.Field = Field;
    ReflectAttributesToControl(scImage); 
 }

 private void ReflectAttributesToControl(WebControl control)
 {
    foreach (string key in Attributes.Keys)
     control.Attributes[key] = Attributes[key];
 }
}

Streaming

The proposed solution makes use of Streaming for better performance, so rendering times are not affected.

How to Use

Now we have our custom image rendering control that renders inline SVG images when you are in Preview or Normal mode, and is compatible with Sitecore’s Page Editor mode.

To use, first you have to register the Usercontrol:

<%@ Register TagPrefix="custom" TagName="Image" Src="~/layouts/UserControls/Image.ascx" %>

Then use it just like you’d do with a standard sc:Image control:

<custom:Image runat="server" ID="imgSvgImage" Field="My Field Name" />

At the code behind you can also access the properties “Field” and “Item” just like the normal Image control:

imgClear.Item = Sitecore.Context.Item;

And that’s all!