Sitecore 8.1 WFFM with MVC: Insert Form in Content Editor

In the latest versions of Sitecore, the trend is more and more to use MVC. So having an MVC project, built on Sitecore XP 8.1 rev.151003 (Initial Release) version, and wanting to use the Web Forms For Marketers module, version 8.1 rev. 151008, entails that we want to use the MVC Form rendering, instead of the classic Form sublayout. For a developer, this works perfectly well, but as a Content Editor, I encountered the issue that I could not select any placeholders in the Insert Form wizard. At first, I thought that the explanation for my issue is the same as the one in this article: http://blogs.perficient.com/microsoft/2014/04/web-forms-for-marketers-mvc-and-the-sitecore-page-editor/. It mainly has to do with the fact that in the Insert Form wizard, you will need to select the placeholder on which to add the form, but the list of placeholders cannot be created by Sitecore, because it scans the current page looking for sc:Placeholder controls, which are no longer used in MVC. But later on, I found out that this is not the case for my solution. In my case, there was a custom pipeline HttpRequestProcessor that interfered with the Insert Form wizard, so I found a workaround without changing the code from the custom pipeline.

The scenario is this:

1.) First, you open the Insert Form wizard:InsertForm

2.) Enter a name for the form, and click on either Create a blank form or Select a form to copy:

InsertFormWizard

3.) In the Select a Placeholder screen, you have to select something, otherwise, you cannot proceed to the next step. But in this case, instead of the placeholder list you would expect, the current item url is loaded inside the small wizard, which is a showstopper.

The solution to this problem begins with identifying where the request for placeholders is performed. This is done in a javascript file installed with the WFFM module: <website>\sitecore\shell\Applications\Modules\Web Forms for Marketers\script\Sitecore.PlaceholderManager.js. In the getPlaceholders function, we need to replace the Ajax request to the current url with an Ajax request to our own implementation of displaying the placeholder list. For this, we need a new very simple controller and a view in our project:

Controllers/MvcFormController.cs

public class MvcFormController : Controller
{       
    [HttpGet]
    public ActionResult Index()
    {
        return this.View();
    }
}

Views/MvcForm/Index.cshtml

<a id="ph_wffm" href="#" class="scPalettePlaceholder" title="wffm" onclick="Sitecore.PlaceholderManager.onPlaceholderClick(this, event, 'wffm');">
    <div class="scPalettePlaceholderTitle">wffm</div>
    <div class="scPalettePlaceholderTooltip" style="display: none">wffm</div>
</a>

In my case, I only need a single placeholder called ”wffm”. This was previously added in Sitecore, under Placeholder Settings:

RestrictingPlaceholdersScreen

Of course the logic can be taken even further, so that the placeholder list is retrieved dynamically. But in my case, this solution was good enough.

In the Sitecore.PlaceholderManager.js file, in the getPlaceholders function, we can adjust the Ajax request to our action:

this.getPlaceholders = function (url, success, failure) {
    if (url != null && url != '') {
        new Ajax.Request('/api/sitecore/MvcForm/Index', {
            method: 'get',
            asynchronous: false,
            onSuccess: function (transport) {
                success(transport.responseText);
            },
            onFailure: function (transport) {
                failure(null);
            }
        });
    }
    else {
        failure(null);
    }
}

Now, when I perform again the steps from my scenario, I can see the following screen for selecting the placeholder:

SelectPlaceholder

Remember to properly clear the cache of your browser before trying the scenario, so that you make sure that the changes in javascript are taken into consideration.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s