Get reference code
Appearance
Sample
Tips and tricks #1: How to set output value

Tips and tricks #1: How to set output value

This article describes process of calculator creation and how to set output value.
Timur2016-12-26 21:04:45

Tips and tricks series

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

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

This is the first article in series of articles where I describe how to use planetcalc platform to create your own calculators. Because this site, in essence, not just collection of somewhat useful calculators, but also the platform - a web online tool which allows you to build calculators for your needs.

Hello, world!

Let's create simple "Hello, world" calculator.

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.

In this platform, the calculator is the piece of code, written in Javascript, with the only purpose to get input values and produce output values. It could be anything, but in this example, you will get user name and output the string "Hello, username!". Platform handles most of the inputs and outputs logic (format, validation, localization, etc.), while your task will be to write code for converting inputs to outputs by supplying body for Calculate function.

Now, you need to define your inputs. In this example, you need only one input - text field for username. So, hover Input button and click on Add input parameter menu item.

This will bring up the input editor dialog. Fill it like this:

Field name Value Meaning
Name Enter your name Input label, as it appears on calculator's form, in our case, label for text field
Variable username Name of Javascript variable, which is used to hold input value
Description Optional. If set, it is used to provide help message when mouse is over the field label. Leave it blank
Type String The type of the input. Type also determines the lower part of the input editor form. Here set it to String
Default value John Default value for the field. It could be useful when you want to illustrate how the calculator works on inputs without the need for user to enter anything

Leave all other fields with their default values and press OK.

Note how Calculate function signature was updated. Now it has username variable, and by clicking on it, you can open input editor dialog again, if you need to.

Now you need to define your outputs. Again, in this example, you need only one output - for outputting "Hello, username!" message. Hover Output button and click on Add output parameter menu item.

This will bring up the output editor dialog. Fill it like this:

Field name Value Meaning
Name Message Output label, as it appears on calculator's form, in my case, label for text field
Variable message Name of Javascript variable, which is used to set output value
Description Optional. If set, it is used to provide help message when mouse is over the field label. Leave it blank
Type String The type of the output. Type also determines the lower part of the output editor form. Here set it to String

Press OK.

Note again how Calculate function signature was updated. Now it also has message variable, and by clicking on it, you can open output editor dialog again, if you need to.

Now you have described both inputs and outputs for your calculator and you need to provide code for Calculate function.

Note that input variables can be used as is, so, the username variable will be simple string and by default will have "John" value. However, output variable is object, and you can't simply assign something to it. To set output value you need to use special SetValue function.

Enter code like this:

message.SetValue("Hello, " + username + "!");

Now the final part.

  • Fill the Name form field below the Calculate function with the name of your calculator, in our case Hello, world.
  • Fill the Tags form field with the tags related to the calculator for better search
  • Click on Preview button
  • Inspect calculator in the Preview mode. Note that in this mode appearance could be slightly different from final result, so, check only calculator logic, not appearance.
  • If everything is ok, click on Publish button.

After publishing, calculator will receive persistent address and will be available for other users of the site. You can also embed it in articles. In our case, you can see it right below:

Hello, world!Creative Commons Attribution/Share-Alike License 3.0 (Unported)
 Message:

Request a calculator

View all calculators
(462 calculators in total. )

Comments

No comments yet!

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