topic Re: Close button for widgets in ArcGIS JavaScript Maps SDK Questions

Close button for widgets

LefterisKoumis — Thu, 07 Oct 2021 15:06:00 GMT

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?

Re: Close button for widgets

JeffreyWilkerson — Thu, 07 Oct 2021 15:49:15 GMT

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.

Re: Close button for widgets

SyNguyen — Thu, 31 Mar 2022 10:04:37 GMT

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...

Re: Close button for widgets

JeffreyWilkerson — Thu, 31 Mar 2022 15:36:23 GMT

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/td-p/1157249

Re: Close button for widgets

SyNguyen — Wed, 20 Apr 2022 09:42:24 GMT

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

Re: Close button for widgets

JeffreyWilkerson — Wed, 20 Apr 2022 18:11:30 GMT

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.

Re: Close button for widgets

SyNguyen — Thu, 21 Apr 2022 01:31:35 GMT

Thank you JeffreyWilkerson very much,

I downgrade to 4.22 version and it's work

Re: Close button for widgets

greatathrun — Fri, 19 Aug 2022 09:47:15 GMT

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")