If you’ve ever thought: “I wish there was a way to do something very specific to make my Workflow even more helpful for my specific use case”, chances are you can do so with custom JavaScript snippets.

With Anvil’s advanced editor, you can create your own JSON snippets, what Anvil calls expressions, to encode custom rulesets, logic, and validation into your Workflows. In this post, we’ll give you an overview of this feature including:

• What our advanced editor is capable of
• Examples of how the advanced editor can be used
• How to get started with the advanced editor

Please note that our advanced editor is only available on our Growth and Enterprise plans. To learn more about how to upgrade your plan, please see this article instead.

What can I do with the advanced JSON Editor?

The advanced editor pulls back the curtains of our Workflow builder UI to reveal the configuration files that underpin Anvil Workflows. By making changes directly to a Workflow’s configuration files, you can customize it beyond what is available via the UI.

So what exactly can you do with the advanced editor? This is a hard question to answer since the advanced editor offers a ton of flexibility. With custom JavaScript snippets, you can likely accomplish anything you want. Here are a few high level things that you can do:

• Automate calculations
• Set specific validation on your Webform fields
• Add complex logic to fields and pages on both Webforms and PDFs
• Stylize specific components such as PDF output fields and Workflow buttons

Examples of how the advanced JSON editor can be used

Need some more inspiration? No problem! Here are some use cases that we’ve seen come up multiple times across our customers.

Calculations

• Add x days on top of an input date value
  • E.g. Calculate a contract renewal date 90 days from the contract end date.
• Adding or multiplying an amount to an input value
  • E.g. Multiply the number of dependents who are minors by $2000 and dependents over 18 by $500
• Calculate the sum of several fields
  • E.g. Add two dynamically calculated fields together to determine the final dependents claim for taxes

Validation

• Add a maximum character limit to a field
  • E.g. Set a maximum character limit on a policy description to prevent overflowing text on the output PDF
• Customize field types with error messages
  • E.g. Only allow customers to input 10 digit long item IDs. Show an error message when the user attempts to add IDs longer than 10 digits.
• Restrict the range of dates users are allowed to select in a date picker
  • E.g. Set a contract start limit to be within a week of the contract submission date.

Logic

• Map a list of keys to return specific values on the PDF
  • E.g. Print an abbreviated plan name on your PDF rather than the full plan details displayed to customers during the Webform filling process.
• Compare multiple input values and only output one on the PDF
  • E.g. Consider all states that an insurance policy covers and only return addresses belonging to a specific state.
• Prefix a specific value to a submission value on the PDF
  • E.g. Format all apartment numbers on a rental agreement so Apt #: _ is entered on the PDF regardless of how customers entered the apartment number details.

Styling

• Stylize PDF field outputs with options that aren’t available through the UI
  • E.g. Expand your pool of font options to stylize your PDF fields with. Choose from over 1500 supported font options rather than pick from the 26 available through the UI.
• Customize the emails sent out upon Workflow completion
  • E.g. Map signers to specific CSMs so that they can follow up with clients and update CRMs with contract renewal details.
• Change the text displayed on buttons and descriptions on the signature page
  • E.g. Gain granular control over Workflow signature pages and customize practically everything. Instead of an Accept your Signature section that says Below is how your signature and initials will appear everywhere you need to sign on all documents, you can customize the highlighted title and description to match your unique brand and tone.

How do I get started with the advanced editor?

With great power comes great responsibility. Our advanced editor is a powerful tool that can help you build whatever Workflow you want, which can make it hard to know where to start.

Before you get started with your first configuration changes, read through our best practices.

Determine where you need to apply your advanced logic before doing so

You can apply logic to several different places within a Workflow. First, consider the changes you want to make. What results are you trying to achieve? Do you need to reuse the same logic multiple times?

If the changes you’re trying to make only affect a specific field or page, you can apply your logic to those specific field’s or page’s configuration files. If you need to reuse the same piece of information, you can add your expressions at the Webform level where the changes will be written into the payload, making it easier to reuse anywhere in your Workflow.

Knowing when and where to apply your changes will save you time and provide you with more granular control over your entire Workflow and the resulting data.

Use field aliases

We’ve talked about the benefits of using field aliases in the past, see here and here. We’ll continue to emphasize their importance in this post as well.

Field aliases are human readable labels that can be assigned to Webform fields. With regards to the advanced JSON editor specifically, field aliases help you more easily reference specific Webform fields when writing expressions and conditions. You can also assign a field alias to calculations created on the payload (Webform expression), which makes it easy to reuse and reference the expressions elsewhere.

Conclusion

Our advanced editor unlocks Workflow customizing capabilities that aren’t otherwise available though our UI. This helps you build Workflows that cater to your specific needs, making integrating with Anvil all the more powerful. We hope you’re excited to level up your Workflows and always feel free to reach out to support@useanvil.com if you want to know more about our advanced editor!