New Input Types in IW 15.1.11

By Alexandre MachadoIntraWeb

There are 9 new input types built in IWEdit (and IWDBEdit) controls:

  • Color
  • Date
  • Time
  • Email
  • Number
  • Password
  • Range
  • Tel
  • Url

The new input types are specified in HTML 5 and all modern browsers implement them, one way or another. IntraWeb also enhances some of these types, once browser implementation is not uniform and sometimes lacks some features (e.g. numeric inputs).

The key property to configure an IWEdit as one of the new input types is DataType property. Specific properties of some types can be configured via DataTypeOptions property.

All the “special” handling of these new input types are handled by the browser itself, i.e. the UI elements used are all specific to the browser implementation, except numeric inputs in case DataTypeOptions.NumberValidation is set to nvIntraWeb. 

DataType = stDate, in Firefox:

 

DataType = stDate, in WebKit browsers (Chrome/Opera/Brave,etc)

DataType = stDate, in Microsoft Edge

NumberValidation, NumberType and FloatDP properties (in DataTypeOptions) only apply when DataType = stNumber.

NumberValidation:

  • nvBrowserNative: When set, IntraWeb will render the input tag as <input type=”number”>. This informs the browser that the input should only receive numbers. Unfortunately, there is no sub-type specification (e.g. integers, floating-point, currency, etc.). Implementation from browser to browser varies a lot but most of them allows the user to enter any string (including letters and symbols). However, the browser will always validate the input, and will display a warning to the user, showing that the input is not valid. Most browsers will display up/down arrows next to the input control, so the user can use them to increase/decrease the value using a mouse or pointing device. When nvBrowserNative is set, IntraWeb will *not* generate any code to enforce the input conformity. This task is left to the browser. In this case, the NumberType property is not used, i.e. there is no easy way to forbid some input by the user.
  • nvIntraWeb: When nvIntraWeb is set, IntraWeb will render the input tag as <input type=”text”> (i.e. as a standard text input box) plus some other custom attributes which are used by IW’s JavaScript library to enforce the input conformity. In this case, property NumberType is also used and the developer can specify the type of number which is expected: Integer, Float or Currency. IntraWeb will use JavaScript code to enforce the input rules, blocking the user from entering invalid content (via direct input or pasting content from the clipboard). Also, Min and Max values (specified via Min and Max properties) are used to limit the range of the input. 

NumberType: 

  • Can be Integer, Float or Currency. This is used only when NumberValidation is set to nvIntraWeb.
  • Float and Currency types will use WebApplication.RegionalSettings.DecimalSeparator char. More about RegionalSettings later.
  • Currency types will use WebApplication.RegionalSettings.CurrencyString to format the string.

FloatDP (Byte): 

  • Specify how many decimal places should be used when formatting the number. Users won’t be limited when typing, but the final number will be formatted using FloatDP decimal places, if set. If the default value “0” is used, the number of decimal places will be as entered by the user

Max (String):

  • If set, will be used to validate the input of not only numeric types but also Date, Time and Range inputs. When DataType = stNumber, Max is used differently depending on NumberValidation property value.
  • When set to nvBrowserNative, the browser will use it to validate the maximum value but won’t restrict the end user to enter any value out of range.
  • When set to nvIntraWeb, the input is restricted and, when user tries to set a number greater than the Max value, IntraWeb will display a small tooltip just below the input box, containing message “Maximum allowed value is X”. This message can be customized via WebApplication.RegionalSettings.MaxValueMessage string.
  • Leave it blank so the maximum value is not specified
  • IntraWeb server will also use this value to validate the input. Values outside Max range won’t update the control value and will be discarded. The same rule is used to enforce the value on the client side (browser) and on server side (IW application), with zero lines of code!

Min (String):

  • If set, will be used to validate the input of not only numeric types but also Date, Time and Range inputs. When DataType = stNumber, Min is used differently depending on NumberValidation property value.
  • When set to nvBrowserNative, the browser will use it to validate the minimum value but won’t restrict the end user to enter any value out of range.
  • When set to nvIntraWeb, the input is restricted and, when user tries to set a number less than the Min value, IntraWeb will display a small tooltip just below the input box, containing message “Minimum allowed value is X”. This message can be customized via WebApplication.RegionalSettings.MinValueMessage string.
  • Leave it blank so the minimum value is not specified
  • IntraWeb server will also use this value to validate the input. Values outside Min range won’t update the control value and will be discarded. The same rule is used to enforce the value on the client side (browser) and on server side (IW application), with zero lines of code!

Pattern (String):

  • Specifies a regular expression to check the input value against. The browser will use this string and evaluate it (using its RegEx engine) to validate the input. It can be used for any input type.

Step (String):

  • Specifies the granularity (or the smallest interval) that can be used for an input. Example: In a numeric input, step is used as the increment when increasing/decreasing the number when up/down arrows are used. 

TimeSeconds (Boolean):

  • When True, seconds field will be used/displayed when DataType = stTime. When false, seconds field will be omitted.