topic Re: Inserting button after field in AttributeInspector in ArcGIS JavaScript Maps SDK Questions

Inserting button after field in AttributeInspector

SteveCole — Sat, 11 Dec 2021 07:23:52 GMT

The subject line is pretty self explanatory. I'm having trouble doing it, though. I'm using this sample as a guideline.

I have a text field which represents a file path and I want to insert a button next to the field which then fires off the folder browser from the HTML5 File API. I've placed the attribute inspector inside a hidden div which gets displayed if a user control clicks on a feature in the map. Anyways, my "Cancel" button shows up fine but the code chokes (no error in the console) when it comes to inserting my simple button after the relevant text field:

            app.attInspector = new AttributeInspector({
              layerInfos: layerInfos
            }, 'prjDetailEditor');

            var cancelButton = new Button({ label: "Cancel", "class": "cancelButton"},domConstruct.create("div"));
            domConstruct.place(cancelButton.domNode, app.attInspector.deleteBtn.domNode, "after");

            var photoPathButton = new Button({ label: "Photo Path", "class": "openFolderIcon", showLabel: false},domConstruct.create("div"));
            var photoPathField = dijit.byId('dijit_form_TextBox_6');
            domConstruct.place(photoPathButton.domNode, photoPathField.domNode, "after");

If I set a breakpoint on the last line (domConstruct..), photoPathButton exists but photoPathField is undefined. Is there a method associated with the AttributeInspector such that I can search for and get a reference to my particular text field?

Thanks,

Steve

Re: Inserting button after field in AttributeInspector

SteveCole — Tue, 15 Dec 2015 19:25:23 GMT

UPDATE:

So the issue is partially one of timing. At page load, the text field dijit I'm referring to simply doesn't exist. Only when the attribute inspector is being shown and has a feature will the dijit exist. I'm now trying to hook into one of the undocumented events (onStart) but it's ignoring the code..

Re: Inserting button after field in AttributeInspector

SteveCole — Sat, 11 Dec 2021 07:23:55 GMT

Ok, found a solution. I don't know if this creates issues further down the road but...

The Attribute Inspector does have an onShow event but anything inside is ignored. You have to hook into the event that occurs when the attribute inspector receives a feature so I ended up with using the featureLayer onClick event like this:

        repairLayer.on("click", function(evt) {
            if(evt.ctrlKey) {
                // Only display the attribute inspector if the user clicks and holds down the Control key. Otherwise,
                // just show the standard infoWindow
                dojo.stopEvent(evt); //Prevent the infoWindow from displaying
                domStyle.set('leftPanel','display','inline');


                var qFeature = new Query();
                qFeature.objectIds = [Number(evt.graphic.attributes.OBJECTID)];
                qFeature.outFields = ["*"];
                qFeature.returnGeometry = false;
                repairLayer.selectFeatures(qFeature, FeatureLayer.SELECTION_NEW, function(features) {
                    if(features.length > 0) {
                        updateFeature = features[0];
                        if (!dijit.byId('btnPhotoFolder')) {
                            //Make sure the button doesn't already exist..
                            var photoPathButton = new Button({label: " ", "iconClass": "openFolderIcon", id: "btnPhotoFolder", showLabel: false},domConstruct.create("div"));
                            photoPathButton.onClick = function() {document.getElementById('dirPhotoFolder').click();};
                           
                            var photoPathField = dijit.byId('dijit_form_TextBox_6');
                            domConstruct.place(photoPathButton.domNode, photoPathField.domNode, "after");
                        }
                    }
                });
               
                app.map.resize();
                app.map.reposition();
            }
        });

I'm only using the attribute layer with one, specific layer so I can safely assume some consistency with respect to the name of the dijit I want my button to appear next to. If you had multiple layers tied to your attribute inspector, you'd have some more work with respect to finding where to insert your button.