Posted in Forms, Workflows

Visual business rules for dynamic forms

Does Anyone Know Where We Keep the Unwritten Rules cartoon. Man shuffling papers from a file cabinet.

Business and educational forms & processes are usually dynamic – think purchase orders, emergency contact forms and travel requests. Our customers love how easy it is to visually design forms. With the Visual Rule Builder, they can easily create dynamic forms without the need to know JavaScript.

Learn more: Watch this 6m video to quickly learn more.

List of functions, mathematical operations supported by the Visual Rule Builder and images of the Condition, Action and Else Action wizards.
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.

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.

Learn more: Unfamiliar with form design? Watch this detailed tutorial video.

frevvo screen with First Name, Last Name and Full Name fields.

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.
Action wizard for the Concatenate First and Last Names rule - Screen shows Set FullName to FirstName + " "+LastName.
Populate Full Name with First and Last Name

The final rule looks like this:

Completed Concatenate First and Last Name rule.

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

frevvo screen after the Concatenate First and Last Names rule runs - screen shows First Name = Dorothy, Last Name = Green, Full Name = Dorothy Green.

Fill in the date automatically when the user signs

Approval steps in workflows commonly have 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.

You can manually add JavaScript like this but this simple rule can get complicated very quickly.

var event = form.load;
if (Boolean(SignHere.value)) {
  Date.value = frevvo.currentDate();
} else {
  Date.value = null;
}

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.
Condition, Action and Else Action wizards for the Fill in the date automatically when the user signs rule. Screen shows Condition wizard - Set the Signature field  and "is filled" selected for the condition, Action wizard - shows Set Date to and the today() function to fill in the Date field with today's date, Else Action wizard -shows Set Date to empty.

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

Completed Fill in the date automatically when the user signs rule.

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

frevvo screen when the Fill in the date automatically when the user signs rule runs. Signature is filled and Date fields shows the  current date.

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. A JavaScript-based rule might look like this:

if (form.load) {
    TodayDate.value = frevvo.currentDate();
    var ud = frevvo.userDetails();
    UserId.value = ud.id;
    FirstName.value = ud.firstName;
    LastName.value = ud.lastName;
    FullName.value = ud.name;
    EmailAddress.value = ud.email;
    ManagerId.value = ud.reportsTo;
}

It’s easy to make a mistake and hard to debug.

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.

frevvo form with Today's Date, User Id, First Name, Last Name, Full Name, Email Address and Manager Id fields.

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 lists shows all available fields. You can also start typing to narrow the list of choices.

Action wizard - choose which field(s) you want to Set from the Set column pick list. Screen shows these fields selected - Date, User Id, First Name, Last Name, Full Name, Email Address and Manager Id fields.

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.

Action wizard - shows operations that corresponds to what you want to do for Date, User Id, First Name, Last Name, Full Name, Email Address and Manager Id fields. to is selected 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.

Action wizard - screen shows built-in functions for Date, User Id, First Name, Last Name, Full Name, Email Address and Manager Id fields. today function for Today's Date, userID function for User Id, userFirstName function for First Name, userLastName function for Last Name, userEmail function for Email Address, userFullName function for Full Name, userManagerID for Manager Id fields.

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.

Completed Action wizard screen with all fields set to corresponding functions.

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.

Completed Automatically fill in user details to reduce data entry rule.

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

frevvo screen with Date, User Id, First Name, Last Name, Full Name, Email Address and Manager Id fields initialized with the correct information.

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.

Learn more: Unfamiliar with form design? Watch this detailed tutorial video.

frevvo screen with a table that has Item, Quantity, Unit Price and Subtotal columns. Grand Total field below the table.

A JavaScript rule might look like this:

var tot = 0;
for (var i = 0; i < Quantity.value.length; i++) {
    if (Quantity[i].value > 0 && UnitPrice[i].value > 0) {
        var subtot = Quantity[i].value * UnitPrice[i].value;
        Subtotal[i].value = subtot;
        tot += subtot;
    } else {
        Subtotal[i].value = null;
    }
}
GrandTotal.value = tot;

Once again, it’s not wildly complicated but there are a few quirks that could trip up someone who’s not used to coding e.g. a temporary variable is required to compute the Grand Total, there’s a for loop and the repeating fields need to be treated as arrays. The syntax can be a bit confusing, it’s easy enough to make a mistake and hard to debug.

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.

Condition wizard for the Calculate Subtotals rule - Screen shows if Quantity is filled and Unit Price is filled seected.

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.

Action wizard for Calculate Subtotal rule - screen shows Set Subtotal field to Quantity * UnitPrice.

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.

Else Action wizard for the Calculate Subtotals rule - screen shows Set Subtotal field to 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.
Action wizard for the Calculate Grand Total rule - screen shows Set the Grand Total field to sum of Subtotal fields.

The final rules look like this.

Completed Calculate Subtotal and Calculate Grand Total rules.

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

frevvo form with table columns filled in to calculate Subtotals for each row. Grand Total field shows sum of values in the Subtotal column in each table row.

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.
Condition wizard for Show/Hide Alien Numbers section in the Federal I-9 when the user selects "Work Alien" in the  radio button in the I-9 form.  Screen shows the field Citizen Status is equal to the literal Work Alien. The toggle before the third column is slid to the right to enter "Work Alien" as a literal.
What’s the condition that causes the rule to fire?
Action wizard for Show/Hide Alien Numbers section in the Federal I-9 when the user selects "Work Alien" in the  radio button in the I-9 form.  Screen shows Set the AlienNumbers field to visible.
What action(s) should be taken when the condition is true?
Else Action wizard for Show/Hide Alien Numbers section in the Federal I-9 when the user selects "Work Alien" in the  radio button in the I-9 form.  Screen shows Set the AlienNumbers field to hidden.
Optionally, What actions should be taken when the condition is false?

The VRB will generate a rule as shown below:

Completed Show/Hide Alien Numbers section in the Federal I-9 when the user selects "Work Alien" rule.

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. 

frevvo screen after the user checks "Work Alien" in the Eligibility Status radio button in the I-9 form. Previously hidden Alien Numbers section is now visible.

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.

Manager Approval and Finance sections in step 1 of the Expense Report workflow.
Manager Approval and Finance sections in the Flow Designer

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.

Expense Report workflow in the frevvo flow designer. It has 3 steps - Step 1 - Employee fills in Expenses, Step 2 goes to their Manager for approval/rejection, Step 3 - goes to the Finance department for final processing if approved by the Manager.
Expense Report with three steps – Employee, Manager, Finance

Prior to the Visual Rule Builder, you’d need to use JavaScript similar to this:

if (form.load) {
  var an = _data.getParameter ("flow.activity.name");
  if (an === 'Manager' || an === 'Finance'){
    ManagerApproval.visible = true;
  } else {
    ManagerApproval.visible = false;
  }
}

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.

Condition wizard for the Show/Hide the Manager Approval Step rule. Screen shows current step is on or after Manager step.
Condition wizard

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

Action wizard for the Show/Hide the Manager Approval Step rule. Screen shows Set Manager Approval Section to visible.
Action wizard

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

Else Action wizard for the Show/Hide the Manager Approval Step rule. Screen shows Set Manager Approval section to hidden.

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

Completed Show/Hide the Manager Approval Step rule.
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.

Manager Approval Step when the Expense Report Workflow is run, Screen shows Manager Approval section visible with comment and signature fields.
The Manager sees this screen
Finance Step when the Expense Report Workflow is run, Screen shows Manager Approval section visible with comment and signature fields and Finance section with Paid On Date and Reference Number fields
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 HTTP URL 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.

One thought on “Visual business rules for dynamic forms

Leave a Reply