Developing Custom Form Elements for Dynamic Forms in Orchard CMS

Developing Custom Form Elements for Dynamic Forms in Orchard CMS

I had the pleasure of teaching an Orchard CMS class yesterday. One of my favorite parts of the class was showing how to extend Dynamic Forms by creating custom form elements. This is seriously fun and I demonstrated how to create a custom slider form element. There are several moving parts and it gets even more interesting when you develop custom validators and binders along with it. Developing form elements is somewhat like developing custom layout elements but a bit more involved ( see my post Develop Custom Elements for Orchard Layouts ).

Custom Form Elements in Orchard CMS

The objective of the demonstration was to create a slider form element for Dynamic Forms in Orchard CMS. I first needed to have a Slider Form Element appear on the Layout Editor's Toolbox. As with all elements in Dynamic Forms they are harvested by various harvesters which you can see in the Orchard Source Code. The easiest example of this is custom snippets for Orchard Layouts.

Custom Slider Form Element for Dynamic Forms in Orchard CMS

When you drag and drop the custom form element on the layout canvas it opens up a design editor that lets you set various properties, validation settings, and binding properties. I'll just show the properties tab, and you can see a couple of custom properties ( e.g. Minimum Value, Maximum Value ) that let you set the minimum and maximum values for the slider. I could have gone crazy here and created a whole bunch of properties to make this slider ultimately flexible, but this is perfect for demonstration purposes. I also created custom validation settings and binders, which I can mention another time.

Custom Slider Form Element Properties for Dynamic Forms in Orchard CMS

Once you set all the properties, the custom slider displays its design-time view on the layout canvas. Here I display a working slider as well as an indicator that shows the value of the slider. It defaults to the slider's minimum value ( unless you set the Value Property ), but as you move the slider the values change of course.

Custom Slider Form Element - Dynamic Forms in Orchard CMS

During the demonstration I walked through the code and discussed developing custom binders and validators. For this particular example I needed to create a Range Validator since I wanted to make sure the slider value was indeed between the minimum and maximum values. I also added some client-side validation since range validation is offered in jQuery Validation out-of-box. This was a really fun demonstration.

Conclusion

Lots of really good extensibility in Orchard CMS Dynamic Forms and Layouts. I've discussed quite a few interesting extensibility opportunities in my blog. Check those out. I also mention cool things on twitter. Happy Halloween!

If you're looking for an Orchard CMS Developer, contact me.