📺

Displaying information back to users

What can be displayed back to users?
​Information from an input (emails, names, etc.)​
​Uploaded images​
​Selected option (single selection)​
​Selected options (multiple selections)​
​The result of more than one input/selection​
And much more!
How to display information back to users
It depends on what you want to display - in general, they all follow the same steps:
Inputs:
1.To show to the user what has been written in a field, first, you need to know the input component's key.
2.Create a new component that is a plain or rich text.
3.We recommend plain text when you need to display a simple word or phrase without spaces or special styling. If you chose a text field, you need to select 
 (to the right of the Text field on the Content section of the Options Tab) and then look for the component to display's key. When you select it, the key will be displayed between "{{ }}".
4.We recommend rich text when you need to display a paragraph or a long piece of text. If you chose rich text, you need to write the key of the component you want to display between "{{ }}". For example: "{{my_components_key}}".
5.You can display more than one input in a plain or rich text component.
Uploaded Images:
1.To display an image the user has uploaded, you need to know the upload component's key.
2.Create a new image component.
3.Select 
 (to the right of the IMAGE/ GIF URL field on the Content section of the Options Tab) and look for the component to display's key. When you select it, the key will be displayed between "{{ }}".
Selected option (single selection):
1.To display a selected option, you need to know the option selector component's key.
2.Create a new plain or rich text component.
3.If you use plain text, select 
 (to the right of the Text field on the Content section of the Options Tab) and look for the component to display's key. When you select it, the key will be displayed between "{{ }}". You will need to add "_display_values." before the key to format the value. If "_display_values." is not added, the value will appear as"key_value",if it is added, the value will be formatted to "Key value". For example: "{{_display_values.my_components_key}}".
4.If you use rich text, you need to write the key of the component you want to display between "{{ }}" and add "_display_values." before the key. For example: "{{_display_values.my_components_key}}".
Selected options (multiple selections):
1.To display multiple selected options, you need to know the option selector component's key.
2.Create a new plain or rich field component.
3.If you use a plain field, select 
 (to the right of the Text field on the Content section of the Options Tab) and look for the component to display's key. When you select it, the key will be displayed between "{{ }}". You will need to add "_display_values." before the key to format the value. If "_display_values." is not added, the value will appear as"key_value",if it is added, the value will be formatted to "Key value". For example: "{{_display_values.my_components_key}}".
4.If you use a rich field, you need to write the key of the component you want to display between "{{ }}" and add "_display_values." before the key. For example: "{{_display_values.my_components_key}}".
5.All the selected options will be displayed separated by ",".
Result of inputs or selections:
1.This one is slightly more complex and requires custom code.
2.We recommend asking your designated Savvy to help you display a calculation or result of selections and inputs.
Computed fields documentation coming soon.
Common use cases:
Display an order as the user types in.
For an onboarding flow, to display the user details and image.
To display the input information on a card as the user types them.
And much more!

Transitions

Preset Buttons for Dropdowns

Last modified 1yr ago