What We Will Accomplish:
This screenshot shows you what this recipe will accomplish. This is an example that you may use, tweak, or customize for your own purposes to perform calculations or other scripting logic for your FEB application.
We will use various fields (Number, Numeric Slider, and Select One) and add their values together. Then we will output the result into a read-only field to be displayed back to the user after clicking the â€śCalculate Additionâ€ť button.
Letâ€™s Begin: Drag a New Field into Your Form (or Select an Existing Field)
Every field in FEB can hold a value, that captures data in various forms, such as numbers or letters (strings). For the first part of this example, I will perform calculations on numerical data, so I will use the Number field.
Drag and drop this field into your form.
Select "Edit Properties"
In the top-right corner of the field, select the gear icon (â€śEdit Propertiesâ€ť):
Edit Title and ID
In the â€śBasicâ€ť tab, we can change the field title from â€śNumberâ€ť to something else.
Click the â€śOKâ€ť button when done.
Our field for Question 1 is now ready. If you click the preview button () in the top-right, you can test this field in action:
The Number field will show an error for alphabet or non-numeric characters.
By default, the Number field will round to two decimal places. To change this feature, you can choose â€śTypeâ€ť and â€śDecimal Placesâ€ť under the â€śAdvancedâ€ť tab above.
Using the Numeric Slider field
Letâ€™s do the same with the Numeric Slider field. Drag and drop the field into your form and click the â€śEdit Propertiesâ€ť icon.
Set the Value Properties
The Numeric Slider field allows the user to drag to select its number value. Edit the Title as needed, then enter your chosen Start and Stop Value, as well as the Number of Ticks youâ€™d like the slider to provide.
Set the ID
Feel Free to Preview the Numeric Slider
Using the Select One Field
For our final question, we will drag and drop the Select One field into our form.
Input Value Properties
For the Select One field, the user will be able to select one out of various options. These choices can be displayed however you choose, with an underlying unseen value we can use in our calculations. In â€śEdit Propertiesâ€ť, we can choose how many options the user will have and what they say under â€śDisplayed Valueâ€ť. For each â€śDisplayed Valueâ€ť, the â€śSaved Valueâ€ť will be recorded as the value of this field should the user select that option.
Set the ID
Feel Free to Preview the Select One field
(the choices can be displayed horizontally or vertically under â€śEdit Propertiesâ€ť -> â€śAdvancedâ€ť -> â€śChoice Layoutâ€ť)
Create the Calculate Button
Open the â€śSpecializedâ€ť menu on the left, then drag and drop Button into your form.
Because we want the calculation performed when the user clicks our Button, we will input our code under the onClick event. When you click the link, this screen will pop up for us to input our code.
Here, I will go into detail on how to write our code for our purposes. Since we want to add the values of each of our questions, we need to first get each question value.
To access a value, we can use the term BO which stands for â€śBusiness Objectâ€ť. Then to specify which field we want to access, we use its ID â€“ for instance, â€śF_Q1â€ť as set in Question 1, our Number field. To tell the program that we want to retrieve the value, we use the function getValue(). This results in:
We got the value, but that is not enough because we need to store the value to use later. We store data in variables, signified as â€śvarâ€ť with a label we set ourselves. For the value of Question 1, I will store it in a variable I simply call â€śaâ€ť
var a = BO.F_Q1.getValue();
This process can easily be repeated for the other two questions. Each field in FEB has a value regardless of its type, so we can use the same method to get all three question values into three different variables
var a = BO.F_Q1.getValue();
var b = BO.F_Q2.getValue();
var c = BO.F_Q3.getValue();
We now have all three question values stored into three different variables. Â To add them together, we simply use â€ś+â€ť on all three of our variables. Letâ€™s store this into a variable too:
var ans = a + b + c;
Looking at our solution so far, it should be straight-forward. We extract the value of each field into variables, then store the sum into another variable. However, there is one not-so-noticeable problem. If we tested the code as-is, the calculation would be incorrect:
Why does this happen? The short answer: We need to tell the code that we want to add numbers, not strings.
In FEB, the Number and Numerical Slider fields store their values as numbers. However, the Select One field does not. This is because the Select One field can also store strings as their value, so the default value type is string. Even though we set the Saved Values as numbers, they are actually stored as strings.
This means, if we kept the calculation as-is, the â€ś+â€ť operation will think we are adding strings and not numbers. We will use the above screenshot to demonstrate how the calculation went wrong. Here is the break-down of what is happening to the variables in our code:
var a = BO.F_Q1.getValue(); // 1
var b = BO.F_Q2.getValue(); // 3
var c = BO.F_Q3.getValue(); // â€ś2â€ť
var ans = a + b + c; // 1 + 3 + â€ś2â€ť -> 4 + â€ś2â€ť -> â€ś4â€ť + â€ś2â€ť -> â€ś42â€ť
Since the only variable that is not a number is c, we can safely use only use it on c. However, if you are not fully sure if a variable is being read as a number or not, feel free to use it on as many variables you need to be numbers.
Here we use the function on our variable c:
var c = Number(BO.F_Q3.getValue());
Our code should now look like this and perform accurately.
However, one thing is missing. We have the sum answer stored in our variable ans but want to display it back to the user. Click the OK button when done with this step.
Create a Single Line Entry field
Drag and drop a Single Line Entry field into your form. This will serve as a read-only field that displays the answer to the user.
Set its Title as â€śAnswerâ€ť and rename its ID to something unique and easily identifiable in your code. Click the OK button when done.
Open the onClick event code again (â€śEdit Propertiesâ€ť on our Button -> â€śEventsâ€ť tab -> â€śonClickâ€ť). Now we add a line of code to set the value of our â€śAnswerâ€ť field. The value will appear in the white box under the title â€śAnswerâ€ť.
So now the value stored in the variable ans will show up under â€śAnswerâ€ť. Click OK when done.
Set the Answer as Read-Only
Our final missing piece is a nice-to-have feature. By making the Answer field read-only, this prevents the user from erroneously editing the field to fabricate the answer.
Save () your form and navigate to the â€śStagesâ€ť tab at the top of your screen. Scroll down to your Answer field and click the lock button on the right side. This sets the field as read-only. To set it back to editable, just click it again.
Â Â <- If you see this icon, this field is editable. Click to make it read-only.
Â <- If you see this icon, this field is read-only. Click to make it editable.
Save and Preview Your Work. Youâ€™re Done!