give focus to a form field

SebastianRoberts — Mon, 11 Apr 2016 18:13:51 GMT

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?

Re: give focus to a form field

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:36:39 GMT

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);
          }
        }
      },

Re: give focus to a form field

SebastianRoberts — Mon, 11 Apr 2016 21:11:00 GMT

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);

Re: give focus to a form field

RobertScheitlin__GISP — Mon, 11 Apr 2016 21:23:21 GMT

Sebastian,

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

topic give focus to a form field in Web AppBuilder Custom Widgets Questions

give focus to a form field

Re: give focus to a form field

Re: give focus to a form field

Re: give focus to a form field