Display the Editor AttributeInspector widget and InfoWindow content on a side panel

Summary

AttributeInspector is often displayed using a pop-up InfoWindow on a web map. For more information on info window, refer to ArcGIS API for JavaScript: Class: InfoWindow. The Editor widget, however, is used to edit the values of selected features from one or more feature layers, so it is better displayed using a side panel. A side panel display is sometimes necessary to avoid limiting the window size for information.

The following code sample demonstrates how to create a side panel for the AttributeInspector widget.

var attributeInspector = new AttributeInspector({layerInfos: featureLayerInfos}, "attributeDiv");  
 
var settings = {
map: map,
   layerInfos: featureLayerInfos,
   attributeInspector: attributeInspector 
};

Note:
The code sample above displays the attribute content in a DIV panel with the ID, attributeDIV.

Procedure

The InfoWindow and AttributeInspector widgets must be used alternately. To begin, the initial setInfoWindowOnClick() function must be modified by changing the value to either true or false. In this case, it must be set to false. This action disables the main pop-up window for the web application, and the Editor widget is automatically enabled. This information is returned by the AttributeInspector widget using a side panel. The code snippet below demonstrates how the script looks when the Editor widget is enabled:

map.setInfoWindowOnClick(false);

Note:
In general, the map.setInfoWindowOnClick() method in a specified widget function must be set to true to enable the widget to work properly. Setting the value to false is rare.

1. Set the map.setInfoWindowOnClick() method to false to display the info window content.

map.setInfoWindowOnClick(false);

2. Create feature layers. For more information on creating feature layers, refer to ArcGIS API for JavaScript: FeatureLayer under the Creating a FeatureLayer segment. The code sample below is used to create the feature layers.

var operationsPointLayer = new FeatureLayer("https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/HSEC/FeatureServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: template,
                    outFields: ["*"]
                });

                var operationsLineLayer = new FeatureLayer("https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/HSEC/FeatureServer/1", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: template,
                    outFields: ["*"]
                });

                var operationsPolygonLayer = new FeatureLayer("https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/HSEC/FeatureServer/3", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: template,
                    outFields: ["*"]
                });

3. Add the feature layers to the map using the map.addLayer() function. The following is a sample code snippet used to add the layers:

map.addLayer(operationsPointLayer);
map.addLayer(operationsLineLayer);
map.addLayer(operationsPolygonLayer);

4. Retrieve the attribute information from the event specified to display the attribute, and add the layer information. Below is the code snippet:

map.on("layer-add-result", function(evt) {
	switch (evt.layer.name) {
        	case "HSEC Pipeline Status":
                	featureLayerInfos.push({
                		"featureLayer": evt.layer
                	});
                	break;
                case "HSEC Area Status":
                	featureLayerInfos.push({
                        	"featureLayer": evt.layer
                        });
                        break;
                case "HSEC Point Status":
                        featureLayerInfos.push({
                                "featureLayer": evt.layer
                        });
                        break;
                    }
});

5. Enable the button function to simplify the process of alternating between the InfoWindow function and the Editor widget. Create an event handler to enable the InfoWindow function when edits are complete. To activate the InfoWindow function after an edit is completed, destroy the Editor widget, and set the map.setInfoWindowOnClick() as true. The following code is used to enable the button function and destroy the Editor widget.

dom.byId("getContentBtn").disabled = false;

on(dom.byId("getContentBtn"), "click", getContentBtn);

function getContentBtn() {
	dom.byId("featureCount").style.visibility = "visible";
        if (editorWidget != null) {
        	//Destroy editor widget if it already exists.
        	editorWidget.destroy();
         }
        map.setInfoWindowOnClick(true);
        map.on("click", function(evt) {
        	//hide infowindow on map click because info window content is displayed in the left panel
                map.infoWindow.hide();
                });
        initializeSidebar(map);
}

Note:
The Editor widget cannot be activated if an InfoWindow function is active and the attribute is displayed on a side panel. 

6. Populate the side panel with the information retrieved from the info window using the following code:

function initializeSidebar(map) {
	var popup = map.infoWindow;

	//when the selection changes update the side panel to display the popup info for the currently selected feature
        connect.connect(popup, "onSelectionChange", function() {
        displayPopupContent(popup.getSelectedFeature());
        });

	//when the selection is cleared remove the popup content from the side panel. 
        connect.connect(popup, "onClearFeatures", function() {
        //dom.byId replaces dojo.byId
        dom.byId("featureCount").innerHTML = "Click to select feature(s)";
        //registry.byId replaces dijit.byId
        registry.byId("leftPane").set("content", "");
        domUtils.hide(dom.byId("pager"));
        });

        //When features are associated with the map's info window update the sidebar with the new content.                     connect.connect(popup, "onSetFeatures", function() {
        displayPopupContent(popup.getSelectedFeature());
        dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";

        //enable navigation if more than one feature is selected 
        popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
});

7. Create a click event to activate the Editor widget and set the map.setInfoWindowOnClick() to false. The following code sample is used to start editing.

//code to handle click event on button
on(dom.byId("editingBtn"), "click", startEditing);

//start editing
function startEditing() {
 	map.setInfoWindowOnClick(false);
        map.graphics.clear();
        registry.byId("leftPane").set("content", "");
        domUtils.hide(dom.byId("pager"));
        dom.byId("featureCount").innerHTML = "";
        if (featureLayerInfos.length < 1) {
        	alert("No layers to edit.");
                return;
        }

        attributeInspector = new AttributeInspector({
        	layerInfos: featureLayerInfos
        }, "attributeDiv");

        var settings = {
        	map: map,
                layerInfos: featureLayerInfos,
                attributeInspector: attributeInspector
        };

        var params = {
        	settings: settings
        };

        editorWidget = new Editor(params, 'editorDiv');
        editorWidget.startup();
        registry.byId("leftPane").set("content", attributeInspector.domNode);
        //snapping defaults to Cmd key in Mac & Ctrl in PC.
        //specify "snapKey" option only if you want a different key combination for snapping
                    map.enableSnapping();
                    dom.byId("getContentBtn").disabled = false; //enable popup button
                    dom.byId("editingBtn").disabled = true; //disable editing button
      }
});

Note:
Click here to download a full working HTML file. The code sample in the HTML file shows the full code with the Show pop up content button available on top of the side panel. The script also provides the Start editing button for users to edit the attributes of the selected feature available on the web map.