User-definable default values in popup while editing?

2631
3
Jump to solution
04-25-2016 01:04 PM
ZoeZaloudek
Occasional Contributor

I have successfully edited my own feature service with a web mapping application I created starting with the “Editor widget with simple toolbar” sample.  Now, I’m trying to add something extra to the new WMA and haven’t quite figured it out.

My features are points. They are all contained in one feature layer in my WMA.  When the user clicks on or adds a new point, they see a popup with seven editable attributes.  My assumption is that some users will want to add many points, but since some of the attributes will be the same for all of their points, they would want to be able to set default values for some of these attributes.  I have been able to set up text boxes in the left pane of my WMA to accept default values, now I just need to figure out how to make them show up in the popup when a user adds a new point.

Screenshot of the popup (for a point that already exists)

PopupEditing.png

Screenshot of the left pane (for setting default values)

LeftPaneWithDefaultValues.png

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Zoe,

  Here is what I use to auto-populate a field:

this.editor.templatePicker.on("selection-change", lang.hitch(this, function() {  
          var selected = this.editor.templatePicker.getSelected();  
          if (selected) {  
            var featureLayer = selected.featureLayer;  
            on.once(featureLayer, "before-apply-edits", lang.hitch(this, function(evt){  
              if(evt.adds && evt.adds.length > 0){  
                if(evt.adds[0].attributes.hasOwnProperty('Begin_Date_Occ')){  
                  evt.adds[0].attributes.Begin_Date_Occ = new Date(Date.now());  
                }  
                this.editor.attributeInspector.refresh();  
              }  
            }));  
          }  
        }));
  1. this.editor.templatePicker.on("selection-change", lang.hitch(this, function() { 
  2.           var selected = this.editor.templatePicker.getSelected(); 
  3.           if (selected) { 
  4.             var featureLayer = selected.featureLayer; 
  5.             on.once(featureLayer, "before-apply-edits", lang.hitch(this, function(evt){ 
  6.               if(evt.adds && evt.adds.length > 0){ 
  7.                 if(evt.adds[0].attributes.hasOwnProperty('Begin_Date_Occ')){ 
  8.                   evt.adds[0].attributes.Begin_Date_Occ = new Date(Date.now()); 
  9.                 } 
  10.                 this.editor.attributeInspector.refresh(); 
  11.               } 
  12.             })); 
  13.           } 
  14.         }));

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

Zoe,

  Here is what I use to auto-populate a field:

this.editor.templatePicker.on("selection-change", lang.hitch(this, function() {  
          var selected = this.editor.templatePicker.getSelected();  
          if (selected) {  
            var featureLayer = selected.featureLayer;  
            on.once(featureLayer, "before-apply-edits", lang.hitch(this, function(evt){  
              if(evt.adds && evt.adds.length > 0){  
                if(evt.adds[0].attributes.hasOwnProperty('Begin_Date_Occ')){  
                  evt.adds[0].attributes.Begin_Date_Occ = new Date(Date.now());  
                }  
                this.editor.attributeInspector.refresh();  
              }  
            }));  
          }  
        }));
  1. this.editor.templatePicker.on("selection-change", lang.hitch(this, function() { 
  2.           var selected = this.editor.templatePicker.getSelected(); 
  3.           if (selected) { 
  4.             var featureLayer = selected.featureLayer; 
  5.             on.once(featureLayer, "before-apply-edits", lang.hitch(this, function(evt){ 
  6.               if(evt.adds && evt.adds.length > 0){ 
  7.                 if(evt.adds[0].attributes.hasOwnProperty('Begin_Date_Occ')){ 
  8.                   evt.adds[0].attributes.Begin_Date_Occ = new Date(Date.now()); 
  9.                 } 
  10.                 this.editor.attributeInspector.refresh(); 
  11.               } 
  12.             })); 
  13.           } 
  14.         }));
ZoeZaloudek
Occasional Contributor

Wow, Robert, your help has saved me so much time!  I had to tweak the code a bit to get it to work in my WMA, but now it is doing exactly what I wanted!

Users have the option to enter their default information in the text boxes in the left pane, and click OK:

LeftPaneWithDefaultValues_good.png

Here is the code for the function that runs when the OK button is clicked:

function clickBtnSetDefaultInfo()  {
    var inname = txt1.value;
    var incomm = txt2.value;
    var inemail = txt3.value;
    var inphone = txt4.value;
    // Set auto population of commenter fields
    theEditor.settings.editor.templatePicker.on("selection-change", lng.hitch(this, function() {  
        var selected = theEditor.settings.editor.templatePicker.getSelected();  
        if (selected) {
            fLayerPt.on("before-apply-edits", lng.hitch(this, function(evt){  
                if(evt.adds && evt.adds.length > 0){  
                    if(evt.adds[0].attributes.hasOwnProperty('CommenterName')){ evt.adds[0].attributes.CommenterName = inname;  }
                    if(evt.adds[0].attributes.hasOwnProperty('CommenterComm')){ evt.adds[0].attributes.CommenterComm = incomm;  }
                    if(evt.adds[0].attributes.hasOwnProperty('CommenterEmail')){ evt.adds[0].attributes.CommenterEmail = inemail;  }
                    if(evt.adds[0].attributes.hasOwnProperty('CommenterPhone')){ evt.adds[0].attributes.CommenterPhone = inphone;  }
                    theEditor.settings.editor.attributeInspector.refresh(); 
                }  
            }));  
        }  
    }));
}

And then here is the popup when the user adds a new point:

PopupEditing_good.png

The Clear button will run a similar function to the OK button, it sets the text box values and the default values to "".

Thanks again!

0 Kudos
ZoeZaloudek
Occasional Contributor

I edited my code a bit more, so I figured I'd share.  For the 'Clear' button, instead of running code similar to the 'Set' function, now it simply sets the values of the text boxes in the left pane to blank strings, and then runs the 'Set' function.

function clickBtnClearDefaultInfo()  {
    txt1.value = '';
    txt2.value = '';
    txt3.value = '';
    txt4.value = '';
    clickBtnSetDefaultInfo();
}
0 Kudos