widget:type Directive Reference
The widget:type directive in the fields.ini file specifies the type of widget that should be used to edit a particular field in HTML forms. Xataface uses HTML_QuickForm for its form generation so theoretically any widget supported by HTML_QuickForm should work with Xataface.
Available Widget Types
| Name | Description | Version |
|---|---|---|
| advmultiselect | Two select lists with add/remove buttons. Selected items appear in the right select list. Options may be selected from the left select list. | 1.0 |
| ajax_upload | File upload widget that uses AJAX to perform uploading with progress indicator. http://media.weblite.ca/files/photos/ajax_uploader.png?max_width=640 | 2.0 and ajax_upload module |
| autocomplete | An autocomplete. text field. This is not to be confused with the yui_autocomplete widget. The main difference is that this widget does not provide a drop-down list of possibilities, it just tries to complete what the user is typing inside the text field based on a valuelist. | all |
| calendar | A DHTML pop-up calendar to select the date. http://media.weblite.ca/files/photos/calendar_widget.png?max_width=400 | 0.5.3 |
| checkbox | A checkbox or checkbox group. Example 1: Checkbox as boolean on Tinyint field. http://media.weblite.ca/files/photos/checkbox_widget.png?max_width=400 Example 2: Checkbox group to allow multiple selections. http://media.weblite.ca/files/photos/checkbox-group_widget.png?max_width=500 | all |
| ckeditor | A WYSIWYG HTML editor widget for use in Xataface 2.0 or higher. This is meant to replace the older FCKeditor and TinyMCE editor widgets. http://media.weblite.ca/files/photos/Screen_shot_2011-08-12_at_9.44.22_AM.png?max_width=640 | 2.0 and ckeditor module |
| date | Select lists for month, year, day, hour, etc… | all |
| datepicker | Alternate jQuery widget for selecting dates. http://media.weblite.ca/files/photos/Screen%20shot%202011-06-07%20at%2010.39.53%20AM.png?max_width=640 | 2.0 and datepicker module |
| datetimepicker | Alternate jQuery widget for selecting dates/times. http://media.weblite.ca/files/photos/Screen%20shot%202011-06-07%20at%2010.39.53%20AM.png?max_width=640 (This photo is of the datepicker widget… datetimepicker is similar but has time also). | 2.0 and datepicker module |
| durationselector | A special case date widget meant to be used in editing the “end time” of a datetime field as a duration relative to a start datetime field. http://media.weblite.ca/files/photos/Screen%20shot%202011-06-09%20at%203.15.52%20PM.png?max_width=640 | 2.0 and durationselector module |
| depselect | A select list whose contents is dependent upon the current value of other fields in the form. http://media.weblite.ca/files/photos/Screen%20shot%202011-06-09%20at%2011.11.34%20AM.png?max_width=640 | 2.0 and depselect module installed |
| file | A file widget (default type for container fields and blob fields. http://media.weblite.ca/files/photos/file_widget.png?max_width=400 | all |
| grid | A grid widget for editing multiple rows of related records inside the edit form. Supports adding/removing/reordering. As of version 1.2.5, file uploads are not supported in the grid widget. http://media.weblite.ca/files/photos/grid_widget.png?max_width=500 | 1.0 |
| group | A compound widget for editing multiple fields but storing the data in a single XML field. http://media.weblite.ca/files/photos/group_widget.png?max_width=400 | all |
| hidden | A hidden field | all |
| htmlarea | A WYSIWYG (What you see is what you get) HTML editor. This defaults to FCKeditor, but TinyMCE is also supported. http://media.weblite.ca/files/photos/htmlarea_widget.png?max_width=400 | all |
| lookup | A field that allows users to look-up a record from another table. THis is a good alternative to a select list. It doesn’t use a vocabulary, so this is appropriate when vocabularies would be unpractical (for large vocabularies). You do, however need to specify the widget:table directive for the field so that the lookup knows from which table to load the records. http://media.weblite.ca/files/photos/Picture%2023.png?max_width=640 | 1.2 |
| password | A password field. http://media.weblite.ca/files/photos/password_widget.png?max_width=400 | all |
| select | A select list. Example 1: A single select. http://media.weblite.ca/files/photos/select_widget.png?max_width=400 Example 2: A multi-select. To use a multi-select, add repeat=1 to your fields.ini. http://media.weblite.ca/files/photos/multi-select_widget.png?max_width=500 | all |
| table | A compound widget for editing tabular data. This widget dictates the storage format as XML. http://media.weblite.ca/files/photos/table_widget.png?max_width=400 | all |
| text | A text field http://media.weblite.ca/files/photos/text_widget.png?max_width=400 | all |
| tagger | A widget to add n:m related records to a relationship inside the edit form as tags. http://media.weblite.ca/files/photos/Screen%20shot%202011-05-12%20at%203.32.26%20PM.png?max_width=400 | 2.0 and tagger module |
| textarea | A text area (multi-line text field) http://media.weblite.ca/files/photos/textarea_widget.png?max_width=400 | all |
| time | A select list of times separated by a specified interval (default 30 minutes). | 0.7 |
| yui_autocomplete | An autocomplete widget ported from the Yahoo UI Library. http://media.weblite.ca/files/photos/yui_autocomplete.png?max_width=400 Additional Directives - yui_autocomplete:maxResultsDisplayed : Set the maximum number of results to display at a time. Default is 10. (This directive available since 2.0.3 or SVN rev 4784 in trunk). | 1.0 |
var disqus_identifier = ‘xataface.com/wiki/widget:type’; (function() { var dsq = document.createElement(‘script’); dsq.type = ‘text/javascript’; dsq.async = true; dsq.src = ‘http://xataface.disqus.com/embed.js’; (document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(dsq); })(); blog comments powered by Disqus
//<![CDATA[ (function() { var links = document.getElementsByTagName(‘a’); var query = ‘?’; for(var i = 0; i < links.length; i++) { if(links[i].href.indexOf(‘#disqus_thread’) >= 0) { query += ‘url’ + i + ‘=’ + encodeURIComponent(links[i].href) + ‘&’; } } document.write(‘