Dynamic Form Elements

Topics: Customizing Orchard, Writing modules
Jul 17, 2015 at 5:13 PM
I am creating new dynamic form elements which use JQuery-UI. I dislike altering existing the dynamic form code and prefer to isolate all the changes in my code. However, because there could be any number of these new controls on a form I am force to make a decision about when and how to load JQuery-UI. The ideal way would be to have the form load the JQuery-UI after it loads JQuery for client side validation. The less desirable way is to try to have the element check to see if JQuery-UI has been loaded yet which would be much more complex.

I would change part of "form.cshtml" like this.
   if (element.EnableClientValidation == true) {
        Style.Require("jQueryUI_Orchard");

        Script.Require("jQuery").AtFoot();
        Script.Require("jQueryUI").AtFoot();

        Script.Include("lib/jquery.validate.js", "lib/jquery.validate.min.js").AtFoot();
        Script.Include("lib/jquery.validate.unobtrusive.js", "lib/jquery.validate.unobtrusive.min.js").AtFoot();
        Script.Include("lib/jquery.validate.unobtrusive.additional.js").AtFoot();

        Html.EnableUnobtrusiveJavaScript();
        Html.EnableClientValidation();
    }
Does anyone has comments about this or possible a better ways to approach the problem?
Developer
Jul 17, 2015 at 5:39 PM
Why don't you override the Form.cshtml shape template in your theme? That way you can make any code changes you like without touching core code.
Jul 17, 2015 at 6:01 PM
Thank you for your input, this would be my first choice if I only had few clients or did not want to share these new elements. However, I consider these very generic elements and people may find them useful. I would like part of my company's transition to Orchard to be contributing any generic elements or modules back to the community. I am new to the Orchard code base so it is understandable that I am cautious of making any changes to the existing code. With that said I would like to help further the development of the Orchard platform.
Developer
Jul 17, 2015 at 9:10 PM
I see. That is absolutely fantastic, thank you.

In any case, I don't think the Form.cshtml file in the DynamicForms module itself should render jQueryUI scripts. The reason being that the Form element itself should make no (or as little as possible) assumptions regarding its child elements. Since the Form element has an "enable client side validation" option, I think it makes sense it includes the necessary scripts for that, but not for jQueryUI. Instead, I'd choose between the following two options:
  1. In your module, implement IShapeTableProvider that describes the "Element" shape and implement its Displaying event method. Inside of this method, check for the element type. If it's a Form element, use the IResourceManager (inject it as a Work<IResourceManager> since the shape table provider itself is stored inside of a singleton thing) to register the jQueryUI resource.
  2. Alternatively, simply include the jQueryUI resource from your element's views. Even though this call may happen multiple times (once per element being displayed), the script will only ever be rendered once, so this is fine.
I understand you're new to Orchard, so please do let me know if you'd like me to elaborate on anything I mentioned here. I can imagine the shape table provider story may sound a bit arcane. Just let me know.