nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Web AppBuilder Widget Configuration Validation

JamilNawaz

I have created a custom widget with configuration in web appbuilder. What I need to do is disable "Ok" button or do nothing if all fields in the config screen are not filled. In other words, I need to do save only when all inputs are filled. Any idea how to achieve it?

Regards,

Jamil

Encuentra más publicaciones etiquetadas con

Accepted answers

RobertScheitlin__GISP

Jamil,

OK Sorry, they do not provide access to disable the main widget settings button like that. You can use the code I provided for an subsequent/additional popups.

All comments

MarkBuie1

I'll provide my solution, even though this is an old post, since it's a top Google result.

As far as I know, you cannot disable the OK button, but there is a way to prevent users from moving forward if they don't meet your validation test.

When you click OK on the widget settings page, the getConfig() method is fired. If we return false on this method, the user will not be able to close the settings page. Therefore, we can add a validation method and return false if some criteria is not met - with a popup indicating what the user omitted.

getConfig<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>   
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="operator token">!</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>yourValidationMethod <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>      
    <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN>   
  <SPAN class="punctuation token">}</SPAN> 
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>  

yourValidationMethod<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>  
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">trim</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>someInput<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">get</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'value'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>     
    <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>   
  <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>      
    <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN>    
  <SPAN class="punctuation token">}</SPAN> 
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

Jamil,

OK Sorry, they do not provide access to disable the main widget settings button like that. You can use the code I provided for an subsequent/additional popups.

JamilNawaz

I am doing like this

return declare([BaseWidget], {

baseClass: 'jimu-widget-MyWidget-setting',

postCreate: function () {

this.inherited(arguments);

this.popup.disableButton(0);

});

Regards,

Jamil

JamilNawaz

Where to write that? I write on Settings.js postCreate method, but there is no "this.popup".

RobertScheitlin__GISP

Jamil,

Simple as

this.popup.disableButton(0);

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.