In this short tutorial we’ll show you how you can combine numeric values in weave.ly. This is especially useful if you need to calculate certain values dynamically in your prototype.
Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
Example Setup
The figure below showcases the example design we’ll be using to showcase weave.ly’s calculation capabilities. In a nutshell, our example consists of two radio button groups. The leftmost group allows users to select a product “package”. the rightmost group allows users to select “options” for said package. Finally, the bottom part of the frame showcases the total value of the user’s choice.
The figure below showcases the configuration of the leftmost set of radio buttons. More specifically, our radio buttons are tagged with the Selectable Number functionality. In the Element Data configuration section of the plugin we then specify for each radio button what the corresponding numeric output should be. For example, if the user selects “Option 2” then the value 4.99 will be returned.
If you’re unfamiliar with building radio buttons in weave.ly we suggest you read this tutorial first.
The leftmost radio button group is tagged and configured in a similar fashion. Finally, we tag the text layer containing “€ 6.99” with the Text Label functionality (as shown below).
You might wonder why we’re not using the Number Label functionality here. Given that we want to showcase the price with a currency symbol we’ll need to use the Text Label functionality. If you need to show purely numeric values you can use Number Label.
Calculating the Total in the Flow Editor
The figure above shows the situation in the flow editor after our previous tagging steps. To calculate the total we essentially need to capture the user’s input in variables and calculate our total. Let’s break this down into three steps:
Step 1: Storing User Input
Calculations in weave.ly always require you to use variables. In our example we created two variables (i.e. base and option), and set their values whenever the user presses the radio buttons (see the figure above).
If you’re unfamiliar with variables we suggest you first go through this tutorial.
Step 2: Calculating the Total
Weave.ly enables you to generate numeric values using the Number block. These can be static numbers. For example, you want the number “5” to be displayed in a label. But you can also use the Number block to generate numbers dynamically using calculations. The gif below showcases how we do this in our example.
In the configurations pane of the Number block you’re able to write formulas. Essentially a formula can be:
- A number (e.g. “5”)
- A variable, as soon as you type “{” you’re presented with a list of available variables
- Any combination of the above using arithmetic operators (i.e. +, -, / or *)
In our example the formula is “{base} + {option}” this means that whenever either variables change the output of the Number block changes as well. We complete this step by storing the result of our calculation in a new variable, called total.
Step 3: Showing the Total in the Text Label
The only thing left to do is show the total value in the label at the bottom of our frame. To do this we’ll use the Text block. Similarly to the Number block it enables us to write formulas that generate text. The gif below showcases how we do this in our example.
A text formula can be:
- Any piece of text
- A variable, as soon as you type “{” you’re presented with a list of available variables
- Any combination of the above
In our example the formula is “€ {total}”. In other words, this Text block will generate a label prepending the euro sign to the total value. Whenever the total variable changes the Text block updates its output.
Result in a Web App
Figure 8 showcases the final result in a browser.
