Hide menu Last updated: Nov 02 2016
Area: Episerver Add-ons Applies to versions: Forms 2 and higher

Loading additional resources

Note: Episerver Forms is supported by MVC-based websites only.

You can load additional resources after form rendering with IViewModeExternalResourcesImplement the IViewModeExternalResources interface to return a list of resources (JavaScriptS or CSS files) that are loaded into ViewMode along with EPiServerForms.js.

The interface is used mostly for the following:

  • Third-party validators.
  • Rich element types (with rich, complex UI that needs JavaScript to render UI and handle interaction), such as DateTimeElement in the Forms.Samples project.
using EPiServer.Forms.Core;
using EPiServer.ServiceLocation;
using System;
using System.Collections.Generic;

namespace EPiServer.Templates.Alloy.FormsExtended
{
    /// <summary>
    /// This example will force Forms.Core to load a JS and a CSS file (at http://example.com/Customized/ViewMode/Alloy.css) along with Form rendering
    /// </summary>
    [ServiceConfiguration(ServiceType = typeof(IViewModeExternalResources))]
    public class ExampleViewModeExternalResources : IViewModeExternalResources
    {
        public IEnumerable<Tuple<string, string>> Resources
        {
            get
            {
                var arrRes = new List<Tuple<string, string>>();
                arrRes.Add(new Tuple<string, string>("script", "/Customized/ViewMode/Example.js"));
                arrRes.Add(new Tuple<string, string>("css", "/Customized/ViewMode/Example.css"));   // This will not work in nonJS mode
                return arrRes;
            }
        }
    }
}

Comments

How would one specify async and defer on the scripts you are passing in?

Currently, default FormContainerBlockController use IRequiredClientResourceList to register CSS and Script resources. The limitation is it does not have elegant way to register async script.

We might have to introduce new interface to accept new property (let say "async") for each resource.

Meanwhile, you have to override the default Controller and function RegisterResources() to have what you want

/// <summary>
/// Default controller handles <see cref="FormContainerBlock"/> form block.
/// Note that the FormContainerBlockController begins with "FormContainerBlock" - a convention way matching the controller with the model.
/// </summary>
[TemplateDescriptor(AvailableWithoutTag = true, Default = true, ModelType = typeof(FormContainerBlock), TemplateTypeCategory = TemplateTypeCategories.MvcPartialController)]
public class FormContainerBlockController : BlockController<FormContainerBlock>

{

protected void RegisterResources(List<string> scripts, List<string> css) {}

}