Jorge Valle

Jorge Valle

Jorge Valle is a front end developer with a particular passion for, and expertise in, JavaScript and user interfaces. Lately, he's also been diving into machine learning.

Using Angular 1.x in Orchard CMS Dynamic Forms

The Custom Forms module was deprecated in Orchard 1.8, and the ability to manipulate markup for forms seemingly vanished. However, this isn't entirely true.

If you want to plug in Angular into Dynamic Forms, there's a simple way.

Design the form

Design your dynamic form on the layout elements just as you regularly would. Test thoroughly that all the data is being captured correctly.

Inspect the markup

Inspect the outputted markup in the front end with developer tools. Copy everything inside the form element and paste it unto your IDE or code editor of choice.

Remove the hidden anti-forgery token field

Remove the hidden anti-forgery token field that's auto generated.

Leave the other hidden fields, the form name and content ID ones, that tell Orchard which form this should be captured as. If you look at the POST request, you'll notice that it's the same URL that every dynamic form is posting to, so these other hidden fields are the only way the CMS can know which form to process this request as.

There might be some other unnecessary junk in there, such as classes you don't need. Clean these up.

Add the dynamic token generator method

Add the dynamic token generator method where you removed the previous hidden field. This will generate a fresh token on every page load.

Now plug in Angular markup

You now have markup where you can plug in your Angular code to your heart's content.

Great, so now how do you actually use this? I've found the most versatile way is to call it as a shape.

Save it under your theme's view folder, say as MyForm.cshtml. You can then bring this shape into other CSHTML files, or even as a layout element.

This solution of course requires that your original form remain unpublished: the final outputted code will come from your CSHTML file.

A more robust solution would be to write a module that hooks into dynamic forms, and allows all sorts of Angular code to be plumbed in. Maybe I'll do this for Angular 2 some day.


Books, patrons and coffee in Caffè San Marco, Trieste