Work in Progress: How to Create Computed Fields

Sometimes you need to use some custom Javascript code in your flow. Here you'll learn how to do it with our builder

Add a Computed Field(CF):

As an example, we are going to use the case of a user entering a first name and last name on separated inputs and joining them together with a CF that returns the full name

1. In the "Logic" card, in the "Computed Fields" tab, click the "Add" button.

2. Select from the preset CF types or choose "Custom" (for this example we choose "custom").

3. Name your CF by giving it a Key and click "Edit" (for this example we'll call it full_name).

4. If you need the result of the CF stored select "Store locally" or "Store locally + in cloud". In most cases this is not necessary.

5. Select the inputs you are going to use in the CF code by clicking "+ Add input". (for this example we'll need "first_name" and "last_name").

6. You can set one of the inputs as the trigger so the CF doesn't execute until that input is entered. To do this click on "+ Add trigger" and select the desired input (for this example we'll assume the first name was entered first and then the last name so, we'll trigger when the last name is entered by selecting "last_name").

7. Write your code. In our example the code would look something like this

function result({ first_name, last_name }) {
    return `${first_name} ${last_name}`
}

Other CF Examples:

• In this example, based on the budget of the potential client, you can recommend different plans. We select the budget input key on the User Data Input Fields, generate the sample code, and then write our function.

We can use the return value and some "Show/Hide Conditions" for a results page with our best fitting plan.

• Here's another case where we use two keys: 'landscape' and 'activity'. Depending on the landscape and activity the user selected, we can recommend different locations.

We create all the possible results on the results page, and then add "Show/Hide Conditions" like this one:

• In this example we're taking the user's input, checking if it is a full URL, and in case it's not, concatenating the necessary text to make it a full URL.

We can then access that value in any part of the flow just by adding 2 sets of curly brackets. In this case, the custom field was called "full_url" so if we type "{{full_url}}" it will show the return value.

Some Other Features

• Fields to trigger updates: Will replace the Input Fields as the triggers for the computed field (but the "User Data Input Fields" still determine what data is passed into the function).

• Watch + Include Full User Data: This is equivalent to adding everything into "User Data Input Fields", so it means every User Data property is both passed into the function and used for triggering it.

• Async: Use this if the computed field needs to load data (so it returns a Promise).

• Include Loading State: For async fields, whenever the input values change, the result will be _loading until it fetches the new data and returns the promise.

• Cache Data: Savvy remembers what the result is for each combination of inputs (across all users!), so it doesn't have to run the function every time.