Slice Tool custom widget

[MichaelLev]

I need to adapt slice tool widget 

BuildingSceneLayer with Slice widget | ArcGIS API for JavaScript 4.16 

in order to have slice tool custom widget within ArcGIS Web AppBuilder (Developer Edition) 2.16

However, thogh the excample app works,

yet when I look at the console, the above link displays some error message. Screenshot attached.

[RobertScheitlin__GISP · Accepted solution]

Change the URL of ArcGIS API for JavaScript—ArcGIS Web AppBuilder (Developer Edition) | ArcGIS for D... 

[MichaelLev]

Dear Robert,

Thank you!

I've succeeded to activate my in-panel custom widget (which is based on API 4.16) by learning from your zip of screenshot and from more widgets, and to to solve most my bugs, and I'm continuing debugging.

Michael

[MichaelLev]

Dear Robert,

I'm debugging my slice custom widget and it works, however I have questions concerning the UI code needed for displaying the LayersList:

In esri example

BuildingSceneLayer with Slice widget | ArcGIS API for JavaScript 4.16 

There is the paragraph to display the layers list at top-left

      // Add a layer list widget
      const layerList = new LayerList({
            view: view
      });
      view.ui.empty("top-left");
      view.ui.add(layerList, "top-left");

Since the slice widget popup itself is displayed at top-left, I want to display the layers list at bottom-right, so I write (in the widget.js)
      this.sceneView.ui.empty("bottom-right");
      this.sceneView.ui.add(this.layerList, "bottom-right");

but the whole this.sceneView.ui is hidden since class esri-ui-corner-container is hidden which is the father of the 4 corners. and top-left corner is not empty.

My questions:

1. How should I handle correctly the display of the layers list?

    Below are the 4 lines I did, but maybe there is a cleaner and nicer way?:

              this.sceneView.ui.empty("bottom-right");
              this.sceneView.ui.add(this.layerList, "bottom-right");
              document.getElementsByClassName("esri-ui-corner-container")[0].style.display = "block";
              document.getElementsByClassName("esri-ui-top-left")[0].style.display = "none";

     And I don't know yet why top-left of esri-ui-corner-container is not empty already but has some widgets in it?

2. Could I (how?) display the layerslist in a popup that the user can drag upon the screen (or even minimize and maximize?)

I'll appreciate your help

[RobertScheitlin__GISP]

Michael,

   You need to try and understand the differences and similarities between the API samples and WAB.

1. Widgets. WAB has widgets and JS API has widgets. The JS API uses the view.ui to place widgets whereas WAB uses it's own internal method.

WAB already has a LayerList widget developed so just ignore that portion of the same and use the WAB LayerList widget.

[MichaelLev]

Dear Robert, Thank you!

As usual, your help is very effective and helpful -

         I succeeded to open LayerList widget from within my slice custom widget

         by learning from WAB example stemapp/widgets/samplewidgets/WidgetCommunication - THANK YOU!

note:  In order to have LayerList widget work under API 4.16 I had to remove 'dojo/i18n!esri/nls/common'

          from define and apiNlsBundle from function arguments. It works.

          I see t's not needed in 4.16, though I'd like to know what it is? and why it's not needed anymore in 4.16 ?

Michael