Close button for widgets

[LefterisKoumis]

THe widgets from JS API 4.x (Layerlist, Bookmarks...) are shown with no close button. Some of them are using the Expand widget to minimize them. If the widget is posted on a toolbar, there is no way to close them.

I created a close button for a custom widget, but for a widget template from the API library how to insert a close button? CSS?

[JeffreyWilkerson]

In one of Esri's Editor widget examples (Editor popup edit action ), they show how you can get access to the widget's dom node and make changes:

let arrComp = editorNode.getElementsByClassName("esri-editor__back-button esri-interactive");
                       
if (arrComp.length === 1) {
    // Add a tooltip for the back button
    arrComp[0].setAttribute("title", "Cancel edits, return to popup");
    // Add a listerner to listen for when the editor's back button is clicked
    arrComp[0].addEventListener('click', function (evt) {...

or

// Remove 'Delete' button from bottom of Editor widget
let btnDelete = editorNode.getElementsByClassName("esri-editor__control-button esri-button esri-button--tertiary");
if (btnDelete.length === 1) { btnDelete[0].style.display = "none"; }

Maybe you can access a node in the particular widget you are interested in and then attach your close button through the Dom.

[SyNguyen]

Hi, I'm using The widgets from JS API 4.23 but it can not get element of the button,

even it use in setTimeout with 3 seconds...

[JeffreyWilkerson]

I'm guessing the Editor widget hasn't completed loading yet.  Look at this response I just gave about attaching to the ListView 3 ellipse button.  If you look at the last entry, in the code example I attach to the widget in the same fashion, but I had to put it in a 'when' event check to make sure it was fully loaded before checking for the classname.

https://community.esri.com/t5/arcgis-api-for-javascript-questions/listitem-ellipsis-expanded-event/t... 

[SyNguyen]

Thank you Jeffey for reply!

I don't  know how to put the Editor in a 'when'. But i try to set time out in 10 second and it still can not get element of the button. I run test in sandbox with popup-editaction sample.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=popup-editaction

My test code in funtion editThis:

setTimeout(() => {
              // Use the editor's back button as a way to cancel out of editing
              let arrComp = editor.domNode.getElementsByClassName(
                "esri-editor__back-button esri-interactive"
              );
              alert(arrComp.length);
              if (arrComp.length === 1) {
                // Add a tooltip for the back button
                arrComp[0].setAttribute(
                  "title",
                  "Cancel edits, return to popup"
                );
                // Add a listener to listen for when the editor's back button is clicked
                arrComp[0].addEventListener("click", (evt) => {
                  alert("back");
                  // Prevent the default behavior for the back button and instead remove the editor and reopen the popup
                  evt.preventDefault();
                  view.ui.remove(editor);
                  view.popup.open({
                    features: features
                  });
                });
              }
            }, 10000);

[JeffreyWilkerson]

SyNguyen,

Not sure if you are trying to use this sample directly or not, but at 4.23 Esri has modified the Editor widget to be driven by Calcite theming instead of the CSS they had before. That makes the 'esri-editor__back-button esri-interactive' classes that this sample relied on non-existent. I have opened a ticket with this with Esri but so far nothing's been done about it.  Since I have an application that relies on this as well, I am hoping that Esri can come up with a solution that can pull out the section of the Editor Widget to tie this button change to, otherwise I'm going to have to stay on pre 4.23 versions (and never get the benefit of a Date popup calendar) or write my own.

If you are trying to use a previous version and still having difficulty then let me know and I can try to help.

[SyNguyen]

Thank you JeffreyWilkerson very much,

I downgrade to 4.22 version and it's work

[greatathrun]

it is the fault of shadowRoot！the querySelector can not find the element which under the shadowRoot !

you need to find the parentDom of the shadowRoot first!

  let arrComp = this.Editor.domNode.getElementsByTagName('calcite-panel')[1].shadowRoot.querySelector(".back-button")