Modifying XForms Markup

Vote:

I need to modify the markup for an Xform in my site to remove all of the table layouts. I have done some reading and everyone says to override the ControllsCreated event. A good article about it here:

http://www.frederikvig.com/2010/11/semantic-markup-with-episerver-xforms/

This solution and all of the others I have looked at are for version 6 and mention about updating the ControlsCreated method in the Global.asax file. This no longer exists on a version 7 MVC site. Does anyone know how to implement this for 7?

Many thanks
Dave

#74004

Aug 16, 2013 13:36

Frederik Vig

Vote:

Hi Dave

Under Views -> Shared -> DisplayTemplates I have XForms.cshtml with some custom code for this:

@using EPiServer.HtmlParsing
@using EPiServer.Web.Mvc.Html
@model EPiServer.XForms.XForm
@if (ViewData["XFormActionResult"] is EPiServer.Web.Mvc.XForms.XFormSuccessActionResult)
{
    <strong>Form posted.</strong>
}
else
{
    using (Html.BeginXForm(Model, htmlAttributes: new {@class = "form xform"}))
    {
        if (Model != null)
        {
            foreach (HtmlFragment fragment in (IEnumerable<HtmlFragment>)ViewData["XFormFragments"] ?? Model.CreateHtmlFragments())
            {
                @Html.Fragment(XFormHelper.CleanupXFormHtmlMarkup(fragment))
            }
        }
    }
}

And the CleanupXFormHtmlMarkup method looks like this:

public static class XFormHelper
    {
        public static HtmlFragment CleanupXFormHtmlMarkup(HtmlFragment htmlFragment)
        {
            if (htmlFragment.Name == "table" || htmlFragment.Name == "tr" || htmlFragment.Name == "td" || htmlFragment.Name == "tbody" || htmlFragment.Name == "thead")
            {
                htmlFragment.Name = "div";

                if (htmlFragment is ElementFragment && ((ElementFragment)(htmlFragment)).HasAttributes &&
                ((ElementFragment)(htmlFragment)).Attributes["valign"] != null)
                {
                    ((ElementFragment)(htmlFragment)).Attributes.Remove("valign");
                }
            }

            return htmlFragment;
        }
    }

Note that this is just some basic example code to get you started.

Hope this helps.

Frederik

#74007

Aug 16, 2013 17:45

dave@merchantmarketinggroup.com

Vote:

Hi Frederik

Thank you so much for your response. That worked great with one tiny tweak, for me the DisplayTemplate needed to be called XForm.cshtml.

Thanks very much
Dave

#74169

Aug 21, 2013 17:25

Jonas Boman

Vote:

Frederiks post should be a sticky! Thanks!

#74201

Aug 22, 2013 12:50

Jonathan Roberts

Vote:

If you create your own XForm Block with your own Model how can I use CreateHtmlFragments to change the HTML mark up to Divs?

#131745

Aug 04, 2015 16:34

Jonathan Roberts

Vote:

Hi,

How do I add an asterix against all Required fields?

#174266

Jan 23, 2017 18:15