Home » 2014 » October

Monthly Archives: October 2014

Advertisements

Bundle CSS and JavaScript Files in Sitecore MVC

The other day I was poking around Sitecore.Forms.Mvc.dll — this assembly ships with Web Forms for Marketers (WFFM), and is used when WFFM is running on Sitecore MVC — and noticed WFFM does some bundling of JavaScript and CSS files:

wffm-bundling

WFFM uses the above class as an <initialize> pipeline processor. You can see this defined in Sitecore.Forms.Mvc.config:

Sitecore-Forms-Mvc-config

This got me thinking: why not build my own class to serve as an <initialize> pipeline processor to bundle my CSS and JavaScript files?

As an experiment I whipped up the following class to do just that:

using System.Collections.Generic;
using System.Linq;
using System.Web.Optimization;

using Sitecore.Pipelines;

namespace Sitecore.Sandbox.Forms.Mvc.Pipelines
{         
    public class RegisterAdditionalFormBundles
    {
        public RegisterAdditionalFormBundles()
        {
            CssFiles = new List<string>();
            JavaScriptFiles = new List<string>();
        }

        public void Process(PipelineArgs args)
        {
            BundleCollection bundles = GetBundleCollection();
            if (bundles == null)
            {
                return;
            }

            AddBundle(bundles, CreateCssBundle());
            AddBundle(bundles, CreateJavaScriptBundle());
        }

        protected virtual BundleCollection GetBundleCollection()
        {
            return BundleTable.Bundles;
        }

        protected virtual Bundle CreateCssBundle()
        {
            if (!CanBundleAssets(CssVirtualPath, CssFiles))
            {
                return null;
            }

            return new StyleBundle(CssVirtualPath).Include(CssFiles.ToArray());
        }

        protected virtual Bundle CreateJavaScriptBundle()
        {
            if (!CanBundleAssets(JavaScriptVirtualPath, JavaScriptFiles))
            {
                return null;
            }

            return new ScriptBundle(JavaScriptVirtualPath).Include(JavaScriptFiles.ToArray());
        }

        protected virtual bool CanBundleAssets(string virtualPath, IEnumerable<string> filePaths)
        {
            return !string.IsNullOrWhiteSpace(virtualPath)
                    && filePaths != null
                    && filePaths.Any();
        }

        private static void AddBundle(BundleCollection bundles, Bundle bundle)
        {
            if(bundle == null)
            {
                return;
            }

            bundles.Add(bundle);
        }

        private string CssVirtualPath { get; set; }

        private List<string> CssFiles { get; set; }

        private string JavaScriptVirtualPath { get; set; }

        private List<string> JavaScriptFiles { get; set; }
    }
}

The class above basically takes in a collection of CSS and JavaScript file paths as well as their virtual bundled paths — these are magically populated by Sitecore’s Configuration Factory using values provided by the configuration file shown below — iterates over both collections, and adds them to the BundleTable — the BundleTable is defined in System.Web.Optimization.dll.

I then glued everything together using a patch configuration file:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <initialize>
        <processor patch:after="processor[@type='Sitecore.Forms.Mvc.Pipelines.RegisterFormBundles, Sitecore.Forms.Mvc']"
          type="Sitecore.Sandbox.Forms.Mvc.Pipelines.RegisterAdditionalFormBundles, Sitecore.Sandbox">
          <CssVirtualPath>~/wffm-bundles/styles.css</CssVirtualPath>
          <CssFiles hint="list">
            <CssFile>~/css/uniform.aristo.css</CssFile>
          </CssFiles>
          <JavaScriptVirtualPath>~/wffm-bundles/scripts.js</JavaScriptVirtualPath>
          <JavaScriptFiles hint="list">
            <JavaScriptFile>~/js/jquery.min.js</JavaScriptFile>
            <JavaScriptFile>~/js/jquery.uniform.min.js</JavaScriptFile>
            <JavaScriptFile>~/js/bind.uniform.js</JavaScriptFile>
          </JavaScriptFiles>
        </processor>
      </initialize>
    </pipelines>
  </sitecore>
</configuration>

I’m adding the <initialize> pipeline processor shown above after WFFM’s though theoretically you could add it anywhere within the <initialize> pipeline.

The CSS and JavaScript files defined in the configuration file above are from the Uniform project — this project includes CSS, JavaScript and images to make forms look nice, though I am in no way endorsing this project. I only needed some CSS and JavaScript files to spin up something quickly for testing.

For testing, I built the following View — it uses some helpers to render the <link> and <script> tags for the bundles — and tied it to my Layout in Sitecore:

@using System.Web.Optimization
@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation

<!DOCTYPE html>
<html>

<head>
    <title></title>

    @Styles.Render("~/wffm-bundles/styles.css")
    @Scripts.Render("~/wffm-bundles/scripts.js")
    
</head>
<body>
    

    @Html.Sitecore().Placeholder("page content")

</body>
</html>

I then built a “Feedback” form in WFFM; mapped it to the “page content” placeholder defined in the View above; published it; and pulled it up in my browser. As you can see the code from the Uniform project styled the form:

styled-form

For comparison, this is what the form looks like without the <initialize> pipeline processor above:

2014-10-30_2316

If you have any thoughts on this, or have alternative ways of bundling CSS and JavaScript files in your Sitecore MVC solutions, please share in a comment.

Advertisements

Turn Off the Attaching of Files in Emails Sent by Web Forms for Marketers in Sitecore

The other day Michael West pinged me to see if I could help someone in one of the SDN forums via this tweet:

The poster had asked if there were an easy way to disable the attachment of files on emails sent by the Web Forms for Marketers (WFFM) module in Sitecore.

After quickly peeking in the WFFM assemblies, I gave a potential solution — check out the thread to see what it was — though it did not work.

Tonight I looked further into how to accomplish this, and came up with the following solution:

using System;
using System.Net;

using Sitecore.Data;
using Sitecore.Form.Core.Client.Data.Submit;
using Sitecore.Form.Core.Pipelines.ProcessMessage;
using Sitecore.Pipelines;

namespace Sitecore.Sandbox.Form.Submit
{
    public class SendMessage : Sitecore.Form.Submit.SendMessage
    {
        protected override void ExecuteMail(ID form, AdaptedResultList fields)
        {
            ProcessMessageArgs args = new ProcessMessageArgs(form, fields, this.MessageType);
            base.To = base.To.TrimEnd(new char[] { ',', ';' });
            base.LocalFrom = base.From.TrimEnd(new char[] { ',', ';' });
            args.To.Append(base.To.Replace(";", ","));
            args.From = base.From.Replace(";", ",");

            // magically populated by WFFM via XML
            args.IncludeAttachment = IncludeAttachments; 

            args.Mail.Append(base.Mail);
            args.Subject.Append(base.Subject);
            args.Recipient = this.Recipient;
            args.RecipientGateway = this.RecipientGateway;
            args.Host = base.Host;
            args.Port = base.Port;
            args.IsBodyHtml = this.IsBodyHtml;
            args.EnableSsl = this.EnableSsl;
            args.Data.Add("FromPhone", this.FromPhone ?? string.Empty);
            string[] strArray = string.IsNullOrEmpty(base.Login) ? new string[] { string.Empty } : base.Login.Split(new char[] { '\\' });
            if ((strArray.Length > 0) && !string.IsNullOrEmpty(strArray[0]))
            {
                if ((strArray.Length == 2) && !string.IsNullOrEmpty(strArray[1]))
                {
                    args.Credentials = new NetworkCredential(strArray[1], base.Password, strArray[0]);
                }
                else
                {
                    args.Credentials = new NetworkCredential(strArray[0], base.Password);
                }
            }
            if (!string.IsNullOrEmpty(base.CC))
            {
                base.CC = base.CC.TrimEnd(new char[] { ',', ';' });
                args.CC.Append(base.CC.Replace(";", ","));
            }
            if (!string.IsNullOrEmpty(base.BCC))
            {
                base.BCC = base.BCC.TrimEnd(new char[] { ',', ';' });
                args.BCC.Append(base.BCC.Replace(";", ","));
            }
            CorePipeline.Run("processMessage", args);
        }

        // magically populated by WFFM via XML
        private bool IncludeAttachments { get; set; }
    }
}

The class above inherits from Sitecore.Form.Submit.SendMessage in Sitecore.Forms.Custom.dll, and overrides the ExecuteMail() method — this method is declared virtual in Sitecore.Form.Submit.SendMail which is the base class of Sitecore.Form.Submit.SendMessage.

Most of the code in ExecuteMail() above is from the ExecuteMail() method on Sitecore.Form.Submit.SendMessage, though with one minor difference: I have added a boolean property named “IncludeAttachments” which is magically populated by WFFM via an XML property declaration for this class:

wffm-no-attachments

I spun up a form quickly with some File Upload fields, and mapped the above Save Action to it:

form-save-action-no-attachment

I then navigated to my form, attached two images, and clicked the submit button:

attached-two-images

As you can see, the images were not attached to the email:

no-attachments-email

I then went back to my Save Action; set the <IncludeAttachments> XML element’s value to be true; saved the form Item; published it; and resubmitted the form:

with-attachments-email

As you can see, the images were attached this time.

If you have any thoughts on this, please drop a comment.

A Fix for the Hard-coded Submit Button Text in Web Forms for Marketers on Sitecore MVC

No doubt you have heard the latest version of Web Forms for Marketers — better known as WFFM — now works on Sitecore MVC — don’t know about you but I am quite excited over this!

Plus, as an added bonus — and this made my day when I installed it 😀 — you can change most of the rendered markup for forms in Views that ship with the module (these are installed into ~\Views\Form\EditorTemplates\ of your Sitecore instance).

However, the other day, I discovered the submit button text is hard-coded in one of the module’s Views:

submit-button-text-hardcoded

As you may know, the module does provide a field on Form Items to change the submit button text:

submit-button-text-form-item

Unfortunately, the value of this field is not being put into the value attribute of the submit button in the View above.

I have alerted Sitecore support of this issue via a ticket though do recommend modifying ~\Views\Form\EditorTemplates\FormModel.cshtml to use the submit button text set on the Form Item if you are using WFFM on Sitecore MVC:

submit-button-text-not-hardcoded

As you can see, the value of the submit button text field is set on a property of the model, and can be easily be put into the value attribute of the submit button.

If you have any thoughts on this, please share in a comment.