give focus to a form field

2438
3
Jump to solution
04-11-2016 11:13 AM
SebastianRoberts
Occasional Contributor III

I am using Robert's eSearch widget, and would like the first Input field (or parameter field) on the 'By Value' tab to have focus when the By Value tab is selected (as in the screen shot below).  If a user changes the "search by" method, then focus would again go to the updated input field.  Any Suggestions?

focus_example.png

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Sebastian,

  It involves adding code to several files. I will add this to the next release too:

1. Widget.js:

in AttributeLayerExpressionChange function Line 9:

onAttributeLayerExpressionChange: function (newValue) {
        this.expressIndex = newValue;
        var valuesObj = lang.clone(this.config.layers[this.AttributeLayerIndex].expressions.expression[newValue].values.value);
        html.empty(this.textsearchlabel);
        html.place(html.toDom(this.config.layers[this.AttributeLayerIndex].expressions.expression[newValue].textsearchlabel), this.textsearchlabel);
        this.paramsDijit.clear();
        this.paramsDijit.build(valuesObj, this.resultLayers[this.AttributeLayerIndex], this.config.layers[this.AttributeLayerIndex].url,
                               this.config.layers[this.AttributeLayerIndex].definitionexpression);
        this.paramsDijit.setFocusOnFirstParam();
      },

in _initLayerSelect find the comment "//init the first available attrib Layers paramsDijit" (Lines 12 -14):

//init the first available attrib layers paramsDijit
              if(attribOptions.length > 0){
                var aIndex = attribOptions[0].value;
                this.AttributeLayerIndex = aIndex;
                this._initSelectedLayerExpressions();
                if(this.config.layers[aIndex].expressions.expression.length > 0){
                  var valuesObj = lang.clone(this.config.layers[aIndex].expressions.expression[0].values.value);
                  html.empty(this.textsearchlabel);
                  html.place(html.toDom(this.config.layers[aIndex].expressions.expression[0].textsearchlabel), this.textsearchlabel);
                  this.paramsDijit.build(valuesObj, this.resultLayers[aIndex], this.config.layers[aIndex].url,
                                       this.config.layers[aIndex].definitionexpression);
                  on.once(this.paramsDijit, 'param-ready', lang.hitch(this, function () {
                    this.paramsDijit.setFocusOnFirstParam();
                  }));
                }

in onAttributeLayerChange (Line 10):

onAttributeLayerChange: function (newValue) {
        this.AttributeLayerIndex = newValue;
        this._initSelectedLayerExpressions();
        var valuesObj = lang.clone(this.config.layers[newValue].expressions.expression[0].values.value);
        html.empty(this.textsearchlabel);
        html.place(html.toDom(this.config.layers[newValue].expressions.expression[0].textsearchlabel), this.textsearchlabel);
        this.paramsDijit.clear();
        this.paramsDijit.build(valuesObj, this.resultLayers[newValue], this.config.layers[newValue].url,
                               this.config.layers[newValue].definitionexpression);
        this.paramsDijit.setFocusOnFirstParam();

2. Parameters.js

Add this new function:

setFocusOnFirstParam: function(){
        var spDoms = query('.widget-esearch-single-parameter',this.tbody);
        var sp = registry.byNode(spDoms[0]);
        sp.focusValueObj();
      },

3. SingleParameter.js

Add new require and parameter (line 4 and 8):

...
'dojo/keys',
  'dojo/Evented',
  'dijit/focus'
],
  function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template, lang,
  html, array, json, on, query, Deferred, FilteringSelect, ValidationTextBox, DateTextBox,
  NumberTextBox, Memory, esriRequest,PagingQueryTask,keys,Evented, focusUtil) {/*jshint unused: false*/

Add new function:

focusValueObj:function(){
        var shortType = this.value.fieldObj.shortType;
        if(shortType === 'string'){
          if(this._type === 1){
            focusUtil.focus(this.stringTextBox);
          }else if(this._type === 2){
            focusUtil.focus(this.stringCodedValuesFS);
          }
        }
        else if(shortType === 'number'){
          if(this._type === 1){
            focusUtil.focus(this.numberTextBox);
          } else if(this._type === 2){
            focusUtil.focus(this.numberCodedValuesFS);
          } else if(this._type === 3){
            focusUtil.focus(this.numberTextBox1);
          }
        }
        else if(shortType === 'date'){
          if(this._type === 1){
            focusUtil.focus(this.dateTextBox);
          } else if(this._type === 2){
            focusUtil.focus(this.dateTextBox1);
          }
        }
      },

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

Sebastian,

  It involves adding code to several files. I will add this to the next release too:

1. Widget.js:

in AttributeLayerExpressionChange function Line 9:

onAttributeLayerExpressionChange: function (newValue) {
        this.expressIndex = newValue;
        var valuesObj = lang.clone(this.config.layers[this.AttributeLayerIndex].expressions.expression[newValue].values.value);
        html.empty(this.textsearchlabel);
        html.place(html.toDom(this.config.layers[this.AttributeLayerIndex].expressions.expression[newValue].textsearchlabel), this.textsearchlabel);
        this.paramsDijit.clear();
        this.paramsDijit.build(valuesObj, this.resultLayers[this.AttributeLayerIndex], this.config.layers[this.AttributeLayerIndex].url,
                               this.config.layers[this.AttributeLayerIndex].definitionexpression);
        this.paramsDijit.setFocusOnFirstParam();
      },

in _initLayerSelect find the comment "//init the first available attrib Layers paramsDijit" (Lines 12 -14):

//init the first available attrib layers paramsDijit
              if(attribOptions.length > 0){
                var aIndex = attribOptions[0].value;
                this.AttributeLayerIndex = aIndex;
                this._initSelectedLayerExpressions();
                if(this.config.layers[aIndex].expressions.expression.length > 0){
                  var valuesObj = lang.clone(this.config.layers[aIndex].expressions.expression[0].values.value);
                  html.empty(this.textsearchlabel);
                  html.place(html.toDom(this.config.layers[aIndex].expressions.expression[0].textsearchlabel), this.textsearchlabel);
                  this.paramsDijit.build(valuesObj, this.resultLayers[aIndex], this.config.layers[aIndex].url,
                                       this.config.layers[aIndex].definitionexpression);
                  on.once(this.paramsDijit, 'param-ready', lang.hitch(this, function () {
                    this.paramsDijit.setFocusOnFirstParam();
                  }));
                }

in onAttributeLayerChange (Line 10):

onAttributeLayerChange: function (newValue) {
        this.AttributeLayerIndex = newValue;
        this._initSelectedLayerExpressions();
        var valuesObj = lang.clone(this.config.layers[newValue].expressions.expression[0].values.value);
        html.empty(this.textsearchlabel);
        html.place(html.toDom(this.config.layers[newValue].expressions.expression[0].textsearchlabel), this.textsearchlabel);
        this.paramsDijit.clear();
        this.paramsDijit.build(valuesObj, this.resultLayers[newValue], this.config.layers[newValue].url,
                               this.config.layers[newValue].definitionexpression);
        this.paramsDijit.setFocusOnFirstParam();

2. Parameters.js

Add this new function:

setFocusOnFirstParam: function(){
        var spDoms = query('.widget-esearch-single-parameter',this.tbody);
        var sp = registry.byNode(spDoms[0]);
        sp.focusValueObj();
      },

3. SingleParameter.js

Add new require and parameter (line 4 and 8):

...
'dojo/keys',
  'dojo/Evented',
  'dijit/focus'
],
  function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template, lang,
  html, array, json, on, query, Deferred, FilteringSelect, ValidationTextBox, DateTextBox,
  NumberTextBox, Memory, esriRequest,PagingQueryTask,keys,Evented, focusUtil) {/*jshint unused: false*/

Add new function:

focusValueObj:function(){
        var shortType = this.value.fieldObj.shortType;
        if(shortType === 'string'){
          if(this._type === 1){
            focusUtil.focus(this.stringTextBox);
          }else if(this._type === 2){
            focusUtil.focus(this.stringCodedValuesFS);
          }
        }
        else if(shortType === 'number'){
          if(this._type === 1){
            focusUtil.focus(this.numberTextBox);
          } else if(this._type === 2){
            focusUtil.focus(this.numberCodedValuesFS);
          } else if(this._type === 3){
            focusUtil.focus(this.numberTextBox1);
          }
        }
        else if(shortType === 'date'){
          if(this._type === 1){
            focusUtil.focus(this.dateTextBox);
          } else if(this._type === 2){
            focusUtil.focus(this.dateTextBox1);
          }
        }
      },
SebastianRoberts
Occasional Contributor III

Robert,

Great! Thanks for your help, and quick turn-around!

I'm using a slightly older version of your widget, and the param-ready event wasn't firing for me, so I just made a slight compromise and changed the following line:

on.once(this.paramsDijit, 'param-ready', lang.hitch.....

to:

setTimeout(lang.hitch(this, function () { this.paramsDijit.setFocusOnFirstParam()}), 300);

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sebastian,

  Ah, I forgot that was from the 1.3.0.3 release (not out yet).