nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Eliminate the upper toolbar of InfoWindow

MiriEshel

Hi,

I'm trying to eliminate the upper toolbar of infoWindow that contains maximize and close buttons.

I want to do it because I use Editor.AttributeInspector and I want the user to use either the OK button or Delete Button.

I don't want the user to click on the close

Here is the code I wrote:

initEditor: function() {
 this._defaultStartStr = esriBundle.toolbars.draw.start;
 esriBundle.toolbars.draw.start = esriBundle.toolbars.draw.start +
 " " + "(" + this.nls.pressStr + "" +
 this.nls.ctrlStr + " " + this.nls.snapStr + ")";
 this._defaultAddPointStr = esriBundle.toolbars.draw.addPoint;
 esriBundle.toolbars.draw.addPoint = esriBundle.toolbars.draw.addPoint +
 " " + "(" + this.nls.pressStr + "" +
 this.nls.ctrlStr + " " + this.nls.snapStr + ")";
 var json = this.config.editor;
 var settings = {};
 for (var attr in json) {
 settings[attr] = json[attr];
 }
 settings.layerInfos = this.layers;
 settings.map = this.map;

        this.editor = new Editor(params, this.editDiv);
        this.editor.startup();
        var feature;

        var attInspector = this.editor.attributeInspector;
        var theMap = this.editor.settings.map;
       theMap.infoWindow._sizers[0].height = 0;
var saveButton = new dijit.form.Button({label:"OK","class":"saveButton"});
        dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "before");

saveButton.on("click", function() {
if (feature == null)
   alert("Please enter values");
else {
   if (feature.attributes["name"] != null) {
    feature.attributes["date1"] = Date.now();
    theMap.infoWindow.hide();
   } else {
      alert("Name is a required field");
   }
}
});

attInspector.on("attribute-change", function(evt) {
   feature = evt.feature;
   });

theMap.infoWindow.resize(350, 700);
this.resize();
},

Thanks a lot,

Miri

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Miri,

OK that can be handled then.

In the client\stemapp\widgets\Edit\widget.js

Make these changes:

add these vars to the widget

      _onshowinfowin: null,
      _mapInfoWin: null,

Change the Open function to this:

      onOpen: function() {
        this.layers = [];
        this.disableWebMapPopup();
        this.getLayers();
        this.initEditor();
        this._onshowinfowin = on(this.map.infoWindow, "show", this.showInfoWin);
      },

Add this new function

      showInfoWin: function(evt){
        this._mapInfoWin = this.target;
        if(html.hasClass(evt.target._contentPane.firstChild,'esriAttributeInspector')){
          query(".titleButton.close", this.target).style('display', 'none');
          query(".titleButton.maximize", this.target).style('display', 'none');
        }else{
          query(".titleButton.close", this.target).style('display', null);
          query(".titleButton.maximize", this.target).style('display', null);
        }
      },

Change the close function to this:

      onClose: function() {
        this.enableWebMapPopup();
        if (this.editor) {
          this.editor.destroy();
        }
        this.layers = [];
        this.editor = null;
        this.editDiv = html.create("div", {
          style: {
            width: "100%",
            height: "100%"
          }
        });
        html.place(this.editDiv, this.domNode);
        esriBundle.toolbars.draw.start = this._defaultStartStr;
        esriBundle.toolbars.draw.addPoint = this._defaultAddPointStr;
        this._onshowinfowin.remove();
        query(".titleButton.close", this._mapInfoWin).style('display', null);
        query(".titleButton.maximize", this._mapInfoWin).style('display', null);
      },

All comments

RobertScheitlin__GISP

Miri,

You could simply hide the buttons in the css:

      .esriPopup .titleButton.close,
      .esriPopup .titleButton.maximize{
        display: none;
      }

MiriEshel

Hi Robert,

Thanks. Changing the CSS is a good idea and works wonderful.

One more question if I may.....

I take the basic ed_simpletoolbar.html from the sample code and change its attributeInspector. I want to add a button but also limit the number of fields displayed. I'm doing it by adding the lines:

myEditor.startup();

var attInspector = myEditor.attributeInspector;

var saveButton = new dijit.form.Button({label:"שלח","class":"saveButton"});

dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "before");

var layerInfos = [

{

'featureLayer': attInspector.layerInfos[0].featureLayer, //waterBodies

'showAttachments': true,

'showDeleteButton': true,

'isEditable': true,

'fieldInfos': [

{'fieldName': 'Elevation', 'isEditable': true, 'tooltip': 'Elev'},

{'fieldName': 'Reach Code', 'isEditable': true, 'tooltip': 'Code'}

]

}

];

attInspector.layerInfos = layerInfos;

myEditor.attInspector = attInspector;

When I put a breakpoint, I see that it behave like I expected but when the infoWindow opens, it shows all the fields.

Why? What do I do wrong?

Thanks,

Miri

MiriEshel

Hi Robert,

The problem of hiding the buttons in the CSS is that it hides them also for Identify windows, not only the Editor staff and this is not what I want....

I prefer to eliminate them only when the Editor is running.

Thanks a lot,

miri

RobertScheitlin__GISP

Miri,

OK that can be handled then.

In the client\stemapp\widgets\Edit\widget.js

Make these changes:

add these vars to the widget

      _onshowinfowin: null,
      _mapInfoWin: null,

Change the Open function to this:

      onOpen: function() {
        this.layers = [];
        this.disableWebMapPopup();
        this.getLayers();
        this.initEditor();
        this._onshowinfowin = on(this.map.infoWindow, "show", this.showInfoWin);
      },

Add this new function

      showInfoWin: function(evt){
        this._mapInfoWin = this.target;
        if(html.hasClass(evt.target._contentPane.firstChild,'esriAttributeInspector')){
          query(".titleButton.close", this.target).style('display', 'none');
          query(".titleButton.maximize", this.target).style('display', 'none');
        }else{
          query(".titleButton.close", this.target).style('display', null);
          query(".titleButton.maximize", this.target).style('display', null);
        }
      },

Change the close function to this:

      onClose: function() {
        this.enableWebMapPopup();
        if (this.editor) {
          this.editor.destroy();
        }
        this.layers = [];
        this.editor = null;
        this.editDiv = html.create("div", {
          style: {
            width: "100%",
            height: "100%"
          }
        });
        html.place(this.editDiv, this.domNode);
        esriBundle.toolbars.draw.start = this._defaultStartStr;
        esriBundle.toolbars.draw.addPoint = this._defaultAddPointStr;
        this._onshowinfowin.remove();
        query(".titleButton.close", this._mapInfoWin).style('display', null);
        query(".titleButton.maximize", this._mapInfoWin).style('display', null);
      },

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.