Posted in Forms Automation

How to Create Dynamic Forms with No Code

Dynamic forms are the lifeblood of most automated business processes. 

From HR paperwork to automating accounting processes, most of the common ways that our customers use frevvo to save time and money in their business rely on smart forms that are able to do more than just collect text in a box, but perform actions based on those specific inputs. 

This functionality allows businesses to create forms that perform calculations, automatically fill in  information, or customize workflows based on the user’s inputs.

While most users would likely love this functionality, few have the resources at their disposal to achieve a truly seamless experience.

Instead, most businesses capture inputs through forms where users have to type data and read instructions and then still manually process those inputs with human time and energy. Why? Because building dynamic forms can be an enormous expense and investment that many businesses can’t make. 

For most companies, rolling your own dynamic forms and creating custom workflows can drain hundreds of hours of IT time and other resources cost thousands of dollars to implement.

This is why frevvo’s forms automation software includes a Visual Rule Builder (VRB) to allow business users to create dynamic forms without coding. Using the VRB engine with our dynamic form builder, non-technical users can easily define custom rules and logic that control how a form functions while it’s being completed, once it’s been submitted, and when it’s being processed. 

All of the custom functionality that would require manual coding and huge investment to build and maintain can be created with just a few clicks.

Meet the frevvo Visual Rule Builder

frevvo makes this functionality so simple and user friendly with the Visual Rule Builder.

This three-part feature allows any business user to quickly build rules that would traditionally be done through complicated computer code. Instead, these rules are created and customized using plain language and a WYSIWYG-style interface that lets you see exactly how each rule will function.

Meet the frevvo Visual Rule Builder

A business rule has three parts:

  • An optional condition, which could be a complex expression.
  • A set of actions that should be executed when the condition is true.
  • A set of actions that should be executed when the condition is false.

The Visual Rule Builder (VRB) guides you through three screens – one for each part above. On each screen, you can visually define your condition and actions. Similar to an Excel spreadsheet, it also supports many functions/expressions for common business needs.

Building No-Code Dynamic Forms with the Visual Rule Builder

Let’s investigate some common business rules that are easily built with the Visual Rule Builder. 

We’ll see how to:

  • Concatenate First and Last Names
  • Fill in the date automatically when the user signs
  • Automatically fill in user details to reduce data entry
  • Perform calculations
  • Show fields or workflow steps only when they’re relevant.

Concatenate First and Last Names

There are many situations where you simply want to concatenate the First Name and Last Name fields to generate a Full Name. A common example – completing a Federal W-4 when onboarding a new hire.

All you need are First Name, Last Name and Full Name fields in your form.

Concatenate First and Last Names

You can manually add JavaScript like this. This example is simple enough but a simple syntax error could cause the rule to not work:

FullName.value = FirstName.value + ‘ ‘ + LastName.value;

Enter the Visual Rule Builder

Let’s go through the three parts of the rule.

  1. In this case, we can skip the condition wizard since we always want to concatenate the strings. Open the Visual Rule Builder, and click Next on the Condition wizard.
  2. On this screen, select the Full Name field as the field you want to Set from the first dropdown, select to from the second dropdown and type FirstName + ” ” + LastName in the third column field. As you type Fir… the wizard suggests controls on your form that match so it’s easier to complete. It’ll also automatically check for any syntax errors so you can’t make a mistake. Click Next.
  3. There is nothing to do on the next screen. Since there is no condition specified, it cannot be False. Simply, click Finish.
Enter the Visual Rule Builder

Populate Full Name with First and Last Name

The final rule looks like this:

rule builder frevvo

Try the form and see that the rule works as expected.

Fill in the date automatically when the user signs

Approval steps in workflows commonly have a place where, for example, the manager must sign to approve a leave request and date it. You can easily fill in this date with a business rule. It takes two seconds with the Visual Rule Builder.

All you need are Signature and Date Fields in your forms/flows. Let’s say, you have added two fields and named them SignHere and Date respectively.

If you were manually building this rule using HTML and Javascript, you’d need to write a function to fill in the date. But with the Visual Rule Builder it’s simple and straightforward. 

Enter the Visual Rule Builder

Again, let’s go through the three parts of a rule. See the screenshots below.

  1. This rule requires a condition since we want to fill in the date only when the user signs. Open the Visual Rule Builder and select the Signature field as the field you want to Set and “is filled” as the condition from the adjacent drop down. Click Next.
  2. On the next screen, we specify what action to take when the signature is filled. As the image shows, it’s easy. Simply use the today() function to fill in the Date field with today’s date and click Next.
  3. On the next screen, we specify what action to take when the signature is empty. Again, it’s obvious. Simply, leave the Date field empty.
Enter the Visual Rule Builder

When you click Finish, a synopsis of the rule looks like this:

Try the form and see that the rule works as expected.

Automatically fill in user details to reduce data entry

Many business forms – consent forms, emergency contact, expense report, new hire onboarding and so on – require users filling them out to enter today’s date and their personal information such as first name, email address etc. 

Enter the Visual Rule Builder

You’ve built a form with a few fields shown below. There’s a date field for Today’s Date and a Personal Info section with some user-specific data.

This rule initializes fields meaning we want it to run when the form loads up. When you open the Rule Builder wizard, on the Condition screen simply check the Initialization Rule Only box and click Next to advance to the actions screen.

In this case, we have many actions since we want to set multiple fields on the form. You can click the Add Action button at the top to create as many as you want. You can rearrange these actions using the up and down arrows. In this case, we have seven fields.

For each action, choose which field you want to Set from the pick list. The pick list shows all available fields. You can also start typing to narrow the list of choices.

For each action, select an operation that corresponds to what you want to do. The list shows all available options for the chosen form field. You can set a value, set a label, show/hide the control, enable/disable the control etc. In this example, we wish to initialize the controls and we’ll choose the “to” option for all fields.

For each action, what do you want to set the chosen field to? You can use the slider to choose a literal value (e.g. 3 or the string “Joe”) or a function/expression. We’ll deal with expressions in a later example. In this case, we want to use built-in functions for today’s date and user information. Start typing in the text box and matching functions will pop up. It’s very similar to Excel or Google Sheets. For each function, available parameters and detailed help is also displayed.

When you’re done with all the fields in our form, it’ll look like this. We’re setting the TodayDate field to today’s date using the today() function and the various Personal Information fields to user-specific information using the appropriate userXXX() function.

Since this is an initialization rule, there is no condition and no corresponding false actions. Click Finish and you can see a synopsis of the rule. If you need to change something, simply click any pencil icon.

Test the form. You’ll see that all fields are automatically initialized to the appropriate values as soon as the form loads.

Perform calculations

Real-world forms and workflows have many kinds of business requirements and another extremely common one is the need to compute a subtotal and a grand total in a table of line items. Think invoices, purchase orders, expense reports, reimbursement forms, sales orders.

The form might look something like this. There’s a Table with four columns : Item description, Quantity, Unit Price and Subtotal. The Subtotal for each line is computed as the product of Quantity and Unit Price. There’s also a Grand Total which sums the individual line items.

With the VRB, it’s simple and anyone can do it.

We’ll create two separate rules, one for the subtotals and another one for the Grand Total.

First, let’s take a look at the three parts of the rule for the subtotal.

1. In this case, a Subtotal can only be calculated when we know the Quantity and Unit Price so we set that up as the condition in the first panel of the VRB. Since there are two fields, you’ll have to click Add Condition to add a second one.

By default, all conditions must be true as the Logic Expression box shows (1 and 2). You can edit this expression and change it as desired. In this case, we want both fields to be filled so we leave the default unchanged.

2. The next step is to define what actions to take when the condition is TRUE. Once again, with the VRB, it’s straightforward. We want to multiply Quantity and Unit Price.  So, we simply Set the Subtotal to the desired expression. We don’t have to worry about the fact that these are repeating fields in a table, there’s no for loop or array indexes to consider.

3. Finally, in the last panel of the VRB wizard, we set the Subtotal to empty when the condition is FALSE. This ensures that the Subtotal will be cleared if Quantity or Price are empty.

Now, let’s take a look at the Grand total calculation.

  1. On the first panel, there is no condition required so leave it empty.
  2. On the next panel we use a function to set the Grand Total to the Sum of all the Subtotal fields. That’s it. The SUM () function is smart enough to ignore empty rows and treats them as 0’s.
  3. Since there is no condition, there is no false action to specify. Click Finish.

The final rules look like this.

Test the form. You’ll see that the Subtotals and Grand Total are automatically computed as desired.

There’s no need to fiddle with loops or repeating fields or to deal with situations like a row being added or removed. The VRB handles all the details behind the scenes.

Show fields or workflow steps only when relevant

Another common business rule is where you want to show or hide certain parts of the form e.g. a Section or Tab depending on data that’s been entered into the form elsewhere. In the Visual Rule Builder video, you saw how to collect a Billing address only if it is different from the Shipping address.

Let’s take a look at another example – a new employee on-boarding workflow where the user has to fill in a Federal I-9. The Federal form asks for Eligibility Status and for one of those statuses – an alien authorized to work until a certain date – the employee has to provide additional information.

With the VRB, it’s again very straightforward.

  1. As usual, set the condition first. In this case, we use a Literal value “WorkAlien” which is the value of the radio button in question.
  2. When true, we make the AlienNumbers section visible.
  3. When false, we hide it.

What’s the condition that causes the rule to fire?

What action(s) should be taken when the condition is true?

Optionally, What actions should be taken when the condition is false?

The VRB will generate a rule as shown below:

When you run the form, it works as expected. Choose the appropriate option (alien authorized to work …) and the required Section shows up. For any other option, the Section in question is not visible exactly as desired. As with all frevvo forms and workflows, it’ll just work automatically on mobile devices.

Simple and easy. 

Show/Hide the Manager Approval Step

Show/Hide is also very common in approval workflows where we only want to show a section on a particular step. Let’s say you had a three step expense report workflow. Step one is filled in by the employee, step two goes to their manager for approval, step three goes to the finance department for final processing if approved.

We have created Manager Approval and Finance sections in the form.

Show/Hide the Manager Approval Step

We want to hide the Manager Approval section when the employee is filling in the Expense Report and only show them when the workflow is routed to the Manager and Finance department.

Enter the Visual Rule Builder

With the VRB, it’s simple. Create a rule and on the condition screen, pick current step in the first drop down, “is on or after” from the second drop down then select the Manager step from the third dropdown. Click Next to advance to the TRUE actions screen.

Here we will specify the action to show the Manager Approval section on the Manager and Finance steps. See the image below. Click Next.

When the workflow is on the Employee step, we want to hide the Manager approval section. See the image below.

When you click Finish , the final rule looks like this:

Show the Manager Approval section on the Manager and Finance steps. Hide them on the Employee step

Run the workflow. Notice the Manager and Finance sections (there’s a separate rule for the Finance section) are hidden on the Employee step and show when the flow navigates to the Manager and Finance steps.

The Manager sees this screen:

The Finance department sees this screen:

What about JavaScript rules?

If you need to edit the generated code, you can click Rule Code and make changes manually to the generated JavaScript.

Existing JavaScript-based rules will continue to work and you can also create new ones. There is no lost or deprecated functionality. Some things are impossible to do using wizards e.g. connecting to an external web service (API) and parsing the result in specific ways.

These are just some examples of creating dynamic behavior using the Visual Rule Builder. Citizen developer or JavaScript expert, the Rule Builder is a powerful tool that generates code based on your visual input.

Why not give it a whirl? Sign up for a free trial and see for yourself. It takes 30 seconds, and you can install a template and try it out instantly.


Ashish Deshpande has worked in the process automation space for over 20 years. He has been instrumental in successfully deploying frevvo’s software at hundreds of organizations such as HBO, New York University, and Boston Public Schools. Ashish has contributed to leading publications such as Forbes, and Ashish received a PhD in Computer Science from Yale University, and a Bachelor of Technology in Computer Science and Engineering from the Indian Institute of Technology, Mumbai, India.