Tag: dynamic web forms

[Video] Visual Rule Builder (V7.4)

vrbV7.4 has been released and it comes with a bunch of new things – the most exciting feature is the upgraded Visual Rule Builder.

Many customers use frevvo to create forms with extensive dynamic behavior. They love the flexibility and power of frevvo when it comes to creating dynamic forms. With frevvo’s Visual Rule Builder, it’s easier than ever to create these dynamic behaviors and anyone can do it.

Watch this short video that shows you how easy it is to use the Visual Rule Builder to create dynamic content.

Customers are using frevvo for things like:

  • Showing fields only when they’re relevant
  • Automatically filling in fields
  • Performing calculations

and many others.

View-Recording

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.

 

Visual Rule Builder Part 2: Subtotals and Totals

rules.jpgIn a previous article, we discussed how the Visual Rule Builder (VRB) update – it looks like it’s coming next weekend and we’re really excited – makes it super-simple to initialize forms with the current date, personal information etc.

Of course, real-world forms and workflows have many kinds of business requirements and another common one is the need to compute a subtotal and a grand total in a table of line items.

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.

Screen Shot 2017-12-05 at 1.58.35 PM.png

Prior to the VRB, you’d have to write a JavaScript rule as shown below

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.

Enter the Visual Rule Builder

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.

1. Open the VRB and set the condition. This is when we want the rule to fire. In this case, a Subtotal can only be calculated when we know the Quantity and Unit Price so that’s what we setup in the first panel of the VRB wizard.

Screen Shot 2017-12-05 at 2.34.50 PM.png

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

Screen Shot 2017-12-05 at 2.38.18 PM.png

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.

Screen Shot 2017-12-05 at 2.39.47 PM.png

4. The last step is to calculate the Grand Total. Finish the above rule, create a new one and open the VRB. There is no Condition required so leave it empty. On the next panel we use a function to set the Grand Total to the Sum of all the Subtotals. That’s it. The SUM () function is smart enough to ignore empty rows and treats them as 0’s.

Screen Shot 2017-12-05 at 2.42.49 PM.png

5. The final rules look like this.

Screen Shot 2017-12-05 at 2.44.35 PM.png

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

Screen Shot 2017-12-05 at 2.47.17 PM.png

That’s it. Quick and easy – anyone can do it. This VRB update is coming really soon and we’re very excited about it because simplifying JavaScript rules has been a high-priority request from our customers. Contact us for more information and to try out the VRB for your own business forms.

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.

V7.3 – Dynamic pick lists & web services

One of the most common features our customers use is dynamic pick lists (or radio/checkbox controls). Examples abound such as a List of products for a Sales Order / PO, Number of available vacation days for a Leave Approval, List of projects for a Time Sheet and many others. With frevvo, you could always setup dynamic options using a business rule written in JavaScript.

/*member productCode, productName, resultSet*/
var x;
if (form.load) {
eval(‘x=’ + http.get(‘http://localhost:18080/database/BIRT/allProducts&#8217;));
var opts = [];
for (var i=0; i < x.resultSet.length; i++) {
if (x.resultSet[i]) {
opts[i] = x.resultSet[i].productCode + ‘=’ + x.resultSet[i].productName;
}
}
Products.options = opts;
}

V7.3 – no JavaScript

Products-WS
Selection Control connected to a web service

Starting with V7.3 (late August 2017), you can select an Options Source in the Properties pane for the selection control (drop down, radio or checkbox). By default, the Source is Design Time which simply means the choices are static and the designer specifies the list of options by typing them in at design time. But, you can now select Web Service. If you do that, three additional properties appear below:

 

  • Options URL: This is the end point for the web service. If you’re using the database connector,  it’ll be the same as the URL used in the JavaScript rule above. The assumption is that this call returns either XML or JSON.
  • Value binding: the path in the returned XML or JSON that determines the value of the select control (what’s in the submission).
  • Label binding: the path in the returned XML or JSON that determines the label of the select control (what the user sees).

That’s it. The URL can also be dynamic.

Edmunds
Selection control connected to the Edmunds API

For example, the screenshot at left shows a checkbox control that’s connected to the Edmunds API. The Options URL depends on the Year since that web service API returns Car Makes for a particular year. The URL is set to:

https://api.edmunds.com/api/vehicle/v2/makes?state=new&year={Year}&view=basic&fmt=json&api_key=<key hidden>

When the user types something in Year, the web service is automatically called, the results are refreshed and the choices in the Car Makes checkbox will change based on whatever the web service returned.

V7.3 will be released at the end of August. Visit our website and sign up for a free 30-day trial if you’d like to learn more or contact us for more information.

How To: Dynamic email addresses

A question we get asked frequently is how to send an email from a form or flow submission where the email address of the recipient is dynamically determined at runtime. For example, I have a drop down control and if the user selects HR, I want the email to go to the HR Department (hr@example.org) and if the user selects Finance, I want to send it to Finance (finance@example.org).

It’s very easy in frevvo.

1. Create a hidden Email control in your form.

AdminEmail

Drag & drop an Email control in your form. In the Properties panel, uncheck Visible so the control is hidden from the end user. Name the control Admin Email. We assume that you already have a drop down control (in the screenshot, it’s called Department and the choices are HR and Finance).

When the user selects HR from the Department drop down, we’ll set the Admin Email hidden control’s value using a business rule.

2. Set the Admin Email address using a business rule

Create a simple business rule.

if (Department.value == ‘HR’) {
AdminEmail.value = “hr@example.org”;
} else if (Department.value == ‘Finance’) {
AdminEmail.value = “finance@example.org”;
} else {
AdminEmail.value = null;
}

In frevvo’s Winter release (expected in late 2017), you’ll be able to create these type of rules visually with the Visual Rule Builder.

3. Use the Admin Email control in the To: email

AdminEmailWizard
Email Wizard that uses a control template

In any Email wizard, you can use the Admin Email hidden control for the To:, Reply to:, Cc: and other fields. In the above example, we’ve used it for the To: field.

That’s it. When the User selects HR, the rule will set the Admin Email control to hr@example.org. When the form is submitted, the Admin Email template in the To: field will be evaluated and will resolve to the value of the corresponding control (hr@example.org). The email will be sent to the dynamically resolved email address.

frevvo + Google Apps: Part 4. Updating a Google Sheet

Does your organization uses Google Apps? You can combine frevvo + Google Apps to create some really cool and useful solutions. In Part 1 of this series, we saw how you can save (write) submissions to a Google Sheet. In Part 2, we saw how you can use the Google Distance Matrix API to automatically calculate mileage and reimbursement amounts. Part 3 showed you how to create dynamic pick lists from a Google Sheet (read).

google-ss-loc-ext
Google Sheet: Employee Location and Extension

Today, we’ll take a look at how you can update existing values in a sheet. It’s another common scenario that can be used for a variety of tasks (e.g. limiting the number of submissions for a particular form or creating a sequentially increasing counter). We’ll use this sample Google Sheet to discuss. It has a row for each employee: Employee Id, Location and Extension.

First, it’s important to note that Google Sheets is not a transactional system like a database and results can be unpredictable if multiple users update the same Sheet at the same time.

As before, you have to first get an access token. This is a one-time step. Login to your Google account and then visit: https://app.frevvo.com/google/consent. Follow the prompts and copy the access token and save it. Detailed documentation is here.

We’ve created a simple example form. Select the employee, a location and a new extension number. Click the Update Google Sheet button, wait a few seconds and see that the sheet was successfully updated. We did this using this rule:

if (UpdateGoogleSheet.clicked) {
var eid = EId.value; // Unique key in the Google Sheet row
var headers = ‘{“user”:”<google id>”,”password”:”<access token>”}’;
var updatequery = ‘/google/spreadsheets/update/key/<spreadsheetkey>?wsname=Locations&query=employeeid=”‘ + eid + ‘”‘;
var updateparams = ‘&updates=location=’ + Location.value + ‘,extension=’ + Extension.value;

eval(‘x=’ + http.put(updatequery + updateparams, null, headers, false));
}

  1. It’s triggered by clicking on the Update Google Sheet button.
  2. We setup headers and an update query using your access token and spreadsheet key (the long ID in the URL of the Google Sheet).
  3. Add updateparams: we’re updating location and extension with new values.
  4. Run the update – perform an http.put() and eval the results.

Try it yourself using the sample form.

Interested in learning more? Visit our website to view examples, watch videos, sign up for a free 30-day trial or contact us for more information.

Like what you see? Check out Part 5 which shows you how you can save documents generated by your frevvo form to Google Drive.

 

frevvo + Google Apps: Part 3. Dynamic Pick lists.

Does your organization uses Google Apps? You can combine frevvo + Google Apps to create some really cool and useful solutions. In Part 1 of this series, we saw how you can save submissions to a Google Sheet and in Part 2, we saw how you can use the Google Distance Matrix API to automatically calculate mileage and reimbursement amounts.

employees-sheetToday, we’ll take a look at dynamic pick lists (drop downs). It’s a very common scenario and, with frevvo, you can use business rules to dynamically initialize the options (choices) in a pick list from a Google Sheet. We’ll use this sample Google Sheet to discuss. It has a row for each employee: First Name, Last Name, Employee Id.

First, you have to get an access token. This is a one-time step. Login to your Google account and then visit: https://app.frevvo.com/google/consent. Follow the prompts and copy the access token and save it. Detailed documentation is here.

We use a rule to read information from the Sheet and populate the employee pick list. Here’s the relevant business rule:

var x;

if (Connect.clicked) {
var headers = ‘{“user”:”sales@frevvo.com”,”password”:”<access token>”}’;
var readquery = ‘/google/spreadsheets/query/key/<spreadsheetkey>/w/Employees’;
eval(‘x=’ +http.get(readquery,headers));

var opts = [”];
for (var i = 0; i < x.results.length; i++) {
opts[i + 1] = x.results[i].employeeid + ‘=’ + x.results[i].firstname + ‘ ‘ + x.results[i].lastname;
}
EId.options = opts;
}

  1. It’s triggered by clicking on the Connect button.
  2. We setup headers and a query using your access token and spreadsheet key (the long ID in the URL of the Google Sheet).
  3. Run the query – perform an http.get() and eval the results.
  4. Parse the results into an array. The array elements are “hagen=Walter Hagen” etc.
  5. Set the options to the array.
googleapps-picklist
Dynamic pick list from a Google Sheet. Click the image to try it.

The pick list will display the actual names (Walter Hagen, Alexa Stirling etc.) whereas the values returned upon selection will be the ids (hagen, stirling etc.) so it’s easy to perform further lookups.

You can try it yourself by clicking this link or on the image.

Interested in learning more? Visit our website to view examples, watch videos, sign up for a free 30-day trial or contact us for more information.

Like what you see? Check out Part 4 which shows you how you can update a Google Sheet with values from a form.