Eliminate the upper toolbar of InfoWindow

4684
8
Jump to solution
02-01-2015 12:06 PM
MiriEshel
New Contributor III

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 +
          "<br/>" + "(" + this.nls.pressStr + "<b>" +
          this.nls.ctrlStr + "</b> " + this.nls.snapStr + ")";
        this._defaultAddPointStr = esriBundle.toolbars.draw.addPoint;
        esriBundle.toolbars.draw.addPoint = esriBundle.toolbars.draw.addPoint +
          "<br/>" + "(" + this.nls.pressStr + "<b>" +
          this.nls.ctrlStr + "</b> " + 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;

        var params = {
          settings: settings
        };
        if (!this.editDiv) {
          this.editDiv = html.create("div", {
            style: {
              width: "100%",
              height: "100%"
            }
          });
          html.place(this.editDiv, this.domNode);
        }
      

        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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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);
      },

View solution in original post

0 Kudos
8 Replies
RobertScheitlin__GISP
MVP Emeritus

Miri,

  You could simply hide the buttons in the css:

      .esriPopup .titleButton.close,
      .esriPopup .titleButton.maximize{
        display: none;
      }
0 Kudos
MiriEshel
New Contributor III

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

0 Kudos
MiriEshel
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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);
      },
0 Kudos
MiriEshel
New Contributor III

Hi Robert,

Thank you. I will check it.

Is this the way to cause the infoWindow to open always on the lest side of the map? That's what the client wants....

Thanks again,

Miri

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Miri,

   My last post was to answer your original question with your added concern.

0 Kudos
MiriEshel
New Contributor III

Hi Robert,

It works great. Thanks.

Miri

0 Kudos
abhimanyugupta
New Contributor

i need to add button in toolbar do you have any solution

0 Kudos