Visual Rule Builder (VRB): Part 1

In recent articles, we’ve discussed how frevvo and other low-code platforms are making it easier for citizen developers who aren’t coders-by-trade to create effective, high-quality apps. Customers love the flexibility and power of frevvo when it comes to creating dynamic forms but, sometimes, they struggle with writing business rules in JavaScript.

We’re constantly working on improving our product to reduce the need to write code. We’re about to release an upgrade to the Visual Rule Builder (VRB) that’ll let you visually create even more dynamic behavior. Let’s take a look at an example. One of the most common business rules is to initialize a form with the current date and user data (first name, email address etc.) Until now, you had to write a rule 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. In subsequent articles, we’ll see examples of even more complex rules.

Enter the Visual Rule Builder

Setting up your form for the above dynamic behavior is trivial with the VRB.  You simply use visual wizards. Let’s say, you’ve built a form with a few fields shown below. There’s a date field for Today’s Date and a Persona Info section with some user-specific data.

00-Date-Personal-Form.png

1. After you open the Rule Builder wizard, choose which field you want to Set from the pick list. The pick lists shows all available fields.

02-Choose-Field

2. What do you want to do? 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 accordingly.

03-Choose-Operation

3. What do you want to set it 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 post. 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.

05-Choose-Function

4. 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.

06-All-Fields-Set

5. When you click Finish, the VRB wizard pops down and you can see a synopsis of the rule. Click any pencil icon to edit the rule and change the actions being taken.

07-Final-Rule

 

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

08-Test-Form.png

That’s it. Quick and easy – anyone can do it. This update to the VRB will be available in December 2017 (just a few days). Making JavaScript rules easier is one of the highest priority items for our customers and we’re excited about this capability. Subsequent posts in this series will explain other examples of rules that are much easier using the VRB.

One thought on “Visual Rule Builder (VRB): Part 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s