Extensible viewpicker

The standard viewpicker displays column values from a DominoToGo view. When you want to extend such a viewpicker, for example with textfields to allow the user to give values for each row, you need the extensible picker.

The extensible picker is based on a Titanium Table and therefore is slower that the standard picker (which is based on a Titanium ListView).

Code sample:

<Require id="row32" src="jbuss/forms/section_fieldgroup" label1="extensible viewpicker demo"  field1="viewpicker" field1ViewpickerType="ext" field1DB="settings" field1View="(mobile_articles)"  field1Column="ArticleNameDE#Article_Nr#ArticleBudget" field1ColumnSeperator="#">
  <View id="field1ViewpickerRow" width="Ti.UI.FILL" height="Ti.UI.SIZE" layout="horizontal">
    <Label id="column1" width="40%"/>
    <Label id="column2" width="10%"/>
    <Label id="column3" width="10%"/>
    <TextField c_id="amount" width="10%" class="dialogTableField" c_onFocus="custom.viewpicker_row_field_focus" backgroundColor="white" textAlign="right" hintText="0" borderColor="#808080" keyboardType="Ti.UI.KEYBOARD_DECIMAL_PAD"></TextField>
    <TextField c_id="price" width="10%" class="dialogTableField" c_onFocus="custom.viewpicker_row_field_focus" backgroundColor="white" textAlign="right" hintText="€" borderColor="#808080" keyboardType="Ti.UI.KEYBOARD_DECIMAL_PAD"></TextField>

fieldXViewpickerType = “ext”  use the extensible, table bases view picker

Define a View inside the Require tag. The View must use id=”fieldXViewpickerRow”.

Inside that View, define one label for each column of the DominoToGo view and give the labels the id “column1”, “column2” and so on.

Beside the labels you can define anything you want inside the View, for example TextFields. To access these fields from JavaScript, you should give them some custom id like the c_id in the code sample above.

Do not use a background color for the fieldXViewpickerRow View. Use fieldXViewpickerRowBackgroundColor and fieldXViewpickerRowSelectedBackgroundColor instead.

Event binding in Views inside the fieldXViewpickerRow View

You can use event binding like this:

<View id="fieldXViewpickerRow">
 <TextField c_onFocus="custom.my_textfield_focus_event"></TextField>
  • You need to prefix each event name with “c_on” and write the event name’s first letter in upper case.
  • You need to create the approperiate function in the jbuss_custom/forms.js module like this: module.exports.my_textfield_focus_event = function(e) { … }