Customize InfoWindow generated by Editor Widget when loading map from ArcGIS online

[tonylife]

Is it possible to remove the DELETE button on InfoWindow when using Editor Widget?
Further, can I customize the InfoWindow and add a new button there?

I am createMap using webmap from ArcGIS online. From my understanding, the InfoWindow for the feature is generated automatically by Editor Widget. I looked into Editor Widget API but haven't found out a way to customize the InfoWindow yet.

Any suggestion?

Thanks,
Tony

[DanielWalton]

You can hide the delete button easily with CSS:

.esriAttributeInspector .atiButtons .atiDeleteButton {    display: none;
}

As for creating a button, you will need to do that in javascript:

var saveButton = new dijit.form.Button({ label: 'Save', 'class': 'atiSaveButton' });
dojo.dom-construct.place(saveButton.domNode, attributeInspector.deleteBtn.domNode, "after");

[tonylife]

Hi danwallie

Thank you for your reply!

For your solution to hide delete button using CSS, it would always hide the button application wide.
Is there a solution to hide the button based on feature layers?

For your solution to manipulate dom to add new button node, I tried following code:

        var saveButton = new dijit.form.Button({ label: 'Save' });
        dojo.place(saveButton.domNode, dojo.query(".atiDeleteButton"), "after");

dojo.query(".atiDeleteButton") does return the right domNode, and the code does executed without error.
However, the new save button is not either show up on UI or put into DOM.

Any comment would be appreciated!

Tony

You can hide the delete button easily with CSS:

.esriAttributeInspector .atiButtons .atiDeleteButton {    display: none;
}

As for creating a button, you will need to do that in javascript:

var saveButton = new dijit.form.Button({ label: 'Save', 'class': 'atiSaveButton' });
dojo.dom-construct.place(saveButton.domNode, attributeInspector.deleteBtn.domNode, "after");

[CharmaleeSandanayake]

I also am having trouble adding buttons to the editor widget infowindow. The best I could do was add a button by following this sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/ed_attribute_inspector.html

However this sample uses the attribute inspector without the editor widget. If you figure out how to add the button while using the editor widget, please post your code.

Thanks!

[tonylife]

I also am having trouble adding buttons to the editor widget infowindow. The best I could do was add a button by following this sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/ed_attribute_inspector.html

However this sample uses the attribute inspector without the editor widget. If you figure out how to add the button while using the editor widget, please post your code.

Thanks!

Actually, from my understanding, editor widget does call attribute inspector internally.
The way I figured out, to change the infoWindow, is manipulate dom using javascript directly.
I haven't tried input button yet, but following code to create a link on infowindow does work.

    if (dojo.byId("MyLink") == undefined) {
        dojo.create("a", {
            "id": "MyLink",
            "class": "action",
            "innerHTML": "MyLink",
            "onclick": "MyLinkAction();return false;"
        }, dojo.query(".actionList", map.infoWindow.domNode)[0]);
    }

The key is, since only one infowindow is allowed on map at a time, we can use map.infoWindow.domNode to access the DOM.
Then the content of infowindow is under our control.

Thanks,
Tony

[MayurPatel]

Hi,
You can hide delete button of Attribute Inspector and also you can have control on the fields of Attribute Inspector.

You just need to add the below following code in your editing function:

var layerInfos = [];
layerInfos = [
{
'featureLayer': xyz, //your featureserver layer
'isEditable': false,
'showDeleteButton':true,  // in your case, it will be false
'fieldInfos': [
{'fieldName':'OBJECTID', 'isEditable':true ,'label':'Object ID'},
{'fieldName':'', 'isEditable':true ,'label':''}
]
},
{
'featureLayer': ,
'isEditable': false,
'showDeleteButton':true,
'fieldInfos': [
{'fieldName':'OBJECTID', 'isEditable':true ,'label':'Object ID'},
{'fieldName':'', 'isEditable':true ,'label':''}
]
}
];

var settings = {

     layerInfos : layerInfos  

};

Thanks,
Mayur Patel

[MayurPatel]

And you can also create a new Button in your Attribute Inspector

var myEditor = new Editor(srcNode);

var attInspector = myEditor.attributeInspector;

var saveButton = new Button({label:"Save","class":"atiSaveButton"},domConstruct.create("div"));
domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "before");

The reason why I have created attInspector variable using myEditor.attributeInspector is we want "Save" button in our attributeInspector of Editor Widget.

Thanks.
Mayur Patel