 |
|---|
| Decimal field with "show_formatted" appearance |
A simple replacement for text, integer, and decimal fields. This can be used with all three field types, so you don't have to use a different field plug-in for each field type. You can use this either for the extended functionality (see features below), or you can use it as a starting template when creating your own field plug-in for all three of these field types.
In addition to supporting the default SurveyCTO features listed below, this field plug-in offers the following expanded functionality:
- Support for HTML in field references
If you reference another field's value in either the field label or hint, and that referenced value contains HTML, the HTML will be correctly rendered. - Better support for RTL languages
The field label, hint, and input will now be justified to the right when they contain an RTL language.
This field plug-in also has a text box that expands to fit its contents, just like the text-box field plug-in.
The data format will be text for text fields, and numbers for integer and decimal fields.
For full use of all features on Android, Android 7 or up is required. However, the field plug-in will still work well on older versions of Android. Here is a list of limitations on older versions of Android:
- Different appearances ("numbers", "numbers_decimal", and "numbers_phone") and integer and decimal fields will not display the correct keyboard. However, the fields will ensure only the correct characters can be entered (e.g. only integers).
- The field for data entry will not completely expand to fit all content, but it will be close, within a few pixels.
Because web browsers and iOS devices are kept more up-to-date with the latest features, nearly all web browsers and iOS devices should support the field plug-in, but test it on your collection device beforehand to be sure.
To use this plug-in as-is, just download the text-integer-decimal.fieldplugin.zip file from this repo, specify this field plug-in as a custom field appearance in the form design (like in the test form), and attach it to your form. For more details about using field plug-ins, please read the user documentation.
To create your own field plug-in using this as a template, follow these steps:
- Fork this repo
- Make changes to the files in the
sourcedirectory.- Note: be sure to update the
manifest.jsonfile as well.
- Note: be sure to update the
- Zip the updated contents of the
sourcedirectory. - Rename the .zip file to yourpluginname.fieldplugin.zip (replace yourpluginname with the name you want to use for your plug-in).
- You may then attach your new .fieldplugin.zip file to your form as normal.
For more information about developing your own field plug-ins, please read the developer documentation.
| Feature / Property | Support |
|---|---|
| Supported field type(s) | text, integer, decimal |
| Default values | Yes |
| Constraint message | Uses default behavior |
| Required message | Uses default behavior |
| Read only | Yes (shows the current value, if present) |
| media:image | Yes |
| media:audio | Yes |
| media:video | Yes |
numbers appearance |
Yes (text only) |
numbers_decimal appearance |
Yes (text only) |
numbers_phone appearance |
Yes (text only) |
show_formatted appearance |
Yes (integer and decimal only) |
Note about the keyboard on iOS:
iOS has a less-consistent way of determining which on-screen keyboard to display than Android. If you plan on using this field plug-in on iOS, you should test your form on the actual iOS device that you plan on using. If the wrong keyboard appears (for example, if there is no minus button available), you may supply an optional parameter to the plug-in to set the keyboard type manually.
| Parameter key | Parameter value |
|---|---|
inputmode-ios, inputmode-android, inputmode-web (all optional) |
Possible values: none, text, decimal, numeric, tel, search, email, url. Click here for more information about the inputmode attribute. |
While the inputmode-ios parameter is the most important, you can also use the inputmode-android and inputmode-web parameters to change the keyboard for that field in Android and web forms, respectively.
- Test form
This form will help you view the field plug-in with different field types and appearances.
Download test form
You can also use the test forms for the baseline-text, baseline-integer, and baseline-integer field plug-ins. Just be sure to update the name of the field plug-in in the appearance of each field (e.g. change "baseline-text" to "text-integer-decimal").
-
Developer documentation
Instructions and resources for developing your own field plug-ins.
https://github.com/surveycto/Field-plug-in-resources -
User documentation
How to get started using field plug-ins in your SurveyCTO form.
https://docs.surveycto.com/02-designing-forms/03-advanced-topics/06.using-field-plug-ins.html
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent