7. Number

A number type variable holds a numeric value in literal forms such as 255 or 3.14159.

var @n: number
@n := 1
@n := -1.0
@n := 2.7182
@n := Exp(1)

Postback

To create a widget that performs a simple postback, you would write something like this:

<? register input @NumberProperty ?>
<input type="text" name="<?attr OutputId(@NumberProperty) ?>" value="<?attr @NumberProperty ?>">

In the example above, we created a simple text field that outputs the value of @NumberProperty. This example is culture-independent, and the WEM runtime checks the culture settings of the portal, using the appropriate number format for validation. For instance, if you set the culture settings to Dutch, the number will be formatted as 200.000,00. The WEM runtime will use that format for output and validation.

However, this can lead to issues in other contexts, such as JavaScript, where numbers are written in an invariant culture format like 200000.00. We will discuss this further shortly.

Precision

If you have a number that requires exact precision, you can easily achieve this with the precision option:

<? register input @NumberProperty precision = 2 ?>
<input type="text" name="<?attr OutputId(@NumberProperty) ?>" value="<?attr @NumberProperty ?>">

Invariant Culture

There are cases where you may want to work with an invariant culture, especially in JavaScript. This can be accomplished by adding the invariant culture option. This way, the WEM runtime knows to expect number values that are posted back in the format 200000.00 (using the dot as the decimal separator), making it easier to work with in JavaScript.

<? register input @NumberProperty invariant culture ?>
<input type="hidden" name="<?attr OutputId(@NumberProperty) ?>" id="<?attr OutputId(@NumberProperty) ?>">
<? startupscript ?>

    // Important to use 'js' encoding when outputting the property value in JavaScript blocks.
    let value = <?js @NumberProperty ?>;
    value *= value;

    console.log("Result squared", value);

<? end ?>
<? submitscript ?>

    const gr = 1.61803;
    const el = document.getElementById(<?js OutputId(@NumberProperty) ?>);
    
    // Since we are using culture invariance, we can write the number value as a string.
    el.value = gr.toString();

<? end ?>

However, note that encoding with <?=, <?attr, and <?raw will still output according to the current culture settings, ignoring the invariant culture setting. To clarify: The invariant culture option is only for postback, so the WEM runtime knows to expect a number value in that format.

Print Output Overview

The table below provides an overview of the results of different kinds of encoding when outputting a variable declared with var @n: number, which holds the value 123.45.

	English	Dutch	French
<?= @n ?>	123.45	123,45	123,45
<?attr @n ?>	123.45	123,45	123,45
<?js @n ?>	123.45	123.45	123,45
<?raw @n ?>	123.45	123,45	123,45

Postback Format

When you have a widget number property @NumberProperty, which you register with register input, and you want to perform a postback with the value 123.45, the format you need to use will depend on the culture settings:

English	Dutch	French	Invariant Culture
123.45	123,45	123,45	123.45