Blog

Mura FormBuilder: Onward and Upward

May 25, 2017 by Michael Evangelista

Creating and managing html forms can be a messy process. By their very nature, forms are complex for users to create, the generated html can be hard to maintain and style correctly, and submitted data can be difficult to parse, package and reuse.

For example, adding 'middle name' between a first and last name can completely break a form that's already had submissions posted and saved. Creating a multi-page form that users can move back and forth through can be technically challenging, as is ensuring everything is validated, all the required fields are filled, and we haven't even gotten to things like conditional fields (first pick a state, then we'll list the relevant sales offices for you to choose), which require an application developer's involvement.

Fortunately, we've already solved a lot of those problems with Mura FormBuilder, a drag-and-drop way of building out complex forms. Mura 7.0 heralds an improved version of FormBuilder, with multi-page forms, easier-to-use validation, Mura ORM integration, conditional fields and much more.

Following the day two keynote [link: previous video] at MuraCon 2017, Blue River's Grant Shepert presented an in-depth look at Mura's FormBuilder, with a focus on developing features and the vision for form and data management as part of the overall Mura roadmap.

Forms… Yuck!

Getting directly to the problem at hand, Grant made it clear that, in his eyes, forms present some inherent problems, which were compounded by the limitations of early versions of Mura. The original Mura forms were built in CKeditor with a plugin which managed html blocks based on markup templates. Data was saved in the database as one large xml string, making it difficult to search on a given field or manage the data. As for displaying the forms, the front end rendering was rigid, and not easy to extend.

This is where FormBuilder got it's start as part of the Mura core. Grant began working with Blue River full-time in 2011, and offered his existing Mura plugin for forms as part of the deal, saying "They hired me to get the FormBuilder plugin". Instead of relying on CKeditor to create the html form markup, it added a more user-friendly interface including drag-and-drop layout for forms, with code that was more modular and manageable on the back end. However, the data structure was still somewhat rigid, and there was some obvious room for improvement.

No more clunky input blocks or difficult data. Building forms w/ #MuraCMS gets better all the time!

FormBuilder 2.0 ala Mura 7

As part of the upgrades in the subsequent major-version release, Grant had a chance to rebuild Mura's form functionality yet again, and took the opportunity to dive deep into the inner workings, as well as revisiting the user interface. FormBuilder 2, introduced in Mura 7.0, uses handlebars javascript templates [(handlebars link?], shrinking the code base considerably.

In addition, all forms in Mura are now rendered with javascript via Mura.js [ link to mura js documentation?] , which brings FormBuilder up to speed, both in terms of modern web technologies, and ease of improvement going forward.

Another big win was the introduction of multi-page forms, which has exceeded expectations for popularity and adoption. Conditional fields are also new. They allow changes in one field to affect what appears in another. For instance, choose a state in the "State" dropdown and the "City" dropdown would reload to list only cities in that state.

Enter SurveyBuilder

This new paradigm in form management was primarily motivated by the requirements of a Blue River client project which is largely based on form-submitted survey data. To showcase some of the new form functionality and provide a glimpse of things to come in the Mura core, Grant provided a quick look at the custom "SurveyBuilder" plugin.

This high-functioning survey application for Mura CMS, which he described as "a customization of FormBuilder's future", invokes and maintains proper data-object relationships for use in application development, including reporting and multi-dimensional data structures. Most significantly, every survey creates one or more Mura ORM [link: ORM docs] objects, allowing for complex data types and extended output, with a wider range of downloadable results.

When placing the display object for a survey, which is at it's core a basic Mura form, on a page using Mura's front-end editing options, the survey builder adds a configurator, much like Mura's other front-end editable objects. Options include start date, stop date and the version of the survey to be displayed. This allows for a survey to be displayed in multiple locations, and the results to be grouped by 'version' in order to create subsets when viewing or analyzing the data.  Each response can also be viewed individually as a separate data record.

FormBuilder Future Edition

As part of the SurveyBuilder creation process, some of the base functionality which powers Mura forms has already been upgraded and rewired. The engine which creates the ORM objects and corresponding .cfc files, the logic which controls all of the front end templating via Mura.js, and all of the functionality to customize forms and override front-end rendering templates are already part of FormBuilder.

Speaking on behalf of the Mura CMS development team, Grant says, "We are working on the roadmap for integrating some of the additional features into the form options in the Mura core."

FormBuilder is not an App Builder

As an answer to what Grant anticipated to be the most frequently asked question, "Can I use FormBuilder to create my custom application?", he offered a qualified "NO" as the answer. While Mura's forms are robust and flexible, the way that submitted data is stored and handled is not ideal for true database-driven application development. (For example, checkbox values are stored as a simple list, and are not truly relational.)

To create applications with custom data objects, Grant reiterated, Mura ORM is the perfect tool. New features are being built into Mura which will further extend the power of Mura ORM as a superior tool for managing custom data objects, and the Mura platform in general as a powerful data management tool both via the admin interface, and remotely as a headless cms offering "data as a service". These notable improvements to the way forms and form-submitted data objects are created and managed serve to facilitate further extension of these options in Mura CMS.

With the advent of Mura ORM and Mura JS, creating forms in #MuraCMS makes another giant leap. See #MuraCon video:

You'll discover:

  • The evolution of Mura's FormBuilder
  • What makes the new version of FormBuilder better
  • How to utilize Mura ORM and Mura.js with form data
  • How to extend existing FormBuilder templates using handlebars
  • When not to use FormBuilder
  • What's in the works for future FormBuilder versions

Learn more from Grant Shepert and the rest of the Mura Platform team at MuraCon 2018 April 4th and 5th, 2018 in Sacramento, California.
 

Related Resources

See this Video Presentation on YouTube: youtu.be/ZOx3YR4Cczc
MuraCon 2017 Video Playlist: youtube.com/playlist?list=PLcKlNuw7UGaodvcjgPujAUdFN4rambGta
Presentation Slides: muracon.com/schedule/formbuilder-where-its-at-where-its-headed/presentation-slides/
Download or Contribute to Mura CMS on Github: github.com/blueriver/muracms
Mura Information, Blog, Support, and Documentation: getmura.com

Comments

Post a Comment

Required Field