Get reference code

Tips and tricks #5: How to show/hide input and output controls in a calculator

This article describes how to control visibility of input and output controls in a calculator
Timur2017-01-28 08:27:09

Tips and tricks series

Tips and tricks #1: How to set output value

Tips and tricks #2: How to make calculator translatable into different languages

Tips and tricks #3: How to make calculator with custom errors

Tips and tricks #4: How to make calculator with table output

This article relies on knowledge you should get from previous articles, so you may want to check them first.

Newton's Second Law

In this article we will create our next calculator, which will output results of calculation using Newton's Second Law formula. We will create single calculator for computing force by acceleration and mass, as well as for computing acceleration by force and mass and for computing mass by acceleration and force. To achieve this, we will show/hide input and output controls depending on what exactly we are computing.

To create a calculator, login to the site and click on My calculators link at the top right corner. This will bring you to the Personal section of the site with new top menu. In the top menu, hover Create New button and click on Calculator menu item. This will take you to the calculator editor.

Add the following input parameters:

Name Variable Type Default value Note
Force, N force Number 9.8 Set Allow decimal digits to enter 9.8
Acceleration, m/s2 accel Number 9.80665 Set Allow decimal digits to enter 9.80665
Mass, kg mass Number 1 Set Allow decimal digits

Now add the additional parameter to choose what to calculate. Fill it like this:

Field name Value Meaning
Name calculate Input label, as it appears on calculator's form
Variable option Name of Javascript variable, which is used to hold input value
Type Dropdown list The type of the output

After you change type to Dropdown list, bottom part of dialog will show List items editor. Using top part of it, add three values into the list by filling Value and Display name fields and pressing Add button.

Value Display name
force Force
accel Acceleration
mass Mass

Press Ok to close input editor

Now, add the following output parameters:

Name Variable Type Note
Force, N out_force Number Set Number of decimal digits to 1
Acceleration, m/s2 out_accel Number Set Number of decimal digits to 1
Mass, kg out_mass Number Set Number of decimal digits to 1

We have described inputs and outputs of our calculator, so we only need to write code to do the calculations and to control the visibility of inputs and outputs.

Let's start from calculations. Here we will use our option variable to choose the formula. option variable holds the string literal equals to the Value of selected list item.

Add this code into Calculate function:

    case "force":
    case "accel":
    case "mass":

Now we need to control visibility. This is done using Display function which is located just below the Calculate function. Inside this function, all inputs and outputs are available as objects. To get input value from input object you should use GetValue member function with no parameters. To control visibility of either input or output, you should use Display member function which accepts single true/false value. Ok, code will be self-explaining.

Add this code into Display function:

force.Display(option.GetValue() != "force");
accel.Display(option.GetValue() != "accel");
mass.Display(option.GetValue() != "mass");
out_force.Display(option.GetValue() == "force");
out_accel.Display(option.GetValue() == "accel");
out_mass.Display(option.GetValue() == "mass");

Here we check value of option input to make decision whether control should be visible. Display function is called before Calculate, so it is executed first after user changes the input.

Click on Preview button. By default you should see it with Acceleration and Mass inputs and Force output. Changing the value of calculate drop-down change the available inputs and output. If everything is working as expected, Publish the calculator. I embed it in this article below.

Newton's Second LawCreative Commons Attribution/Share-Alike License 3.0 (Unported)


No comments yet!

 All discussions Be the first to post a comment!
Spam filter