@Html.Kentico().PageBuilderScripts() renders inline editor scripts on frontend

Dmitry Bastron asked on August 2, 2019 18:14

Hi guys,

I'm stuck with the following problem. I've got these calls in my view:

@section styles
{
    @Html.Kentico().PageBuilderStyles()
}

@section scripts
{
    @Html.Kentico().PageBuilderScripts()
}

Also, as it should be, have these in my layout:

@RenderSection("styles", required: false)
...
@RenderSection("scripts", required: false)

But in the result markup on live site (not admin) I see all the admin scripts and styles referenced:

<link href="/MySite/Content/FormComponents/TaxonomySelectorComponent/taxonomy-editor.css" rel="stylesheet"/>
<link href="/MySite/Content/FormComponents/TaxonomySelectorComponent/jsTree/themes/default/style.css" rel="stylesheet"/>
<link href="/MySite/Content/FormComponents/TaxonomySelectorComponent/jsTree/themes/default/style.min.css" rel="stylesheet"/>
...
<script src="/MySite/Kentico/Content/FormComponents/FileUploader/file-uploader.js"></script>
<script src="/MySite/Kentico/Content/Selectors/FormComponents/MediaFiles/media-files-selector.admin.js"></script>
<script src="/MySite/Kentico/Content/Selectors/FormComponents/Pages/page-selector.admin.js"></script>
<script src="/MySite/Kentico/Content/Selectors/FormComponents/Path/path-selector.admin.js"></script>
<script src="/MySite/Content/FormComponents/TaxonomySelectorComponent/taxonomy-editor.js"></script>
<script src="/MySite/Content/FormComponents/TaxonomySelectorComponent/jsTree/jstree.js"></script>
<script src="/MySite/Kentico/Scripts/forms/updatableFormHelper.js"></script>
<script src="/MySite/Kentico/Content/FormComponents/USPhone/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="/MySite/Kentico/Content/FormComponents/USPhone/inputmask.js"></script>

Any ideas why this might be happening?

kentco12mvc

Correct Answer

Sean Wright answered on May 26, 2020 19:45

Dmitry helped me come up with this solution which uses the available global events for form rendering:

public class GlobalFormEventsModule
{
    public static void RegisterEventHandlers() => FormWidgetRenderingConfiguration.GetConfiguration.Execute += GetConfiguration_Execute;

    private static void GetConfiguration_Execute(object sender, GetFormWidgetRenderingConfigurationEventArgs e)
    {
        if (HttpContext.Current.Kentico().PageBuilder().EditMode || HttpContext.Current.Kentico().Preview().Enabled)
        {
            return;
        }

        string scripts = @"
            <script src=""https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js""></script>
            <script src=""https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js""></script>
            <script src=""https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js""></script>
            <script src=""~/Kentico/Scripts/forms/updatableFormHelper.js""></script>
        ";

        if (e.FormComponents.Any(c => c.Definition.Identifier == USPhoneComponent.IDENTIFIER))
        {
            scripts += @"<script src=""~/Kentico/Content/FormComponents/USPhone/inputmask.js""></script>";
        }

        if (e.FormComponents.Any(c => c.Definition.Identifier == FileUploaderComponent.IDENTIFIER))
        {
            scripts += @"<script src=""~/Kentico/Content/FormComponents/FileUploader/file-uploader.js""></script>";
        }

        e.Configuration.FormWrapperConfiguration = new FormWrapperRenderingConfiguration
        {
            CustomHtmlEnvelope = MvcHtmlString.Create($"{scripts}{FormWrapperRenderingConfiguration.CONTENT_PLACEHOLDER}")
        };
    }
}

You can then call GlobalFormEventsModule.RegisterEventHandlers(); in the Global.asax.cs.

This allows us to only call @Html.Kentico().PageBuilderScripts() when the page is being rendered in Edit mode but still get the required form utility libraries loaded when a form is being rendered on the page for the Live site.

The <script> elements get rendered directly before the <form> element.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Zach Perry answered on August 2, 2019 18:32

I am guessing it thinks you are in Edit mode for some reason.

Maybe try this in the view, not sure if it will help because it should be checking for it inside PageBuilderStyles?

@section styles
{
    @if (HttpContext.Current.Kentico().PageBuilder().EditMode)
    {
        @Html.Kentico().PageBuilderStyles()
    }
}

0 votesVote for this answer Mark as a Correct answer

Dmitry Bastron answered on August 2, 2019 18:48

Thanks Zach, I originally had this one. It works fine with the styles, but if you disable the scripts this way Forms built with Forms Builder stop working. I guess they require some jquery or something to work.

Strange thing is that it works fine in default Dancing Goat MVC website without EditMode check. And I just can't figure out why?

0 votesVote for this answer Mark as a Correct answer

Brian Edwards answered on December 13, 2019 21:51

Hi Dmitry, have you come across a solution for this? I am seeing the same behavior on my application as well, where the admin javascripts are coming across the front end when bundled. Just curious to know if you had solved this, and if so, what the solution was.

1 votesVote for this answer Mark as a Correct answer