Can't disable "Add feature" button in Editor widget

[BrentGrossman]

In my code (using API version 4.18), I'm using a WebScene and WebMap (toggling between 2d and 3d is supported) with many layers. I'd like for users to be able to edit, but not add to, features in one particular feature layer. However, I can't seem to be able to disable the "Add feature" button using addEnabled. Here's my code:

        window.locatesFeatureLayer = new this.FeatureLayer({
            url:
                "url to the feature layer in our portal"
        });

        editor = new this.Editor({
                view: view,
                container: editorContainer,
                layerInfos: [{
                    layer: window.locatesFeatureLayer,
                    addEnabled: false
                }]
       });
       editor.addEnabled = false; (//tried to set addEnabled here, too, but 
                                           no luck

Here's what the Editor widget looks like when I run my code (it's in an Expand widget, as you can see):

Even if I can disable "Add feature", that's not ideal, since the button is still visible in that case. What I'd really like is to hide or remove that button altogether. 

My questions are,

1. Why am I not able to disable the "Add feature" button?
2. Is it possible to hide that button, in addition, or instead of, disabling it?
3. If the above isn't possible, can I maybe make the Editor window small enough to only show "Edit feature", but then expand that window when the form for editing is visible (after the user has selected a feature to edit)?
4. If none of the above is possible, can I implement my own editor widget, and if so, what available advice, direction, sample code, etc. is there for doing so?

[RickeyFight]

@BrentGrossman 

You can hide the button using css. But that would be fore all layers. 

One other way would be to disable creating features on the service. 

[BrentGrossman]

Thanks very much. I think hiding the button would be fine--I don't need it for any layers. I looked at Editor.scss and didn't find references to the add and edit buttons. Can you give me more information about how I'd go about hiding the add button?

[RickeyFight]

@BrentGrossman 

I added to the element  visibility: hidden; 

[BrentGrossman]

Thanks. Pardon me if I'm being obtuse. It looks as if you edited the source for the Editor example at https://developers.arcgis.com/javascript/latest/sample-code/widgets-editor-configurable/live/, but I don't know how to relate that to my own code.

I'd expect I'd have some sort of CSS entry that begins with .esri-editor__feature-list-item. I did find some CSS that uses "[role=button]" and ":first-child", so I may be able to figure this out. Sorry if this is CSS 101, but it's not familiar to me.

[BrentGrossman]

I tried this:

.esri-editor__feature-list-item[role="button"][tabindex="0"] {
  visibility: hidden;
}

but it hid both buttons :(.

[BrentGrossman]

@RickeyFight , this seems to work (though maybe there's a better way?):

.esri-editor__feature-list-item[role="button"]:nth-of-type(2) {
  visibility: hidden;
}

Thanks much for your help!

[Kishore · Accepted solution]

Hi Brent,

I am not sure this will help your workflow. However, you can refer to the Editor widget API for disabling the actions by specifying the Allowed workflows:

const editor = new Editor({
  view: view,
  allowedWorkflows: ["update"] // allows only updates and no adds
});

Please refer to the link: esri-widgets-Editor.html activeWorkflow 

Thank you.

[ArnoFiva]

As @Kishore already pointed out, using Editor.allowedWorkflows is the supported and recommended way to toggle which workflows are supported.

You can also tweak this on a per-layer basis using Editor.layerInfos :

const editor = new Editor({
  /* ... */
  layerInfos: [{
    layer: featureLayer,
    enabled: true, // default is true, set to false to disable editing functionality
    addEnabled: true, // default is true, set to false to disable the ability to add a new feature
    updateEnabled: false // default is true, set to false to disable the ability to edit an existing feature
    deleteEnabled: false // default is true, set to false to disable the ability to delete features
  }]
});

Hope this helps and makes your other Editor related questions obsolete @BrentGrossman, otherwise feel free to reach out again!

[BrentGrossman]

Thanks, @Kishore. Your solution works for me and seems like a more straightforward way to set the allowed actions than modifying the CSS. I did not notice allowedWorkflows when I originally looked at the Editor documentation, though it's one of the first listed properties.

@ArnoFiva's alternative of using layerInfos is something I'd already tried (see the code in my original post) without success. 

I didn't accept Kishore's answer as the solution. Apparently here, unlike, for example, Stack Overflow, it's not only the original poster who can accept a solution. Anyway, thanks again.