We have installed the Web Forms for Marketers(WFM) module for quite some customers. The module is great for letting your customers and editors insert simple custom forms on their webpages. It comes with a bunch of features, but also some shortages, I’ll try to cover some of them on my blog, and here’s the first one.
To insert a form on a page you find the page in your content editor, click the presentation ribbon, and choose "Insert" in the "Form"-chunk.
This works fine, but when the editor decides to go edit the form, they have to go through either the form designer "Sitecore -> All Applications -> Web Forms for Marketers -> Form Designer" find the form, and click "Ok", or go to where the forms are stored, default "/sitecore/system/Modules/Web Forms for Marketers/Website/formname", and click "Form Designer". The two alternatives can be ok, but for most editors I have meet, the most intuitive way to find their form, is to go to the item where they added the form, and find the editor. Unfortunately, this isn’t supported, but can easily be implemented by doing a little reflection, and a custom command.
So the goal is: create a button in the "Form"-chunk, which will allow the user to edit the current form, if one is present on the current item.
Step one; create a button in the "Form"-chunk
Go to the core database, and locate "/sitecore/content/Applications/Content Editor/Ribbons/Chunks/Forms", duplicate the item that already exists under the forms chunk, and call it "Edit form". I have filled the form like this:
The click event is filled with a command called "custom:forms:edit", next step is to configure this command, this is done in an include config that looks like this:
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
<sitecore>
<commands>
<command name="custom:forms:edit" type="CustomizeSitecore.Forms.Commands.EditForm,CustomizeSitecore.Forms"/>
</commands>
</sitecore>
</configuration>
Now it’s hooked up in Sitecore, all we need to do is to actually create the class that the command points to. Most of the command is snatched from the original Sitecore.Forms.Core dll and the insert form command and the existing edit form command. Ill attach the full source code to this blog, but the most important part of the code is how to find check if there is a form defined on the current item. This is used first to determine whether the button should be shown, and next it’s used to open the form designer with the correct form. The code looks like the following:
private string GetFormId(Item item)
{
var formID = String.Empty;
if (item.Fields["__renderings"] != null && item.Fields["__renderings"].Value != string.Empty)
{
string layout = LayoutField.GetFieldValue(item.Fields[Sitecore.FieldIDs.LayoutField]);
LayoutDefinition definition = LayoutDefinition.Parse(layout);
// Get default device
var device = definition.GetDevice("{FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3}");
// Get the form interpreter
var formInterpreter = device.GetRendering("{6D3B4E7D-FEF8-4110-804A-B56605688830}");
if (formInterpreter != null)
{
var qs = WebUtil.ParseUrlParameters(formInterpreter.Parameters.ToLower());
foreach (string key in qs.Keys)
{
if (key == "formid")
{
formID = qs[key];
}
}
}
}
return formID;
}
The forms are hidden as parameters on a sublayout called FormInterpreter, the code above tries to find the sublayout in the default device, and check if a form is defined in it. It returns the id of the form.
Check the attached source code to see how the forms editor is opened with correct parameters. This should make the WFM module just a Little more usable.