grunt build with compass fails on some environments, how I fix it

As I have mentioned in my first post here, I will write also about other things not only Sitecore, as in my daily work I do work with other things too.

So, let’s get into it.

Sometimes I need to build in my local environment the frontend project that my colleagues create in order to make small changes/adjustments or test the backend work much better.

And one some project, true, some old ones I was getting this error when building with grunt the project :

Warning: Running "compass:dist" (compass) task
Warning: not found: compass Use --force to continue.

I have tried many things on my environment to fix this and seems that a combination of things let to fix this problem, so now I can build old frontend projects:

  1. Un-install all versions of Ruby from the working computer
  2. Install latest version of Ruby into the Windows machine with the option “Add Ruby executable to your PATH” selected and then restart the computer
  3. Install Compass and Sass on your computer. Open command prompt and run the following commands:
      1. gem update --system
        gem install compass
        gem install sass
        
  4. Update compass in your project with this command from inside your project dir
      1. npm install grunt-contrib-compass --save-dev

I hope it works for you.

Good luck.

How I have used Sitecore SignalR

On a existing Sitecore project I had to use SignalR for a page to facilitate real-time update of the information for all the visitors/users that were interacting with that page.

Indeed I turned to Sitecore SignalR module and used as resources other blogs/websites that wrote about the subject:

Everything looked great, I’ve build my page with my entire functionality, getting to the point where I needed the username of the visitor of my page/site. Since my website is protected with ADFS Authentication, I had to protect the SignalR hub and to pass authentication information to clients. Then I’ve used this, from the official documentation, and I’ve changed the code from InitializeSignalR.cs where before the line

args.App.MapSignalR(Settings.SignalR.Path, new HubConfiguration());

I’ve added

GlobalHost.HubPipeline.RequireAuthentication();

And as for the username, I’ve save it into a cookie on the page load of the component that has the SignalR functionality, and then I’m using it into the JS functionality of my SignalR functionality.

Then, since our implementation will be residing on couple of servers that were behind a LoadBalancer, and it was needed that the messages distributed by SignalR to get to all clients so SignalR Scaleout with SQL Server was needed. I’ve used the documentation from here, as follows:

  1. Created a new empty database. The backplane will create the necessary tables in this database.
  2. Added an extra NuGet package to your application:
  3. Added the following code to InitializeSignalR.cs to configure the backplane:
    • var connection = System.Configuration.ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString;
      GlobalHost.DependencyResolver.UseSqlServer(connection);
      
  4. Then Enable Service Broker and give proper permisions to the database for the user used in the connection string as it explains further in the documentation.

I’ve added the entire file InitializeSignalR.cs into a Gist

Recompile your code, and you should be all set.

Sitecore 8 fixes from Sitecore Support

This year I have worked quite a lot with Sitecore 8 Update 1 and I have ended up in some situations that I had to write to Sitecore Support in order get help, but in most cases there was just fixes that they had to provide.

I will provide here a list with the fixes that I’ve received, and a small description, but please talk with Sitecore Support in order received the full fix from them. I will write the list here in no particular order.

  1. Insert page does not create item successfully while Enforce Version Presence feature is enabled at its template. The fix is provided by asking Sitecore Support for this fix Sitecore.Support.105682. And here you can read more about Enforce Version Presence.
  2. Desktop link to Experience Editor always switches site to Preview.DefaultSite. The fix is provided by asking Sitecore Support for this fix Sitecore.Support.119280.
  3. Enforce Version Presence breaks languages switching in the Experience Editor. The fix is provided by asking Sitecore Support for this fix Sitecore.Support.151776-8.2.0.0.
  4. MediaDialog does not show content of “All image files” for non-admin users in Experience Editor. The fix is provided by asking Sitecore Support for this fix Sitecore.Support.158291.
  5. Simulated device and page does not appear until change in zoom. The fix is provided by asking Sitecore Support for this fix Sitecore.Support.51575.
  6. Fix the preview date issue in Experience Editor in a multiple site configuration. The fix is provided by asking Sitecore Support for this fix Sitecore.Support.82260.
  7. Incorrect caption of languages with neutral culture in the “Languages” chunk in the ribbon. The fix is provided by asking Sitecore Support for this fix Sitecore.Support.162413-8.2.1.0.

If you encounter similar problems as mentioned above please talk with Sitecore Support, as I have noticed that those fixes might have not been introduced into new updates from Sitecore 8 or even Sitecore 9

That is all for now, if I will encounter more fixes I will update this post.

Line break in Single-Line Text in Sitecore Experience Editor

We needed in a project to have in the Single-Line Text fields the possibility to write the text into multiple lines. The project was in Sitecore 8.2 rev. 161115, but should be the same on all versions of Sitecore 8. Also I have look into having the same changes into Sitecore 9 and by all means its possible to same customization in there too.

So, here is my approach to add a new WebEdit Button for the Single-Line Text fields.

  1. In the core database, go to”/sitecore/system/Field types/Simple Types/Single-Line Text
  2. Create a new item of template type Folder with the name WebEdit Buttons
  3. To to the newly created item, WebEdit Buttons, and create a new item of template type /sitecore/templates/System/WebEdit/WebEdit Button with the name insertbreakline (for example)
  4. Fill in the button fields: “Header“, “Icon” and “Tooltip” with appropriate values.
  5. (Optional) Will be a good idea to use the same “Icon” into the Appearance section from Standard value to keep the same consistency.

At this point you should be able to see in Experience Editor on a page where you have Single-Line Text field this:

2017-10-20_17h09_43.png

And not we need to add an action to the button click.

For this we need to define a new click action into “\sitecore\shell\Applications\Page Modes\ChromeTypes\FieldChromeType.js” file. Basically open that mentioned file and after the action chrome:field:insertimage is defined define a new event:

case "chrome:field:insertbreakline":
        this.insertBreakLine();
        break;

That will call a javascript function that we define, named insertBeakLine

Immediately where the javascript function handleMessage ends add the definition of our function:

insertBreakLine: function () {
	this._insertLineBreak();
	this.setModified();
},

 

Where basically call an already defined function made by Sitecore to insert a break line, this._insertLineBreak(); and then we notify the Experience Editor that there is a change in the fields that will activate the Save button that will allow us to save the changes. ]

After that we have to go back in Sitecore in the core database, on the item for the functionality, see the beginning of the article, “/sitecore/system/Field types/Simple Types/Single-Line Text/WebEdit Buttons/insertbreakline” and in the field “Click” add the call to the event we just made, chrome:field:insertbreakline

After this we are done, and the everything should work:

2017-10-20_17h14_46.png

Here is an except from my changes from FieldChromeType.js so you can see where exactly I’ve added my changes:

2017-10-20_17h16_55.png

Then change your code to that shows the Single-Line Text fields to process the html that is in them to show them correctly.

How to sort language list and show language flags in Sitecore Content Editor

In a project that I’m working we have quite few languages installed – more than 50 in fact. But also the project has multiple websites and each website it’s using maximum 2-3 languages, so it’s a nightmare for administrators and support team to jump from one language to another one in Content Editor.

This project that I’ve made my customization are with Sitecore XP 8.1 rev 160519, but according to this post the customization to the language drop-down from are possible starting with Sitecore XP 8.1 rev. 160302.

For me was not enough to use the setting ContentEditor.SortLanguages on true from Sitecore.config, as this will sort the languages Sort Order field of each Language item.

So in fact this is one the problems, having lots of languages and poor access to the ones that has the current item has versions on. And not being able to see the language flags – problem number 2.

Both problems are solved by customizing “\sitecore\shell\Applications\Content Manager\Galleries\Languages\Gallery Languages.xml

At the end I want to sort the languages following this rule: show at first the languages that the current item has a version – alphabetically, and the rest of the languages that the current item has no version but also ordered alphabetically.

Initially the languages list looks like this:2017-10-19_16h58_29

And then, after the customization – both sorting and show of the flags the language list  looks like this:

2017-10-19_17h12_37.png

Looks much better now.

So, for the technical part.

I’ve made changes to “\sitecore\shell\Applications\Content Manager\Galleries\Languages\Gallery Languages.xml” and I have replaced the call to GalleryLanguagesForm (Sitecore.Client.dll) in the CodeBeside tag with my own class containing the custom code. Btw, I’ve took the Sitecore’s original code for this functionality by using a decompiler 😉

In “\sitecore\shell\Applications\Content Manager\Galleries\Languages\Gallery Languages.xml” I had to remove the part that hides the flags/icons by removing this part:

        div#Languages img {
        display: none;
        }

as the html code is already prepared to display the icon.

Also in the code I’ve assigned the icon for each language

public static string GetIcon(Language language, Database database)
{
    Assert.ArgumentNotNull(language, "language");
    Assert.ArgumentNotNull(database, "database");
    var icon = language.GetIcon(database);
    if (string.IsNullOrEmpty(icon))
    {
        var languageDefinition = LanguageDefinitions.GetLanguageDefinition(language);
        if (languageDefinition != null)
        {
            icon = languageDefinition.Icon;
        }
    }
    if (string.IsNullOrEmpty(icon))
    {
        icon = "Flags/16x16/flag_generic.png";
    }
    return icon;
}

That function GetIcon from above I’ve took it from Sitecore 7.5 from Sitecore.Globalization.LanguageService from Sitecore.Kernel.dll because in Sitecore 8.1 the function returns all the time a flag_generic.png.

I guess this is change that was made in Sitecore 8 in order to improve the speed of Content Editor as in Sitecore 7 we were able to see the icons for languages in the language selector.

Since we wanted to sort our list of languages into a specific way I had to write a new Comparer for the Language object.

public override int Compare(Language lang1, Language lang2)
{
    Assert.ArgumentNotNull(lang1, "lang1");
    Assert.ArgumentNotNull(lang2, "lang2");
    if (lang1 == lang2)
    {
        return 0;
    }
    using (new SecurityDisabler())
    {
        var item1 = workingItem.Database.GetItem(workingItem.ID, lang1);
        var item2 = workingItem.Database.GetItem(workingItem.ID, lang2);
        var length1 = item1.Versions.GetVersionNumbers(false).Length;
        var length2 = item2.Versions.GetVersionNumbers(false).Length;

        // if both have 0 versions, then sort alphabetically.  
        if (length1 == 0 && length2 == 0)
        {
            var val1 = string.Compare(lang1.CultureInfo.DisplayName, lang2.CultureInfo.DisplayName, StringComparison.OrdinalIgnoreCase);
            return val1;
        }
        // if one has 0 version then put those that have a version on top
        if (length1 == 0 || length2 == 0)
        {
            var val2 = Math.Sign(length2.CompareTo(length1));
            return val2;
        }

        // then if both have more than 0 versions then sort them alphabetically
        var val3 = string.Compare(lang1.CultureInfo.DisplayName, lang2.CultureInfo.DisplayName, StringComparison.OrdinalIgnoreCase);
        return val3;
                
    }
}

All the entire coding is added here, into a gist.

Since Sitecore 9 was just lunched, I’ve checked how the GalleryLanguagesForm was implemented, and without a surprise its more or less the same implementation as is Sitecore 8, including same implementation for GetIcon from Sitecore.Globalization.LanguageService.

Later one I will try to see if any customization can be done into the Language selector in Experience Editor, as it looks that its implemented in a different way.