Category: HowTo

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’));
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 7.1: Submissions Search

We’re always working on improving frevvo based on customer feedback. We have ambitious longer-term plans but we’re tackling some of the most common requests ASAP.

frevvo V7.1 (which will be available later this year) includes one such item: the ability to search for submissions based on form data. There’s also a new Submissions View and Excel export. Let’s take a look using a Contact Form.

searchable-fields
Searchable Fields wizard

First, you have to define your Searchable fields using a wizard. Simply add/remove Searchable fields as desired. Once defined, frevvo can also go back and re-index your existing submissions so you can search them using the same fields. In our Contact Form, we’ve chosen First Name, Last Name and Email Address.

Then, go to the Submissions View for the form. By default, you’ll see the Submissions for the past month with no other filters applied. Searchable Fields appear in the table if they fit.

Expand the Submissions Filter Section. You can filter and search for submissions by a wide variety of criteria. There’s Date Range and Submission State but you can choose other criteria including the Searchable fields. You can also create a logic expression as shown in the image. We’re searching for Submissions this year where the email address contains frevvo.com and the first name begins with either M or P as the shown in the logic expression field.

filter
Filter/Search for submissions

If the columns don’t fit on the screen (for example, on a mobile device), you can click + for any row to view them. As usual, you can double click any submission to view details (XML document, PDF, attachments, signatures etc.) and delete unwanted submissions.

submssions
Expand/Collapse individual submissions to view details

Similar functionality is available in the Task List as well – we’ll describe it in a separate article. And, in a future release, we plan to unify these user interfaces so you can handle tasks, submissions and reports from the same place in the UI.

Workflows: Approve vs Deny vs Reject

PurchaseApprovalWhile working with customers, I’ve recently noticed that a lot of approval steps in a workflow have three possible outcomes. Consider a Purchase Requisition workflow where an Employee wants to buy something and it goes to his/her Manager for approval. If approved, the next step is Purchasing.

What actions could the Manager take?

  1. He could Approve in which case the workflow moves forward to Purchasing.
  2. He could Reject back to the employee asking for more information in which case it moves backward to the Employee.
  3. Or, he could Deny the request completely (Reject to discard) in which case the workflow should move forward, skip the Purchasing step and terminate.

With frevvo, the Approve case is trivial. It’s the default behavior. Reject back to the Employee is also straightforward. It’s built-in to frevvo and can be configured for any step.

Deny (Reject to discard) is also easy but not so obvious. We’re considering adding this as a built-in feature but you can do this today by taking a few steps.

Step 1. Create an approval section with a Radio button

RequestStatus

The radio has two options: Approve or Deny. Deny is the second (last) option and the Comment property is checked. If the Manager clicks Deny, a text box will show up below the radio asking for details. Note the Name (set to RequestStatus) and Options (values are Approve and Deny) properties of the Radio control. You can also set the control to invisible and create a rule to show/hide it in the appropriate flow step (Manager in this case). For example:

if (form.load) {
var an = _data.getParameter(‘flow.activity.name’);
RequestStatus.visible = (an !== “Employee”);
RequestStatus.enabled = (an === “Manager”);
}

Step 2. Set Preconditions

PreconditionIn the Flow Designer, select the Purchasing step. Set the precondition as shown in the image to:

RequestStatus.value === “Approve”

This will evaluate to true only if the Manager selected Approve in the Radio we created earlier. If it’s false (Manager selected Deny), the Purchasing step will be skipped and the workflow will terminate.

Step 3. Setup Reject

SetupRejectIn the Flow Designer, select the Manager step and then click the Setup Approval/Rejection link in the Properties panel.

In the wizard that shows up, you can check Reject from here, Reject to here, change the label of the Reject button itself and customize the subject/body of the notification email.

Repeat this step for any other step from which you wish to Reject.

That’s it. Now, the Manager can:

  1. Select Approve in the Radio and continue the workflow. It will move to Purchasing.
  2. Select Deny in the Radio, provide a reason and continue the workflow. It will skip Purchasing and terminate.
  3. Click the Reject button and send the workflow backwards to the Employee for more information.

PDF Mapping – generate a W-4

It’s a common requirement among our customers – they want to generate their own PDF document. For example, a Federal W-4 or I-9 during Employee On-Boarding. You can try an example by clicking on this link or download the form here if you want to view in detail. You can also find detailed documentation on our website.

Let’s take a quick look at the steps:

Step 1. Create your form or workflow as usual. You can use business rules, signatures and all frevvo’s features as usual.map-pdf

Step 2. Click on the toolbar button to View Generated Forms, click New and upload your PDF. Note that it must be an Acroform but you can easily convert any PDF using free, online tools. Then, click the Map Fields button. After saving your form, frevvo will display the PDF with mappable fields highlighted.

Step 3. Open the Form Outline at left in the designer and simply drag & drop fields from the outline onto the PDF to map. Alternatively, you can double click any PDF field and map a frevvo field in the wizard that shows up. You can even drag in a Signature field into the PDF to map it. (Note that the standard W-4 downloaded from the IRS website does not have a mappable field for the Signature and associated date. You can download a modified 2016 W-4 PDF at this link.)

map-fields
Drag & drop from the left outline onto any PDF field to map

To facilitate viewing, you can also drop a Form Viewer control onto the form and choose the mapped W-4 in its properties.

w-4-mapped
Generated W-4. Click image to zoom.

That’s it. Try it out and see that frevvo generates the W-4 with form data mapped to the proper fields. Even the signature is properly mapped. This generated W-4 is valid and can be used to send to the IRS.

You can also generate multiple PDFs, conditionally generate some PDFs and not others (e.g. a state W-4 depending on which state the employee resides in), save these PDFs in back end systems, send them by email etc.

Try it out for yourself. Sign up for a free 30-day trial on our website, upload the template form and see give it a shot.

 

Using Control Templates

When designing forms and workflows, there are some common use cases that come up very frequently. Some of these have associated business rules. Control Templates provide a mechanism for building these once and re-using them many times. Let’s take a look at an example and see how you can use it. You can try these templates by clicking on this link and download the form here if you want to view them in detail.

Automatically set today’s date

Purchase Order, Employee On-Boarding, Expense Report, Leave Approval and many other forms have a date control that should be automatically set to today’s date. Instead of making the user type it in, we can just set it up automatically with a trivial business rule:

if (form.load) {
if (tDate.value.length === 0) {
tDate.value = frevvo.currentDate();
}
}

Easy enough. Now, let’s turn it into a reusable control template.

Step 1: Put the Date control in a Panel and give it a nice user-friendly name like Current Date Panel. You can publish just the control but it’s necessary to put it into a panel so that the associated rules get carried along.

datePanel
Panel with a User-Friendly Name

Step 2: Drag the Panel into the Custom palette. Hover the mouse over the header of the custom palette area while dragging. The header and drag icon will change and you can drop the control into the palette.

customPalette
Drag/Drop into Custom Palette

Step 3: When you drop it in, a wizard appears. Enter any desired tags, a description and make sure you check the box next to the rule. The read-only box will automatically get checked. The tags can be used later by other designers to find the published custom control. The read-only box prevents changes to certain properties that could cause the associated rule to fail. Then click Submit and Voila! You have a published custom control.

publish
Publish Wizard

 

How can another designer use it?

It’s simple. In the Form Designer, open the Custom Palette and click the Search link. In the wizard that shows up, you can view all published custom controls or enter a string and click the Search Controls button to narrow the list by tag. When you find the control you want, check the box next to it and click Finish.

searchCustom
Find Published Templates

The control will appear in your Custom Palette from now on every time you open the Form Designer. To use it, simply drag & drop it from the Custom Palette into your form. The layout and behavior will be preserved. In this example, the date will automatically initialize to the current date.

The example form above also contains templates for calculating a sub-total and grand total for line items in a Table and for initializing controls automatically with the currently logged-in user’s information (e.g. First Name, Last Name). You can download the form by clicking on this link to view the controls and associated rules. We’ll discuss these examples in a separate how-to article.