topic Re: I try to make custom wab widget for my app, can help me someone in Web AppBuilder Custom Widgets Questions

I try to make custom wab widget for my app, can help me someone

JasminGeko — Sun, 12 Dec 2021 08:55:22 GMT

Hi all,

like a say, I try to make custom wab widget for my app, can help me someone. I have ArcGIS API for JavaScript Sandbox code and need code for WAB..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>CoordinateConversion widget - Custom Formats - 4.14</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <script src="https://js.arcgis.com/4.14/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/widgets/CoordinateConversion",
        "esri/widgets/CoordinateConversion/support/Format",
        "esri/widgets/CoordinateConversion/support/Conversion",
        "esri/geometry/Point",
        "esri/geometry/support/webMercatorUtils",
        "esri/geometry/SpatialReference"
      ], function(
        Map,
        SceneView,
        CoordinateConversion,
        Format,
        Conversion,
        Point,
        webMercatorUtils,
        SpatialReference
      ) {
        var map = new Map({
          basemap: "hybrid",
          ground: "world-elevation"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          // Clip the view to the extent covered by
          // by NAD 1983 HARN StatePlane California I
          clippingArea: {
            xmin: -124.45,
            xmax: -119.99,
            ymax: 43.01,
            ymin: 39.59
          },
          center: {
            x: -122.22,
            y: 41.3
          },
          zoom: 10,
          viewingMode: "local"
        });

        view.when(function(view) {
          view.goTo({ tilt: 45 });
        });

        var ccWidget = new CoordinateConversion({
          view: view
        });

        view.ui.add(ccWidget, "top-right");

        // Regular expression to find a number
        var numberSearchPattern = /-?\d+[\.]?\d*/;

        /**
         * Create a new Format called XYZ, which looks like: "<Latitude>, <Longitude>, <Z>"
         *
         * We need to define a convert function, a reverse convert function,
         * and some formatting information.
         */
        var newFormat = new Format({
          // The format's name should be unique with respect to other formats used by the widget
          name: "XYZ",
          conversionInfo: {
            // Define a convert function
            // Point -> Position
            convert: function(point) {
              var returnPoint = point.spatialReference.isWGS84
                ? point
                : webMercatorUtils.webMercatorToGeographic(point);
              var x = returnPoint.x.toFixed(4);
              var y = returnPoint.y.toFixed(4);
              var z = returnPoint.z.toFixed(4);
              return {
                location: returnPoint,
                coordinate: `${x}, ${y}, ${z}`
              };
            },
            // Define a reverse convert function
            // String -> Point
            reverseConvert: function(string) {
              var parts = string.split(",");
              return new Point({
                x: parseFloat(parts[0]),
                y: parseFloat(parts[1]),
                z: parseFloat(parts[2]),
                spatialReference: { wkid: 4326 }
              });
            }
          },
          // Define each segment of the coordinate
          coordinateSegments: [
            {
              alias: "X",
              description: "Longitude",
              searchPattern: numberSearchPattern
            },
            {
              alias: "Y",
              description: "Latitude",
              searchPattern: numberSearchPattern
            },
            {
              alias: "Z",
              description: "Elevation",
              searchPattern: numberSearchPattern
            }
          ],
          defaultPattern: "X°, Y°, Z"
        });

        // add our new format to the widget's dropdown
        ccWidget.formats.add(newFormat);

        /**
         * Create a new Format 'SPS I', which looks like: "<X>, <Y>" in the
         * California StatePlane Zone I Spatial Reference, described by wkid 102241
         *
         * For this Format, we only need to provide a spatialReference with the correct
         * wkid. The geometry service can take care of the rest.
         */
        var stateplaneCA = new Format({
          name: "SPS I",
          conversionInfo: {
            spatialReference: new SpatialReference({ wkid: 102241 }),
            reverseConvert: function(string, format) {
              var parts = string.split(",");
              return new Point({
                x: parseFloat(parts[0]),
                y: parseFloat(parts[1]),
                spatialReference: { wkid: 102241 }
              });
            }
          },
          coordinateSegments: [
            {
              alias: "X",
              description: "easting",
              searchPattern: numberSearchPattern
            },
            {
              alias: "Y",
              description: "northing",
              searchPattern: numberSearchPattern
            }
          ],
          defaultPattern: "X, Y"
        });

        // Add our new format to the widget's dropdown
        ccWidget.formats.add(stateplaneCA);

        // Add the two custom formats to the top of the widget's display
        ccWidget.conversions.splice(
          0,
          0,
          new Conversion({
            format: newFormat
          }),
          new Conversion({
            format: stateplaneCA
          })
        );
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: I try to make custom wab widget for my app, can help me someone

RickeyFight — Tue, 18 Feb 2020 14:55:25 GMT

Jasmin Geko‌

What do you want this widget to do?

Here is documentation how to build the widget yourself.

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

Re: I try to make custom wab widget for my app, can help me someone

JasminGeko — Sun, 12 Dec 2021 08:55:25 GMT

Ah sory, i copied vrong code

I make some changes on this demo and add custom WKID to show me a projected coordinate on widget. but i am not sure to right code on WAB widget. I am not sure where put this coed to make custom widget, on widget.js file and is the right syntax ect....

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>CoordinateConversion widget - Custom Formats - 4.14</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <script src="https://js.arcgis.com/4.14/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/CoordinateConversion",
        "esri/widgets/CoordinateConversion/support/Format",
        "esri/widgets/CoordinateConversion/support/Conversion",
        "esri/geometry/Point",
        "esri/geometry/support/webMercatorUtils",
        "esri/geometry/SpatialReference"
      ], function(
        Map,
        MapView,
        CoordinateConversion,
        Format,
        Conversion,
        Point,
        webMercatorUtils,
        SpatialReference
      ) {
        var map = new Map({
          basemap: "hybrid",
          ground: "world-elevation"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          // Clip the view to the extent covered by
          // by NAD 1983 HARN StatePlane California I
        
         center: {
            x: 17.72,
            y: 44.1
          },
         
          zoom: 8,
          viewingMode: "local"
        });

       

        var ccWidget = new CoordinateConversion({
          view: view
        });

        view.ui.add(ccWidget, "top-right");

        // Regular expression to find a number
        var numberSearchPattern = /-?\d+[\.]?\d*/;

        /**
         * Create a new Format called XYZ, which looks like: "<Latitude>, <Longitude>, <Z>"
         *
         * We need to define a convert function, a reverse convert function,
         * and some formatting information.
         */
       

        /**
         * Create a new Format 'SPS I', which looks like: "<X>, <Y>" in the
         * California StatePlane Zone I Spatial Reference, described by wkid 102241
         *
         * For this Format, we only need to provide a spatialReference with the correct
         * wkid. The geometry service can take care of the rest.
         */
        var Balkan6 = new Format({
          name: "Balkan zona 6",
          conversionInfo: {
            spatialReference: new SpatialReference({ wkid: 31276 }),
            reverseConvert: function(string, format) {
              var parts = string.split(",");
              return new Point({
                x: parseFloat(parts[0]),
                y: parseFloat(parts[1]),
                spatialReference: { wkid: 31276 }
              });
            }
          },
          coordinateSegments: [
            {
              alias: "X",
              description: "easting",
              searchPattern: numberSearchPattern
            },
            {
              alias: "Y",
              description: "northing",
              searchPattern: numberSearchPattern
            }
          ],
          defaultPattern: "X, Y"
        });

        // Add our new format to the widget's dropdown
        ccWidget.formats.add(Balkan6);


      var Balkan6 = new Format({
          name: "Balkan zona 5",
          conversionInfo: {
            spatialReference: new SpatialReference({ wkid: 31275 }),
            reverseConvert: function(string, format) {
              var parts = string.split(",");
              return new Point({
                x: parseFloat(parts[0]),
                y: parseFloat(parts[1]),
                spatialReference: { wkid: 31275 }
              });
            }
          },
          coordinateSegments: [
            {
              alias: "X",
              description: "easting",
              searchPattern: numberSearchPattern
            },
            {
              alias: "Y",
              description: "northing",
              searchPattern: numberSearchPattern
            }
          ],
          defaultPattern: "X, Y"
        });

        // Add our new format to the widget's dropdown
        ccWidget.formats.add(Balkan6);


        // Add the two custom formats to the top of the widget's display
        ccWidget.conversions.splice(
          0,
          0,
          new Conversion({
            format: newFormat
          }),
          new Conversion({
            format: Balkan6
          }),
          
        new Conversion({
            format: Balkan5
          })
          
         
          
        );
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: I try to make custom wab widget for my app, can help me someone

LeoLiu1 — Sun, 12 Dec 2021 08:55:28 GMT

Hi Jasmin,

You can follow Rickey's suggestion to create a custom 3D widget.

Make sure you have an UI with a dojo attach point in your Widget.html:

<div>
  <div data-dojo-attach-point="myCoordinateConversionWidget"></div>
</div>‍‍‍

and then in your Widget.js, create the CoordinateConversion widget and attach it to the element by 'container' property:

define(['dojo/_base/declare', 'jimu/BaseWidget', 'esri/widgets/CoordinateConversion'],
function(declare, BaseWidget, CoordinateConversion) {
  //To create a widget, you need to derive from BaseWidget.
  return declare([BaseWidget], {
    //Please note that the widget depends on the 4.0 API
    // DemoWidget code goes here

    baseClass: 'jimu-widget-demo',

    postCreate: function() {
      this.inherited(arguments);
      var ccWidget = new CoordinateConversion({
        container: this.myCoordinateConversionWidget,
        view: this.sceneView
      });
    },

    startup: function() {
      this.inherited(arguments);
      console.log('startup');
    },

    onOpen: function(){
      console.log('onOpen');
    },

    onClose: function(){
      console.log('onClose');
    },

    onMinimize: function(){
      console.log('onMinimize');
    },

    onMaximize: function(){
      console.log('onMaximize');
    }
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: I try to make custom wab widget for my app, can help me someone

RickeyFight — Wed, 19 Feb 2020 15:21:54 GMT

Jasmin Geko‌

Have you seen the widget talked about here?

Maybe you could adapt this one to meet your needs

https://community.esri.com/thread/248305-open-coordinate-conversion-widget-with-multiple-conversions-by-default-4x

Re: I try to make custom wab widget for my app, can help me someone

JasminGeko — Thu, 20 Feb 2020 14:14:52 GMT

Thx all for suggestions, i will try something

Every advice is welcome..