Customizing Edit Widget Popup with a customField and ValidationTextBox?

[TimDine]

I'm attempting to enhance the editing functionality found in the JavaScript Viewer produced by the Web App builder (Developer Edition).  A simple version of what I am attempting would be creating a way to force the validation of an web address into a text box when editing a feature service.

From the research I've done so far it appears that I need to set the customField property within the layerinfo section config_edit.json for the appropriate field.  When I do put something in there I'm unsure if it's correct because I'm not sure where it is ending up.  It looks like it gets passed right through the editor widget.js code (it runs right throughh the getLayers function) and that the popup doesn't know what to do with it (other fields come in fine while my custom field has only a label and a blank spot where my custom dijit should be), but haven't found where to sort that out.  I haven't found the spot in the api or a widget's code that looks like where the infowindow/popup get built and would need to reference a custom dijit.

For testing I've been trying to assign the URLInput dijit found within the default viewer to a generic text field.  If that can work I'll change it out to have different validation.  Most of what I've read through the forum talks about doing this sort of thing on generic viewers, but not about attempting it within the web app builder template code.  Any help would be appreciated!

Thanks.

Addition:

Clearer version of what I'm attempting.  Multi-select input for text field in javascript attribute inspector

I haven't figured out referencing a dijit in the out of the box editor config that can be used by the attribute inspector.  I want to make what is happening in the linked discussion function in the Web App Builder Widget Framework.  I don't require the GUI config, straight to the code is fine.

Message was edited by: Tim Dine

Message was edited by: Tim Dine Attachment with some progress using a string in the config that is detected in widget.js and replaced with a phone number validator dijit.

[RobertScheitlin__GISP · Accepted solution]

Tim,

  I could not get the customField property to work when adding it to the json (the problem seems to be that when adding it to the json you have to make the custom dijit a string and when the editor dijit tries to add the custom field it see it as a string and not an actual object.). So the way I worked around this was to add the customField property in the edit widget.js

1. I required "Textarea" (this was the dijit I wanted to used for my field)
2. I added a var for this new object, "notesDijit: null,"
3. In the onOpen function I set the notesDijit var

        this.notesDijit = new Textarea({
          required: false
        });

   4. In the getLayers function I added this code (lines 25-29):

getLayers: function() {
        var layerInfos = this.config.editor.layerInfos;
        for (var i = 0; i < layerInfos.length; i++) {
          var featureLayer = layerInfos.featureLayer;
          var layer = this.getLayerFromMap(featureLayer.url);
          if (!layer) {
            if (!layerInfos.featureLayer.options) {
              layerInfos.featureLayer.options = {};
            }
            if (!layerInfos.featureLayer.options.outFields) {
              if (layerInfos.fieldInfos) {
                layerInfos.featureLayer.options.outFields = [];
                for (var j = 0; j < layerInfos.fieldInfos.length; j++) {
                  layerInfos.featureLayer.options
                    .outFields.push(layerInfos.fieldInfos.fieldName);
                }
              } else {
                layerInfos.featureLayer.options.outFields = ["*"];
              }
            }
            layer = new FeatureLayer(featureLayer.url, featureLayer.options);
            this.map.addLayer(layer);
          }
          if (layer.visible) {
            for (var j2 = 0; j2 < layerInfos.fieldInfos.length; j2++) {
              if(layerInfos.fieldInfos[j2].fieldName === "Case_Num"){
                layerInfos.fieldInfos[j2].customField = this.notesDijit;
              }
            }
            layerInfos.featureLayer = layer;
            this.layers.push(layerInfos);
          }
        }
      },

[TimDine]

I've tried using the customField property and put a keyword into the string there.  I'll identify the keyword and swap the string for the dijit object (yay dynamic typing). I'll likely have a couple fields with different names that I want to put the same behavior onto.  This should work quite nicely!  Thanks.

if (layerInfos.fieldInfos.customField == "phoneTextBox"){
   layerInfos.fieldInfos.customField = this.phoneTextBoxDijit;
}