topic Re: WAB Dev Edition: where do I customize widget placeholder values? in Web AppBuilder Custom Widgets Questions

WAB Dev Edition: where do I customize widget placeholder values?

FrancescoTonini2 — Wed, 24 Jan 2018 19:55:18 GMT

Hello,

I am trying to customize my WAB-templated app by using some placeholder values to be seen by users in the appropriate text space for widget parameters. Specifically, instead of having a "defaultValue" set inside the widget config_widgetname.json file like I do now, I would like to have true placeholder labels. Could you point me to the correct file/parameters where I can customize and add these?

Re: WAB Dev Edition: where do I customize widget placeholder values?

RobertScheitlin__GISP — Wed, 24 Jan 2018 20:22:17 GMT

Francesco,

So are you saying that you want the placeHolder string to come from your widgets NLS Strings.js?

Re: WAB Dev Edition: where do I customize widget placeholder values?

FrancescoTonini2 — Wed, 24 Jan 2018 20:30:55 GMT

Robert,

I am basically trying to locate where the placeholder string parameter value is, since I have several GP widgets like that and would like to replace the "defaultValue" with traditional placeholder text (greyed out and disappearing when the user clicks inside the text space to type a value)...

Re: WAB Dev Edition: where do I customize widget placeholder values?

RobertScheitlin__GISP — Wed, 24 Jan 2018 20:49:01 GMT

Francesco,

So that is a GP widget? Most likely the widget is not setup to have a placeholder string. So if the widget currently is setting the inputs value with a string configured in the widgets json then you just have to find in the widget source code where that is happening and instead of setting the inputs value set the placeHolder instead.

Re: WAB Dev Edition: where do I customize widget placeholder values?

FrancescoTonini2 — Wed, 24 Jan 2018 21:02:15 GMT

Correct, these are all GP widgets from WAB to which I gave a different name (and settings) for my web app. I was afraid the issue was the GP widget itself not having such a parameter set up. Currently, the GP widget uses the "defaultValue" parameter inside the corresponding ~\configs\Geoprocessing\config_<widget name>.json file and uses that to set up default values to be passed to the GP service once the user clicks on "Execute". I would simply like to remove any default value and instead have a placeholder greyed out value (like it's now for the Search widget or the Geocoding widgets for example). What do you mean by setting the "placeHolder" inside the widget source code? You mean look inside the ~\widgets\Geoprocessing\Widget.js file or inside the ~\configs\Geoprocessing\config_<widget name>.json file? Is placeHolder a variable name you picked or an existing parameter name I can add?

Re: WAB Dev Edition: where do I customize widget placeholder values?

RobertScheitlin__GISP — Wed, 24 Jan 2018 21:09:40 GMT

Inside the Widget.js

https://dojotoolkit.org/reference-guide/1.10/dijit/form/TextBox.html#using-the-placeholder-parameter

Re: WAB Dev Edition: where do I customize widget placeholder values?

FrancescoTonini2 — Thu, 25 Jan 2018 14:05:54 GMT

Thanks Rob. Once I edit my Widget.js, do I also have to modify the corresponding Widget.html? And, since I am assuming you refer to the ~\widgets\Geoprocessing\Widget.js file, do I then have to go into all my GP widgets inside the ~\configs\Geoprocessing\config_<widget name>.json files and make sure the placeHolder values are passed in there to become available to each one separately?

Re: WAB Dev Edition: where do I customize widget placeholder values?

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:58:27 GMT

Francesco,

I see no need to modify anything in the Widget.html, actually you are not likely to modify the Widget.js. In the GP widget its UI is built dynamically based on the GP Service needs. It will likely be the editors folder and the specific editor like the simpleEditors.js for a linearUnit.

  mo.LinerUnitEditor = declare(BaseEditor, {
    baseClass: 'jimu-gp-editor-base jimu-gp-editor-liner-unit',
    editorName: 'LinerUnitEditor',

    postCreate: function(){
      this.inherited(arguments);
      this.distance = this.param.defaultValue ? this.param.defaultValue.distance : 0;
      this.units = this.param.defaultValue ? this.param.defaultValue.units : 'esriMeters';

      this.inputDijit = new NumberTextBox({value: this.distance});‍‍‍‍‍‍‍‍‍‍

Notice on line 10 below the value of the NumberTextBox is populated with the this.param.defaultValue.

So you would want to change that to:

this.inputDijit = new NumberTextBox({placeHolder: this.distance});‍

Re: WAB Dev Edition: where do I customize widget placeholder values?

FrancescoTonini2 — Thu, 25 Jan 2018 14:34:22 GMT

I am not familiar with the editors folder...What are those html and js files in there for? Are you saying in my case I would want to go edit the simpleEditors.js file for what I want to accomplish (using your code above), not any of the other "editors" files?

Re: WAB Dev Edition: where do I customize widget placeholder values?

RobertScheitlin__GISP — Thu, 25 Jan 2018 14:43:03 GMT

Francesco,

You are wanting to do some edits that will require you to investigate and understand the inner workings of the GP widget. As I mentioned earlier I am not a GP widget user so I can not give you the exact code change that you will have to make and to which files, that is your job as the developer that is wanting to make these changes. I have given you advice on where to look and begin your search.

Re: WAB Dev Edition: where do I customize widget placeholder values?

FrancescoTonini2 — Thu, 25 Jan 2018 14:50:49 GMT

Ok, seems like this stuff is all a bit above my head and less of a quick fix to use placeholders than I thought. Thanks for the pointers.