Get reference code
Appearance
Sample
Tips and tricks #3: How to make calculator with custom errors

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

This article describes the process of adding custom errors to the calculator
Timur2017-01-16 13:13:56

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 #4: How to make calculator with table output

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

Tips and tricks #6: How to make calculator with virtual keyboard

Tips and tricks #7: How to make calculator with SVG image map

This article continues development of calculator started in 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 calculator editor, you will find that some of them support validation logic. For example, for number type of input you can specifiy whether it allows decimal digits, negative numbers, or limit accepted range by ticking Number range checkbox and filling min and max values. If user violates validation rules, he will see 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 dreaming).
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 dreaming Our custom error message

Press Add then press OK to close 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 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 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.

Hello, world! Now with custom errorCreative Commons Attribution/Share-Alike License 3.0 (Unported)
 

Comments