How to create custom FormContainerBlock in CMS 12

  • Updated

Issue Description:

Currently, the documentation for custom Form container block is not updated for CMS 12 (.NET Core). Please following the steps below to customize the FormContainerBlock in CMS 12.

 

Steps:

1, Create new class EPiFormWithTwoColumnOptionBlock:

[ContentType(GUID = "{DD088FD8-895E-47EF-9497-5B7A6700F4A6}", GroupName = EPiServer.Forms.Constants.FormElementGroup_Container, Order = 4000)]
    [ServiceConfiguration(typeof(IFormContainerBlock))]
    public class EPiFormWithTwoColumnOptionBlock : FormContainerBlock
    {
        [Display(Name = "Use two column layout", Order = 1, GroupName = SystemTabNames.Content)]
        public virtual bool HasTwoColumns { get; set; }
    }

2, Create new class EPiFormWithTwoColumnOptionBlockController

[TemplateDescriptor(AvailableWithoutTag = true,
                    Default = true,
                    ModelType = typeof(EPiFormWithTwoColumnOptionBlock),
                    TemplateTypeCategory = TemplateTypeCategories.MvcPartialController)]
    public class EPiFormWithTwoColumnOptionBlockController : FormContainerBlockController
    {
        protected override IViewComponentResult InvokeComponent(FormContainerBlock currentBlock)
        {
            return base.InvokeComponent(currentBlock);
        }
    }

3, Copy file FormContainerBlock.cshtml in folder \modules_protected\EPiServer.Forms\EPiServer.Forms.zip\Views\ElementBlocks\Components\FormContainerBlock

To under new folder \Views\Shared\ElementBlocks\Components\EPiFormWithTwoColumnOptionBlock (the name of this folder should be the same with new controller => EPiFormWithTwoColumnOptionBlock )

Then update some code like this:

// change the class name of Model to new class EPiFormWithTwoColumnOptionBlock
@model [YOUR_NAMESPACE].EPiFormWithTwoColumnOptionBlock

Add code to the body of view:

//...
@{
    async void RenderFormBody()
    {
       if (Model.HasTwoColumns)

       {

    <div class="Form__Status">
        <span class="Form__Readonly__Message">
           <h2>Has two colums</h2>
        </span>
    </div>

       } 
 //....