London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

Modifying XForms Markup

Vote:
 

Hi

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
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
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
Vote:
 

Frederiks post should be a sticky!  Thanks!

#74201
Aug 22, 2013 12:50
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
Vote:
 

Hi,

How do I add an asterix against all Required fields?

#174266
Jan 23, 2017 18:15
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.