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

This article describes the process of adding custom errors to the calculator

This page exists due to the efforts of the following people:

Timur

Timur

Created: 2017-01-16 13:13:56, Last updated: 2022-04-20 10:30:47
Creative Commons Attribution/Share-Alike License 3.0 (Unported)

This content is licensed under Creative Commons Attribution/Share-Alike License 3.0 (Unported). That means you may freely redistribute or modify this content under the same license conditions and must attribute the original author by placing a hyperlink from your site to this work https://planetcalc.com/6430/. Also, please do not modify any references to the original work (if any) contained in this content.

Tips and tricks series

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

Hello, world! Now with custom errors

If you look at different input controls available in the calculator editor, you will find that some of them support validation logic. For example, for number type of input you can specify whether it allows decimal digits, negative numbers, or limit accepted range by ticking Number range checkbox and filling min and max values. If the user violates validation rules, he will see an error message, for example, "Positive integer expected".

But, of course, there could be more complicated cases when you want to provide custom validation logic as well as custom error messages. Here is how to do it.

Let's suppose that in our "Hello, world" calculator we will welcome anybody, except Cthulhu (cause we are expecting that in his house at R'lyeh, dead Cthulhu waits to dream).
Open calculator created in previous articles in calculator editor. Since now we know about localization, we will add our custom error message as another string into resources input. Click on resources link in Calculate function signature to open input editor.
In input editor, fill fields under List items like this:

Field name Value Meaning
Value unexpectedcthulhu Identificator of our error message
Display name We are expecting that in his house at R'lyeh, dead Cthulhu waits to dream Our custom error message

Press Add then press OK to close the dialog.

Replace current code with the following:

if (username.toLowerCase() == "cthulhu") {
    message.SetValue("");
    throw {"source":"username", "message":resources["unexpectedcthulhu"]}
}
message.SetValue(resources.hello.replace('%username%', username));

Let's examine it line by line

  1. Check the input value for "cthulhu"
  2. Set output control value to an empty string. Otherwise, it would retain previous value, in our case Hello, John
  3. Inform framework about error using exceptions. Note that both fields are required. source should be set to string literal with input control id, it is used to determine the location of error message on the form, and message is the custom error message
  4. Closing bracket
  5. Old code showing Hello, username message

Click on the Preview button. Try to enter "Cthulhu" in Enter your name field - you should receive custom error message. If everything is working as expected, Publish the calculator. I embed it in this article below.

PLANETCALC, Hello, world! Now with custom error

Hello, world! Now with custom error

Message
 

URL copied to clipboard
PLANETCALC, Tips and tricks #3: How to make calculator with custom errors

Comments