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?
Solved! Go to Solution.
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);
},
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);
},