Combining Two Templates

[AbdulahadMalik3]

Hey Guys,

I would like to combine two templates provided by ESRI. The basic template and the editor template. Does anyone know how do go about doing this and where do I start. Any guideline and direction will be greatly appreciated.

Thanks.

[IanWittenmyer]

Hey Guys,

I would like to combine two templates provided by ESRI. The basic template and the editor template. Does anyone know how do go about doing this and where do I start. Any guideline and direction will be greatly appreciated.

Thanks.

The basic viewer template already supports editing.  Is there something else that you like about the editor template that the Basic Viewer is missing?

[AbdulahadMalik3]

The basic viewer template already supports editing.  Is there something else that you like about the editor template that the Basic Viewer is missing?

Although the basic template supports editing, there is no option to delete or select features you create. In the edit template you can select and delete but the problem is there is no measure tool in the edit template. So i wanted to combine the two so I can have editing capabilities from the edit template and then measure toolbar from the basic template.

[AbdulahadMalik3]

Although the basic template supports editing, there is no option to delete or select features you create. In the edit template you can select and delete but the problem is there is no measure tool in the edit template. So i wanted to combine the two so I can have editing capabilities from the edit template and then measure toolbar from the basic template.

So does anyone have any solution or idea?

[IanWittenmyer · Accepted solution]

Here is some code that will allow you to add the editor toolbar to the basic viewer.  We are going to make this a configurable option in the future.Here's what you have to do.

In layout.css add the following:

.esriDrawingToolbar{     position:absolute;     top:0px;     right:0px;     left:0px;     border:none !important;     margin-bottom:40px;   }

Then in layout.js replace the existing createEditor function with this one:

function createEditor() {       if (editorWidget) {         return;     }       if (editLayers.length > 0) {           var editLayerInfo = editLayers;         var templateLayers = dojo.map(editLayers, function (layer) {             return layer.featureLayer;         });         //add field infos if applicable - this will contain hints if defined in the popup. Also added logic to hide fields that have visible = false. The popup takes          //care of this for the info window but not for the edit window.          dojo.forEach(editLayerInfo, function (layer) {                              if (layer.featureLayer && layer.featureLayer.infoTemplate && layer.featureLayer.infoTemplate.info && layer.featureLayer.infoTemplate.info.fieldInfos) {                 //only display visible fields                  var fields = layer.featureLayer.infoTemplate.info.fieldInfos;                 var fieldInfos = [];                 dojo.forEach(fields, function (field) {                     if (field.visible) {                         fieldInfos.push(field);                     }                 });                 layer.fieldInfos = fieldInfos;             }         });             var editPanelHeight = dojo.style(dojo.byId("leftPane"), "height");           var templatePicker = new esri.dijit.editing.TemplatePicker({             featureLayers: templateLayers,             showTooltip: false,             rows: "auto",             columns: "auto",             style: "height:" + editPanelHeight + "px;width:" + (parseInt(configOptions.leftpanewidth) - 10) + "px;"         }, dojo.create("div",{},"editPanel"));          templatePicker.startup();           var params = {             map: map,             templatePicker:templatePicker,             layerInfos: editLayerInfo,             toolbarVisible: true         };         editorWidget = new esri.dijit.editing.Editor({settings: params},  dojo.create("div",{             id:"editDiv"         },"editPanel" ));                    editorWidget.startup();                             disablePopups();     }   }

[AbdulahadMalik3]

Here is some code that will allow you to add the editor toolbar to the basic viewer.  We are going to make this a configurable option in the future.Here's what you have to do.

In layout.css add the following:

.esriDrawingToolbar{
    position:absolute;
    top:0px;
    right:0px;
    left:0px;
    border:none !important;
    margin-bottom:40px;
 
}

Then in layout.js replace the existing createEditor function with this one:

function createEditor() {
 
    if (editorWidget) {
        return;
    }
 
    if (editLayers.length > 0) {
 
        var editLayerInfo = editLayers;
        var templateLayers = dojo.map(editLayers, function (layer) {
            return layer.featureLayer;
        });
        //add field infos if applicable - this will contain hints if defined in the popup. Also added logic to hide fields that have visible = false. The popup takes 
        //care of this for the info window but not for the edit window. 
        dojo.forEach(editLayerInfo, function (layer) {
            
   
            if (layer.featureLayer && layer.featureLayer.infoTemplate && layer.featureLayer.infoTemplate.info && layer.featureLayer.infoTemplate.info.fieldInfos) {
                //only display visible fields 
                var fields = layer.featureLayer.infoTemplate.info.fieldInfos;
                var fieldInfos = [];
                dojo.forEach(fields, function (field) {
                    if (field.visible) {
                        fieldInfos.push(field);
                    }
                });
                layer.fieldInfos = fieldInfos;
            }
        });
 
 
        var editPanelHeight = dojo.style(dojo.byId("leftPane"), "height");
 
        var templatePicker = new esri.dijit.editing.TemplatePicker({
            featureLayers: templateLayers,
            showTooltip: false,
            rows: "auto",
            columns: "auto",
            style: "height:" + editPanelHeight + "px;width:" + (parseInt(configOptions.leftpanewidth) - 10) + "px;"
        }, dojo.create("div",{},"editPanel")); 
        templatePicker.startup();
 
        var params = {
            map: map,
            templatePicker:templatePicker,
            layerInfos: editLayerInfo,
            toolbarVisible: true
        };
        editorWidget = new esri.dijit.editing.Editor({settings: params},  dojo.create("div",{
            id:"editDiv"
        },"editPanel" ));
          
        editorWidget.startup();
        
 
        
        disablePopups();
    }
 
}

Thank you so much.

[BrianCollins2]

How would one add a 'Start Editing' and 'Stop Editing' button set and related functions? I'm trying to roll out an application to some users for editing. We'd like to include the Start/Stop functionality so the interface is a little more intuitive for the end users.