EPiServer Forms: How to render Forms in a dialog

In some real scenarios, we might need render an EPiServer Forms within a dialog instead of a page. This case will make user focus on the Form. Today I have tried to make the Form work with jQuery UI dialog. Here a some point I summarized to make it works (assume that you are working with Alloy solution).

Create a page type to render an ContentArea with a Form

[SiteContentType(GroupName = Global.GroupNames.News, GUID = "E5CCD734-81F2-4242-82BA-8D888504112B")]
public class SubcriblePage: SitePageData
{
    [Display(GroupName = SystemTabNames.Content, Order = 320)]
    public virtual ContentArea MainContentArea { get; set; }
}

Then create a page with the page type then dnd a Form into it, publish it (let say it url is: "/en/subcrible/".)

Create a zaror layout to render a page which display nothing but Forms (_Empty.cshtml):

@using System.Web.Optimization
@using EPiServer.Framework.Web.Mvc.Html
@model IPageViewModel<SitePageData>
<!DOCTYPE html>
<html lang="@Model.CurrentPage.LanguageBranch">
<head>
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/js")
    @Html.RequiredClientResources("Header")
</head>

<body>
    @RenderBody()
    @Html.RequiredClientResources("Footer")
</body>
</html>

Create a view to render for the page type (SubcriblePage)

@{ Layout = "~/Views/Shared/Layouts/_Empty.cshtml"; }
@using ILMTest
@model PageViewModel<SubcriblePage>

@Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { })
<script>
    if (typeof $$epiforms !== 'undefined') {
        $$epiforms(document).ready(function myfunction() {
            $$epiforms(".EPiServerForms").on("formsSubmitted", function (event, param1, param2) {
                window.parent.$(window.parent.document.body).trigger("submitted");
            });
        });
    }
</script>

This razor view will render an ContentArea with the Form. Add the script will notify parent window to know when the form already submitted (we will close the dialog then).

Open the dialog with a Form (Using iframe which loaded the page alread created above)

<script type="text/javascript">
    var page = "/en/subcrible/";

    var $dialog = $('<div></div>')
        .html('<iframe style="border: 0px; overflow: hidden;" src="' + page + '" width="100%" height="100%"></iframe>')
        .dialog({
            autoOpen: false,
            modal: true,
            height: 450,
            width: 500,
            title: "Some title"
        });
    $dialog.dialog('open');

    $(document).on("submitted", "body", function () {
        setTimeout(function () {
            $dialog.dialog("close");
        }, 1000)
    });
</script>

And here is result:

Dec 25, 2018

Comments

Please login to comment.