Help rewriting a custom widget to use the new web components

[EMiller_2]

I have a custom widget which I am using in Experience Builder developer edition (currently at version 1.17). It is based on a sample custom class-based widget that was itself built on the esri Measurement widget. It is fairly complex and uses react state frequently. I just spent the last couple years re-formatting what I had created for Web App builder (with Javascript 3.x) in order to work with the Experience Builder react widget pattern and the Javascript 4.x API. It was a real struggle but it now works well.

However, now I am very dismayed to see that all my work is about to be deprecated and the changes involved in transitioning to the new recommended web component format seem incredibly daunting!

I am really at a loss here as to how to begin to rewrite everything. The examples given for web components are fine, but they don't begin to show how to transition all the functionality of an existing class-based widget. 

Where do I begin? Are there better examples anywhere as to how to transition piece by piece? Any help would be appreciated! 

[WesleyO]

Hi @EMiller_2 

I don't have experience with building custom Experience Builder widgets or even building off of our out-of-the-box (OOTB) widgets, but I'm happy to answer any questions related to the JavaScript Maps SDK and Map components.

It is important to understand that the transition from the core API's widgets to Map components should mainly affect the UI and how the "widgets" are programatically loaded. Any other logic should remain the same or look very similar.

If you’re building directly on top of the Experience Builder Measurement widget, there shouldn’t be much to worry about at this time. The latest version of Experience Builder (v1.19) uses JS API 4.x, so it’s likely still leveraging the core API’s widget classes for the Measurement widget. However, I’m not sure when the ExB team will begin implementing Map components for their own OOTB widgets.

Even once they do implement the Map components, I expect building on top of it to be similar. As I have previously mentioned, if you are making changes to how the widget behaves, then the logic can easily transfer over. It only becomes different once you start making changes to the UI, for example, if you wanted to add a Legend to the Measurement widget for some reason. 

If you are building a complete widget from scratch, then we do have existing ExB samples that show how to use components: https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/web-component-wi...

If you are interested in migrating from the core API's widgets to components, this is a good place to start: https://developers.arcgis.com/javascript/latest/migrating-to-components/

Otherwise, if you are trying to build off of ExB's Measurement widget, I would probably wait until the ExB team builds it with map components.

Let me know if you have any questions.

[JeffreyThompson2]

https://community.esri.com/t5/experience-builder-tips-and-tricks/making-a-basemap-toggle-widget-usin...

Here's my example Component based Widget. If you are making a fairly simple Widget, it shouldn't be much more difficult than adding the Component to the JSX.

Also be aware that a Component can be created using the document.createElement() function. https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/using-web-components-via-4-33-usi... This can be a very useful programing pattern.

Furthermore, consider moving away from Class-based React. While Class-based React is still fully functional and there are no plans to remove it, Function-based React is the modern programming pattern, is better documented and is much easier to work with.

[EMiller_2]

Thanks very much for both of your replies -- looking at some of the links you provided, I have a little more hope that the updates won't be as drastic as I had feared, and hopefully I can keep using most of what I built. I guess time will tell as I upgrade to version 1.19 and start to dig in. As I said before, the problem for me is not so much about starting fresh with all the new standalone examples -- those examples don't help me so much --, it is more about updating an existing widget that already works in Experience Builder, and understanding what is going to need to change. Onward!

[EMiller_2]

@RobertScheitlin @JeffreyThompson2 @WesleyO Revisiting this and boy I am still confused. I have installed Experience Builder Developer Edition 1.20 now and I am seeing a few things marked as deprecated in my VS Code widget.tsx but there do not seem to be any fixes. My custom widgets still seem to work fine and there are no console warnings about deprecation in my chrome browser. How can I know how to change/update? I think probably much of what I have built is going to break but I don't understand what I need to change. As an example of a bit of my current widget code, here are the imports and the widget definition. I'm sure much is old/frowned upon now. Can someone help me understand how to begin to re-construct and also to even know what needs to change?

Thanks again for any help.

import {React, AllWidgetProps, jsx} from 'jimu-core';
import {Button, WidgetPlaceholder, utils} from 'jimu-ui';
import { IMConfig } from '../config';
import {JimuMapView, JimuMapViewComponent} from 'jimu-arcgis';
import Measurement from 'esri/widgets/Measurement';
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
import FeatureLayer from 'esri/layers/FeatureLayer';
import GraphicsLayer from "esri/layers/GraphicsLayer";
import Graphic from "esri/Graphic";
import {getStyle} from './lib/style';
import defaultMessages from './translations/default';
import PictureMarkerSymbol from 'esri/symbols/PictureMarkerSymbol';
import esriRequest from "esri/request"
import Point from 'esri/geometry/Point';

export default class Widget extends React.PureComponent<AllWidgetProps<IMConfig>, any, State> {
  apiWidgetContainer: React.RefObject<HTMLDivElement>;
  locationDiv: React.RefObject<HTMLDivElement>;
  myWidget: Measurement;
  viewClickHandler: IHandle;
  mapView: __esri.MapView | __esri.SceneView;
  drawLayer: GraphicsLayer;
  pointSymbol: PictureMarkerSymbol;
  sketchViewModel: SketchViewModel;
  snapLayer: FeatureLayer;

[JeffreyThompson2]

If it's working and you don't plan to upgrade, you don't have to do anything. At 1.23, you can expect two things to break.

import Measurement from 'esri/widgets/Measurement';

The Measurement Widget will need to be converted to work off of Components.

import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";

The SketchViewModel will likely require importing from a different path, but the JavaScript API team hasn't decided what it will be, so you can't fix this even if you wanted to.