Blog

Populating Form Builder Dropdowns via Remote Objects

March 21, 2017 by Grant Shepert

Creating forms can be tedious. Mura eases that burden, allowing you to drag and drop new fields and fill in the blanks to create a form, but the task of populating dropdown lists can still be time consuming.

Mura's Form Builder has a couple of automated options to make the task much easier.

Let's say we have a list of countries we want to put into a Mura Form Builder dropdown. The default way of doing this is by entering them manually:

We'd have to type them in one at a time ... not a desirable task!

Instead, let's take a look at how we might use a custom CFML object to do the work for us. We'll leave our Country list for now, and automate our City list.

Assigning a Custom Data Object

The first step is to choose the "Custom Object" option for our dropdown's source, and then type in the path to our custom object. We use the "dot" notation to indicate where our file lives, relative to the containing site folder. In other words, if my object was contained in a "city.cfc" file inside the /default site directory, in a folder called /remotetest, I would enter remotetest.city.cfc, as shown here:

As you can see in the image above, the dot-notation path begins within my site folder, and includes the cfc at the end (this is optional, you can leave the '.cfc' in for clarity, or omit it altogether). Clicking the "update" button saves the information.

Creating a Data Object CFC

Now, as a basic example, let's take a look at what the city.cfc object might contain:

 
  1. component
  2. {
  3.   remote any function getData() {
  4.     var datarecords = [];
  5.     var dataset = {};    
  6.     var cities = [ 'Los Angeles','Sacramento','Dallas','New York' ];
  7.     dataSet['datarecordorder'] = [];
  8.     dataSet['datarecords'] = {};
  9.     for(x = 1; x <= ArrayLen( cities );x++) {
  10.       var id = createUUID();
  11.       
  12.       dataSet['datarecords'][id] = { 'datarecordid'=id,'label'= cities[x],'value'= cities[x] };
  13.       ArrayAppend( dataSet['datarecordorder'],id );
  14.     }
  15.     return dataset;
  16.   }
  17. }

The custom object must contain a method called getData(), which will return a specially formatted structure containing our dropdown's data. A code dump of what is generated by the object can be seen below:

There are two important components of this returned data object. The DataRecordOrder is an array of ids listed in the order we want our items to appear in the dropdown, and the structure DataRecords contains a label and value for each of our items. This structure mimics what Mura Form Builder creates when you build your lists manually.

Custom Objects and Advanced Options

The above example can be easily modified to suit most needs. It is also possible to build more complex data objects using a database query. I suggest taking a look at the Gist code sample, Form Builder Get Data via SQL, created by fellow Blue River colleague Steve Withington. Steve's example converts an SQL query into a compatible Form Builder dataset, and like our example above it is intended to be modified and customized as needed.

Mura Form Builder goes a long way in creating a simpler path for you to create complex multi-page forms for your website; the "custom object" option for populating your dropdowns will help take you even further!