Make widget settings fields required?

344
1
Jump to solution
04-11-2018 07:24 AM
KarlKemp
New Contributor II

Is there a way to make fields required on the settings panel for a custom Web AppBuilder widget?  My widget needs a few text values entered in its settings in order to function correctly.  I can add a dojo validator, and it will highlight the field if I type invalid data, but I can still close the settings panel and save the widget settings in an invalid state.  I have also marked the fields as required="true" but I can close the settings panel without entering them.

Is there a way to make fields required in the widgets settings panel?

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Karl the way I manage this in my widgets is :

      getConfig: function () {
        if (!this.validate(false)) {
          return false;
        }
        ...
      },
...
      validate: function (showTooltip) {
        if (lang.trim(this.layerUrl.get('value')) === '') {
          if (showTooltip) {
            this._showTooltip(this.layerUrl.domNode, "Please input value.");
          }
          return false;
        }
        if (lang.trim(this.layerName.get('value')) === '') {
          if (showTooltip) {
            this._showTooltip(this.layerName.domNode, "Please input value.");
          }
          return false;
        }
        var trs = this.displayFieldsTable._getNotEmptyRows();
        if (trs.length === 0) {
          if (showTooltip) {
            this._showTooltip(this.displayFieldsTable, "Please select display fields.");
          }
          return false;
        }
        return true;
      },

      _showTooltip: function (aroundNode, content, time) {
        this._scrollToDom(aroundNode);
        Tooltip.show(content, aroundNode);
        time = time || 2000;
        setTimeout(function () {
          Tooltip.hide(aroundNode);
        }, time);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

1 Reply
RobertScheitlin__GISP
MVP Emeritus

Karl the way I manage this in my widgets is :

      getConfig: function () {
        if (!this.validate(false)) {
          return false;
        }
        ...
      },
...
      validate: function (showTooltip) {
        if (lang.trim(this.layerUrl.get('value')) === '') {
          if (showTooltip) {
            this._showTooltip(this.layerUrl.domNode, "Please input value.");
          }
          return false;
        }
        if (lang.trim(this.layerName.get('value')) === '') {
          if (showTooltip) {
            this._showTooltip(this.layerName.domNode, "Please input value.");
          }
          return false;
        }
        var trs = this.displayFieldsTable._getNotEmptyRows();
        if (trs.length === 0) {
          if (showTooltip) {
            this._showTooltip(this.displayFieldsTable, "Please select display fields.");
          }
          return false;
        }
        return true;
      },

      _showTooltip: function (aroundNode, content, time) {
        this._scrollToDom(aroundNode);
        Tooltip.show(content, aroundNode);
        time = time || 2000;
        setTimeout(function () {
          Tooltip.hide(aroundNode);
        }, time);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍