# How to Create Computed Fields

{% hint style="info" %}
Computed fields are custom javascript functions used for computing data from the user input fields.

They're pretty similar to a cell with a formula in an Excel spreadsheet!
{% endhint %}

## Contents

1. [How to: Add a Computed Field](#how-to-add-a-computed-field)
2. [How to: Use a Computed Field in a condition](#how-to-use-a-computed-field-in-a-condition)
3. [Computed Field Examples](#computed-field-examples)
4. [Some Other Features](#undefined)

## 🔨 How to: Add a Computed Field

* Select the Computed Field Icon and press **Create New** button.
* Enter a key
* Select a formula type:  for now, we always recommend choosing Custom.
* Choose which data inputs you'll need for your formula: we will have the possibility to choose between all the user input fields in the flow, and other computed fields result too.
* Click **Generate sample code** - this will generate a basic javascript function that takes in the input variables that you selected. Write the function needed to process the data - make sure it returns a value.
* Results output will appear in the **Current Value** field.
* Once the Computed Field is finished, it will be available for display as a variable in other components.

## 🔨 How to: Use a Computed Field in a condition

* Select a component and click the "Add a Show/Hide Condition" button, in the Options panel.
* Select the computed field you created.
* Select the condition you want to use.
* Type the required result for the condition to be executed. Feel free to type a custom text value - it just needs to be exactly equal to the output of the Computed Field for the condition to pass.

## Computed Field 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.&#x20;

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FOnSbBRy6pPx1vX9T4yHx%2Fimage%20\(7\).png?alt=media\&token=8314a1a5-7baa-41e3-b8cf-085468c4d4b0)

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

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2F3xH7PGsnS9D2kJ2nM5UI%2Fimage%20\(8\).png?alt=media\&token=b6199d52-e70a-462f-af28-d8c8043c1004)

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

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FlF75QSqpJZYp1jYZvDCI%2Fimage.png?alt=media\&token=75b55d88-cbbf-473a-919a-8dec9e079a85)

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

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FpSwxgOnOe8pNU0wueQnq%2Fimage%20\(10\).png?alt=media\&token=f94f9387-593b-490f-b3ee-b8e1a176ba54)

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

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FuUlHBsKBFLMVEDLDUVJN%2Fimage%20\(11\).png?alt=media\&token=8e051ad1-ade0-4000-b732-1f3fab44a66b)

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\_ur&#x6C;*"* so if we type "{{full\_url}}" it will show the return value.

![Checkboxes Explained](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2F6rfTvEVKQS7sjjrl0Zba%2Fimage%20\(14\).png?alt=media\&token=d90f7e91-6152-448f-af8e-8b003c384b51)

## 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.&#x20;
