Introduction
ArcGIS Experience Builder is different from Web AppBuilder in a variety of ways. Because of these differences, directly converting custom widgets and themes from Web AppBuilder to Experience Builder is not possible. Even though it is a manual process, here are some tips, techniques, and recommended practices to consider as you are re-building your widget or theme for Experience Builder.
Getting Started
First, review the Experience Builder documentation, and learn TypeScript, React, JSX, and Jimu per the Getting Started documentation.
Create a New Widget
Once you are familiar with the core technology concepts, create a blank/starter Experience Builder widget and make sure you have the build environment setup correctly. Then start moving code over from your Web AppBuilder custom widget into your new Experience Builder custom widget, taking note of the following:
-
Both widgets have a
manifest.json, but Experience Builder's is slightly different, review the new format of manifest.json and update as appropriate. -
Any dojo-specific modules must be replaced - for example, if using
dojo/dommodule'sClass domfunction like this:Class Use dark colors for code blocks Copy domClass.contains(domNode, "myClassName");... you should now re-write that with non-dojo alternatives, in this case:
Use dark colors for code blocks Copy domNode.classList.contains("myClassName"); -
Widget life cycle methods do not work the same. In general, widget life cycle methods that happen at the widget startup (
constructor,post,Mixin Properties build,Rendering post) can probably moved into the componentDidMount() function (or equivalentCreate useif using hooks).Effect() -
The template that used to be in
widget.htmlwill now be converted to JSX in therender()function of your custom Experience Builder widget (React component).- If you are naming DOM nodes with
data-dojo-attach-point, an equivalent in React is Refs. - If you are using NLS for internationalization/translation, in your template (Example:
<div>) you'll now use the "translations folder" pattern).${nls.label1}.</div>
- If you are naming DOM nodes with
-
Accessing a Map/Scene object - If you are using
this.map, this pattern does not work exactly the same in Experience Builder since you can now have multiple maps or scenes in a single experience (where you could only have one map per Web AppBuilder app). SeeMapandWidget Selector Jimu.M a p View Component -
If you have a custom Setting panel (in the
/settingfolder), the equivalent of that is insrc/settingin your custom Experience Builder widget. More info on creating a setting UI.