From Sandbox example to widget to use in WAB?

[LokeSandblom]

Hi, I have a question regarding taking a sandbox example and make it into a widget to use from webappbuilder.

Example: Overview map | ArcGIS API for JavaScript 4.7 

I have read some of the guides regarding custom widgets, such as:

Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer... 

Create a controller widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

Create a custom widget | ArcGIS API for JavaScript 4.7 

My problem I have at the moment is that I am a bit unsure what from the sandbox to include and what to not include, and how to implement it in the custom widget files.

For example, the Overview map. Since I want to deploy it as a widget, for a webscene that already have a map, do I still have to specify such things in the widget code(as it is in the sandbox example)?

To end it all, is there any guide on how to "convert" from sandbox example to a widget? (I Have tried googling, but no luck so far).

Thanks for reading this, and hopefully I made my intentions clear, if not, just point at what you want clearified.

Cheers!

[RobertScheitlin__GISP]

Loke,

   You should dis-regrade your fourth link above as you need to develop WAB specific apps not JS API Native widget. Another link to look at is 

3D development guide—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers 

In this link it will tell you that you have access to this.sceneView for your link to the apps scene. 

There is no guide to converting a sample to a widget. But the steps are fairly easy for a developer.

The main part you will need to add to your widgets startup function is this part:

      // Create the MapView for overview map
      var mapView = new MapView({
        container: "overviewDiv",
        map: overviewMap,
        constraints: {
          rotationEnabled: false
        }
      });

      // Remove the default widgets
      mapView.ui.components = [];

      var extentDiv = dom.byId("extentDiv");

      mapView.when(lang.hitch(this, function() {
        // Update the overview extent whenever the MapView or SceneView extent changes
        this.sceneView.watch("extent", updateOverviewExtent);
        mapView.watch("extent", updateOverviewExtent);

        // Update the minimap overview when the main view becomes stationary
        watchUtils.when(this.sceneView, "stationary", updateOverview);

        function updateOverview() {
          // Animate the MapView to a zoomed-out scale so we get a nice overview.
          // We use the "progress" callback of the goTo promise to update
          // the overview extent while animating
          mapView.goTo({
            center: this.sceneView.center,
            scale: mainView.scale * 2 * Math.max(this.sceneView.width /
              mapView.width,
              this.sceneView.height / mapView.height)
          });
        }

        function updateOverviewExtent() {
          // Update the overview extent by converting the SceneView extent to the
          // MapView screen coordinates and updating the extentDiv position.
          var extent = mainView.extent;

          var bottomLeft = mapView.toScreen(extent.xmin, extent.ymin);
          var topRight = mapView.toScreen(extent.xmax, extent.ymax);

          extentDiv.style.top = topRight.y + "px";
          extentDiv.style.left = bottomLeft.x + "px";

          extentDiv.style.height = (bottomLeft.y - topRight.y) + "px";
          extentDiv.style.width = (topRight.x - bottomLeft.x) + "px";
        }
      }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You will notice I have replaced all mainView variables with this.sceneView and I have added lang.hitch to maintain the scope of the function.

You will have to have these classes in your define array:

      "esri/Map",
      "esri/views/MapView",
      "esri/core/watchUtils",
      "dojo/dom",‍‍‍‍
      "dojo/_base/lang"‍‍‍‍‍

 One of the best thing you as a developer can do is look at the source code from the OTB 3D widget to get coding examples.

[LokeSandblom]

Hi,

Thank you for this. I will need to play around with it a bit to see if I understand everything correctly.

I will let you know if I run into any more toubles or if it works.