Saturday, 18 July 2015

Add selected item in multilist at top position

Leave a Comment
In this blog post I am going to explain how to add selected item at top position of the multilist instead of bottom in Sitecore content editor. By default, whenever an item is selected and moved to right side section in the multilist editor then the selected item is added to the bottom of the list in right section. I want to change this behavior so that selected item is added at top position of the list in right section.

To implement this feature we have to modify the 'multilistMoveRight' javascript function in Content Editor.js file. This file exists at \Website\sitecore\shell\Applications\Content Manager folder of website root. Open Content Editor.js file and search for scContentEditor.prototype.multilistMoveRight and modify existing code as below:
scContentEditor.prototype.multilistMoveRight = function (id, allOptions) {
    var all = scForm.browser.getControl(id + "_unselected");
    var selected = scForm.browser.getControl(id + "_selected");

    for (var n = 0; n < all.options.length; n++) {
        var option = all.options[n];

        if (option.selected || allOptions == true) {
            var opt = document.createElement("OPTION");

            selected.appendChild(opt);

            opt.innerHTML = option.innerHTML;
            opt.value = option.value;
        }
    }

    this.multilistRemoveSelected(all, allOptions, id + "_all_help");

    this.multilistUpdate(id);

    //move the last item to the top
    for (var n = selected.options.length - 1; n > 0; n--) {
        var option = selected.options[n];       
        var prev = scForm.browser.getPreviousSibling(option);
        scForm.browser.swapNode(option, prev);
    }
}

Comments and suggestions are most welcome. Happy coding!
Read More...

Sunday, 12 July 2015

Bundling and minification in Sitecore MVC

Leave a Comment
This is a quick blog post on how to implement bundling and minification in Sitecore MVC project.  During development phase, it is always good to have multiple Javascripts and CSS files for better readability and maintainability of code.  But multiple Javascripts and CSS files degrade the performance of production website and also increase the load time of webpages as it requires multiple HTTP requests from browser to server.  Bundling and minification reduce the size of Javascript and CSS files and bundle multiple files into a single file and make the site perform faster by making fewer HTTP requests. Below steps explain how to implement bundling and minification for Sitecore MVC project:
  1. Add Microsoft ASP.NET Web Optimization Framework to your solution from nuget or run the following command in the Package Manager Console to install Microsoft ASP.NET Web Optimization Framework.
    PM> Install-Package Microsoft.AspNet.Web.Optimization
  2. Create your CSS and Javascript bundles in “BundleConfig” class under App_Start folder and add reference of "System.Web.Optimization" namespace.
    public class BundleConfig
        {
            public static void RegisterBundles(BundleCollection bundles)
            {
                //js bundling using wildcard character *
                bundles.Add(new ScriptBundle("~/bundles/js").Include("~/assets/js/*.js"));
    
                //css bundling using wildcard character *
                bundles.Add(new StyleBundle("~/bundles/css").Include("~/assets/css/*.css"));
            }
        }
  3. Register bundle in the Application_Start method in the Global.asax file. If you are using Multi-site instance of Sitecore MVC then recommend way to implement bundling logic is by creating a new processor into the initialize pipeline. This blog explains how to do configure it using pipeline processor.
     protected void Application_Start(object sender, EventArgs e)
            {
                BundleConfig.RegisterBundles(BundleTable.Bundles);
            }
  4. Enable bundling and minification by setting the value of the debug attribute in the compilation element to false in web.config.
    <compilation defaultLanguage="c#" debug="false" targetFramework="4.5">
    </compilation>
    
    We can override the value of the debug attribute in code by using EnableOptimizations property of the BundleTable class.
    protected void Application_BeginRequest(object sender, EventArgs e)
            {
                EnableBundleOptimizations();
            }
    
            private void EnableBundleOptimizations()
            {
                string debugMode = Request.QueryString["debug"];
                if (!string.IsNullOrEmpty(debugMode) && string.Equals(debugMode, "true", StringComparison.InvariantCultureIgnoreCase))
                {
                    BundleTable.EnableOptimizations = false;
                }
                else
                {
                    BundleTable.EnableOptimizations = true;
                }
            }
    Here in Application_BeginRequest method of Global.asax I am calling one custom method EnableBundleOptimizations() which sets the value of EnableOptimizations property to true or false based on value of querystring “debug”. Main idea behind this logic is that we can check/debug CSS or Javascript file on production by passing querystring parameter debug as true. 
  5. Replace Javascripts and CSS references in layout or rendering view with below code:
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/js")
    
  6. In web.config set an ignore url prefix for your bundle so that Sitecore won’t try to resolve the URL to the bundle. Update setting IgnoreUrlPrefixes according to your bundle name:
    <setting name="IgnoreUrlPrefixes" value="/sitecore/default.aspx|/trace.axd|/webresource.axd|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.DialogHandler.aspx|/sitecore/shell/applications/content manager/telerik.web.ui.dialoghandler.aspx|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.SpellCheckHandler.axd|/Telerik.Web.UI.WebResource.axd|/sitecore/admin/upgrade/|/layouts/testing|/bundles/js|/bundles/css"/>
  7. Now compile your solution and verify that bundling and minification is enabled by checking view source of webpage.
    Pass querystring as debug=true in url and now verify view source of webpage. Bundling and minification is not enabled. This enables us to debug Javascript and CSS files in production website.
Comments and suggestions are most welcome. Happy coding!
Read More...