Category: Forms

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.

[White Paper] Easy, Visual Forms and Workflow

PeopleFirst

Every business has its own set of approval processes. The general concept is straightforward: deliver information from Point A to Point B with all the required checks, authorizations and reviews. At the same time, the world is now online, mobile and 24×7. Paper- and email-based processes are ill-adapted to function in this environment. Workflow Automation helps you transition these key processes online so they work on mobile, are available 24×7 and operate efficiently.

The problem is that there are dozens of processes from Finance to HR to Sales & Marketing to Operations, and I.T. organizations simply cannot cope. Using traditional approaches to software development, automating these workflows would take years and cost an astronomical sum of money. These methods cannot keep up with the speed and agility demands of the modern enterprise.

That’s where a platform like frevvo can make a huge difference. The 100% visual, low-code solution delivers extraordinary capabilities:

  • Visual form & workflow design
  • Point-and-click integration using wizards
  • Visual business rules
  • Built-in Mobility
  • A fast, beautiful user experience
  • Top-notch customer support, security
  • and more …

Download this white paper which discusses workflow automation, how your organization can benefit, and how you can evaluate and deploy a visual, low-code platform like frevvo for your automation needs.

Download-White-Paper

Visit our website to learn more and sign up for a free trial.

10 best practices for mobile form design

if_seo_web-46_1046182.pngUX Matters had this interesting article on mobile form design. At frevvo, we’ve created thousands of forms and workflows for mobile devicesand we’ve learned a lot along the way. One thing is absolutely true:

“As technology continues to go through metamorphoses and our understanding of users’ needs becomes more refined, good mobile form design is constantly evolving.”
– Quoted from above article

Getting your forms to be genuinely usable on mobile devices is hard but can have big benefits. Fortunately, with frevvo, you don’t have to worry too much about this. Let’s take a look at a few things mentioned in the above excellent article:

1. Use a single input field where possible

It’s all well and good to say create a single input field called Name but if the form integrates with your CRM or some other back end system, maybe a First and Last name are required. With frevvo, you have all the flexibility in the world. Display a single field on the form called Full Name and use a business rule to split it into First and Last name hidden fields if that’s what you need. There’s going to be some guesswork to split it accurately but you can automatically get it right most of the time. Serve the needs of your marketing team and your users at the same time.

2. Create a conversational flow

if_seo_web_2-43_1045323.pngAs Justin Mifsud pointed out back in 2011, “A form is a conversation, not an interrogation.” The flow of information in the form should have a conversational feel. Usually, this means split the form up into multiple pages that feel natural. But, you have to consider differences between mobile and desktop forms. What might be natural on a phone with its limited screen real estate doesn’t make sense on the desktop and could be irritating – why do I have to walk through so many steps?

Fortunately, frevvo makes it easy. Simply drag in Page Break controls and mark them smart phone only. On a desktop or tablet with lots of screen real estate, you’ll see the whole form (or Section or Tab). On the phone, it’s broken up into multiple pages with automatic Next and Previous buttons.

3. Automatically pre-fill values in fields

No explanation necessary – the less stuff users have to fill in the better off you are. This is one of frevvo’s strongest suits. You can pre-fill information from any number of sources. For example, check out this example that fills out Customer information from a SQL database. Another common example: if the user is logged in, you can automatically fill in their personal information. It eliminates errors, reduces typing and is far less frustrating for users.

For mobile users, frevvo supports functionality like GPS integration. You can use the GPS device on the phone to pre-fill an address field or figure out the location of the closest physical store and display it on the form.

4. Make forms accessible

From the UX Matters article: Of the people who have disabilities, 91% use a mobile device, according to a 2013 study (PDF) by the Wireless Rehabilitation Engineering Research Center. Wow! I had no idea. Technology, especially mobile technology is making the world more and more accessible to people with disabilities but only with accessible mobile design.

Fortunately, with frevvo, accessible design is just built-in. Our forms and workflows have been accessible (satisfying WCAG guidelines) for years. Government organizations worldwide have legal requirements to provide accessible forms and many are already using frevvo for their constituents.

5. Break up lengthy forms into steps or stages

if_seo_web-48_1046184.pngThis is very connected to #2 above. With frevvo, breaking up lengthy forms into steps is a piece of cake. What’s best is that you can design your form once and set it up so that it’s broken up into steps on a phone with automatically generated Next and Back buttons. On the desktop with its abundant real estate, you can simply show the entire form or break it up into fewer steps. Again, satisfy the needs of your users with a natural user experience no matter where you are.

You can also create multi-step flows in frevvo (we call them screen flows) that explicitly walk you through multiple steps on all devices with a progress bar / nav bar at the top etc. It’s totally up to you.

6. Create minimal forms, but ask the essential questions.

rb-03This is a particularly crucial aspect of form design. Obviously, in frevvo, you can create as minimal a form as you want. One of the most effective things we’ve found is context-sensitive show/hide. It’s easy with frevvo using simple, visually-built business rules. In any form that’s displayed, hide away unnecessary fields until they’re actually “essential”. For example, on an Employment Eligibility Verification form, some questions may only be applicable to non-citizens. Hide them away until the user selects the “I’m not a citizen” option.

You’ll find that users are less confused and more likely to complete and submit your form if the screen is less cluttered. It seems obvious and fortunately, with frevvo, it’s also a piece of cake.

7. Display mobile-friendly error messages.

cancel-153645_640.png

This is yet another crucial aspects of good UX. IMHO, this is applicable on all devices not just mobile. We’ve seen so many instances of forms where you fill it out, submit, the server thinks for a while and reloads the page with errors. The errors may be displayed at the top far away from the fields. It’s a nightmare.

With frevvo, user-friendly error handling has always been a priority. Validation of controls is instant and usually automatic. If there’s an error, the user will know immediately. The control visibly changes (color/icon) and an error message appears right below the control. You can customize this message to be meaningful to the user and it can even be configured dynamically so that it tells the user precisely what went wrong.

With frevvo, you also cannot submit invalid forms. If required controls aren’t filled in or there are errors and a user still clicks Submit, the form will automatically highlight the errors/missing data. If you want, you can also display one or more custom messages right above the Submit button that was clicked so the user knows that something went wrong.

The thing you want to avoid is “Oops! An error occurred. Please try later.” Nothing’s more frustrating for users. Fortunately, with frevvo mobile [and other] user friendly error handling is automatic and built-in.

8. Avoid using drop-down menus and lists.

It’s true. Long drop down menus/lists are not very user friendly on mobile. Where they can’t be avoided, frevvo does provide a natural mobile friendly experience. For shorter lists, we definitely prefer radio buttons. With frevvo, it’s easy to lay them out so that if two or more fit on a single row, they’ll be laid out side by side and consume less real estate.

frevvo also offers an auto-complete Combo box though we’ve found that it’s not necessarily a better experience on mobile than a pick list. The good news is you can choose whichever control makes sense for your needs.

More from frevvo

9. Bigger buttons, radios etc.

One of the other things we’ve learned is that it’s genuinely harder to click things with your fingers on mobile. Therefore, in spite of the reduced real estate, frevvo’s controls are subtly larger, buttons are just a bit bigger, radios are easier to click on etc.

10. Responsive forms

LandscapeWhen fonts are too small to read or the screen looks cramped, what will many users do? Rotate the device to landscape mode so there’s more horizontal real estate. Nothing’s more frustrating and annoying than to see the same size form with the same fonts displayed on the landscape screen – even Google and Amazon do it.

With frevvo, all this is just automatic. From big wide desktop screens to small smart phones, your forms will automatically adjust. Rotate your device – the form will expand to take up all available space. Zero CSS3 or HTML5 or any code. It just works.

11. BONUS – Good looks

Let’s face it. People are more likely to use UIs that look good. Forms aren’t the world’s sexiest user interface but they are ubiquitous. Might as well make them look great. With frevvo, that’s also automatic 🙂 Do nothing and your forms will just look good on all devices. And there are many little bits of eye candy such as decorators – add little meaningful icons to your controls e.g. an envelope for an Email field or a map marker for a Zip Code. Styles let you customize colors so your forms fit into your brand and website. These are little things but they can make a huge difference.

Mobile is everywhere and forms are everywhere. You probably have mobile users filling out forms and participating in workflows in your organization. With frevvo, make them mobile friendly without the need to spend significant resources and money.

 

 

 

Get people to actually use your shiny new workflows

infopath-replacement.png

Hint: It’s all about Usability!

You’ve invested in workflow automation. Looks great but sometimes getting people to actually use it can itself be a Sisyphean task. People resist change and will quickly fall back to bad habits like emailing PDFs and Excel spreadsheets around to manage key information.

So, how do you onboard your users?

1. Involve them from the beginning

This is a pretty obvious one. The earlier you get stakeholders into the process the more likely they are to adopt it. People are naturally more invested in a solution that they’ve had a chance to impact. Soliciting feedback and actually implementing suggestions are critical elements.

When we work with customers on a new project, we go to great lengths to set this up. We spend time upfront to make sure we’re building something users want and make sure there are at least a couple of UAT-Change Request Implementation cycles. That way, the people who have to actually use the new system can affect it.

2. Usability, Usability, Usability!

if_seo_web-34_1046124.pngI can’t stress this enough. It does not matter how robust and awesome your system is. If it’s hard to use, it will not be adopted. If it looks good and is easy to use, people will forgive other shortcomings.

Usability (for end users) should probably be your #1 criterion in selecting a workflow automation system. Some tips:

  • Great Looks: Employees are also consumers. They use slick apps everyday and get used to a fantastic UX. If work apps have old-fashioned, clunky UIs they’ll never catch on.
  • Sensible Terminology: Make sure your buttons, labels, messages are familiar and helpful. For example, if the workflow will route to the CFO for secondary approval the button should say “Route to CFO” rather than the generic “Continue”.
  • Help Text: Some fields require further explanation. The Label is not always enough. Take the time to add help and it can make a huge difference. Tooltips and placeholders are other options.
  • Mobile friendly: It has to work naturally on all devices. Buttons might need to be slightly larger on mobile so they’re easier to click using your finger. Forms may need to be broken up into multiple pages to avoid overwhelming smaller screens.
  • Speed: Don’t underestimate the value of performance. People love systems where they don’t have to wait around.
  • Consistency: A big part of great UX is consistency. Buttons should be in the same place, labels should follow consistent conventions, the look & feel should not vary dramatically from one process to the next.

3. Training / Feedback

1492276951_seo_web_3-01.pngEnd user training should be part of every rollout. But, it’s just the first step. Once people have used the new system for a period of time, they’ll have feedback for you. It’s worth going back and actually talking to stakeholders – is this helping you? Are you doing less manual work? Do you genuinely have more time for things that matter? What can we improve?

4. Iterative improvement

Once people tell you what you can improve, it’s important to go back and actually address issues as quickly as possible. Nothing’s more frustrating than getting it 90% right only to see users abandon your system because you overlooked a couple of things.

5. Communicate success

Share meaningful success stories with everyone involved in the system. Recognizing people’s efforts (company meeting, spot awards) in bringing change to the organization will always be appreciated as long as you don’t overdo it and the recognition is for real measurable gains.

Ultimately, though, we’d advise you to focus hardest on Usability. If they find it hard to use the new workflows, the rest doesn’t matter.

 

Workflow Automation Any_____

I spend a lot of time with our customers. Most of them easily grasp the benefits of process automation. But many of them still have questions that generally fall into the “Will it work with my _____”?

Automating manual processes helps reduce paperwork and increase efficiency for a 50 or 5000-person company, for those who prefer Cloud or On-Premise, independent of where the organization operates, and the systems you have. Let’s look at how:

Workflow AnyTime

time-sheet.pngYour customers, partners and users want to interact with your organization on their own timelines. Often, they’re distributed all over the world.

If you can only process Sales Orders, Purchase Requisitions and routine approvals during business hours in your timezone, you’re probably losing business and wasting people’s time.

Automated workflows with frevvo are instantly available 24×7 – there’s no need to wait till you’re in the office at your desk, approvals can be processed from any time zone worldwide and your business can flow faster.

Workflow AnyWhere

travel-auth.pngToday’s organizations are distributed worldwide. Your workflows need to be the same. Imagine a student trying to get approval from his/her Faculty Advisor for a time-critical paper or conference travel request. The Professor might be attending a conference, or giving a lecture at the Shanghai campus.

With frevvo the Professor can simply approve the request and sign it wherever in the world he/she is. The student doesn’t have to waste time chasing down the signature.

And, you won’t even have to worry about absent-minded Professors – frevvo’s software can automatically remind them if they don’t get around to signing in a timely manner

Workflow on Any Device

mobile-workflow-128.pngMobile is everywhere. I’m sure there’s no need to expand upon that. Students, workers, patients, customers all work with your organization on a bewildering array of mobile devices.

Your forms and workflows simply must work on mobile. They must be responsive, they must look and feel natural and they must be fast enough for slower mobile networks. It’s not trivial to do and the shortage of mobile developers exacerbates the problem.

Luckily, there’s frevvo. Simply design your forms and workflows once using your desktop browser and let frevvo worry about the details. They’ll just work automatically on all devices from tiny smartphone screens to large, hi-res tablets. Of course, you can customize as desired and it isn’t even that hard to do.

Workflow on Any Platform

cloud-128.pngDoes your business like the Cloud or do you prefer On-Premise systems where you can control security, access to data etc.?

Do you prefer Linux, Windows or some other flavor of server? Authenticate using Active Directory, Google, or some other LDAP server? Do users prefer Chrome or Firefox or Internet Explorer? What about customers?

With frevvo you don’t have to sweat these details. If you prefer Cloud, we have you covered. frevvo Cloud runs on AWS with all the latest security patches and updates and backups and policies. It’s reliable and trustworthy and works for many customers.

Not for you? We also offer the same software On-Premise. Install it behind your firewall on the server platform of your choice. Authenticate and authorize using your preferred system. Use your preferred browser. You simply don’t need to think about these issues anymore.

Workflow for Any One

customer-focus-128.pngWho needs to use your forms and workflows? Employees? Clients? Partners? Patients? Students? The answer is everyone.

Of course, the way they use the systems, the items they have access to, the responsibilities they each have are all different and your process automation system needs to support these different modes.

Again, frevvo’s got you covered. You can route your forms and workflows to specific users, groups of users (roles) or anonymously outside your organization. These can all be determined dynamically at runtime (a common business requirement). You can control who can edit forms and flows, who can view or edit submissions, who can administer flows and a host of other items within frevvo. It’s really workflow for everyone.

Workflow with Any Data

servers-128.pngWhich systems store your business data? If you’re like most of our customers it’s often easier to ask “What don’t we have?” Data is stored in a massive variety of systems: multiple SQL databases, HR systems, Accounting systems, online Google spreadsheets, SharePoint, Google Drive, box.com, any number of document management systems and on and on and on.

Your forms and workflows are simply going to be more useful if they can interact with your data wherever it is. They’ll need to read data from these systems and probably create/update data and documents in those systems as well.

Guess what? frevvo’s pretty good at that too. Our connectors provide seamless access to business systems, databases, applications, and cloud services you use every day. In many cases, it’s through point and click wizards that are easy to use and eliminate mistakes. It’s easy to connect your workflows to the world and make life even easier for your users.

Workflow in Any Language

workflow-automation-128.png

What language do your users speak? Today, even small organizations are distributed all over the world. Certainly, your constituents (customers for a business, the local community for a K-12 school, parents & students worldwide for the typical University) increasingly come from diverse backgrounds and speak multiple languages.

For example, everyone’s probably familiar with school permission forms. In many U.S. communities, these forms need to be available in English and Spanish. In larger ones, there could be many more languages in the mix. For example, Los Angeles provides its material in 8 languages.

Luckily, frevvo takes care of that for you. Our forms and workflows can be easily configured for any language worldwide. Even Right-to-Left languages like Hebrew or Arabic. Those pesky Permission or Emergency Contact forms: parents can fill them out in any language and frevvo can still generate a PDF for you or save the data for you in English (or the language of your choice).

So, you see, it doesn’t matter if you’re just a few dozen people or 10,000. It doesn’t matter where you work, when you work, what language you speak or systems you use. You too can automate your workflows and reap the benefits. It’s truly workflow any_____.

frevvo is point-and-click workflow software that connects your people, data and systems. We have already helped over 750 customers transform inefficient processes into fully automated workflows. Check out our complete platform or contact us for more information.

 

 

 

Announcing frevvo 7.2

form-workflowToday we’re happy to announce the general release of frevvo 7.2. Cloud customers were automatically upgraded on April 29. On-Premise availability is coming up shortly – subscribe to Release Announcements for the precise date. This release also includes upgrades to the Database Connector.

We know that frevvo is powerful software but there’s also a learning curve. frevvo 7.2 is the first in a series of updates this year focused on making it easier to use.

Visual Rule Builder

VRBTopDiagram3

One of the main areas customers tell us about is Rules. They’re really really powerful and many customers love the flexibility of being able to write JavaScript code and create very complex, dynamic behavior. But, they can be hard to use. Enter the Visual Rule Builder. Using it, you can create many rules visually rather than writing JavaScript. Read more in this blog article and find detailed documentation here. We’re excited about this new capability and expect improvements over multiple releases to make it easier and increasingly capable of replacing JavaScript-based rules.

This release also includes some security enhancements – e.g. user ids no longer appear in URLs and are replaced by opaque UUIDs – and other under-the-hood improvements needed for future ease-of-use improvements.

Database Connector

The DB Connector is one of the most widely used connectors – customers have created all kinds of integrations with their SQL databases. Most of the improvements made in this release are fairly technical and we won’t go into details here. See the Release Notes for reasons to upgrade. We’ve also made several under-the-hood improvements so we can make this oft-used connector easier to use and as point-and-click as possible. We’ll detail those in future blog posts.

We’re excited about this release and several upcoming ones. The focus is squarely on updating and making so many of the good things we do easier to use.