Migrating from Web AppBuilder
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.
This is not meant to be an exhaustive list, and the process is still a manual re-write process for the developer. These steps are provided to help with preparation and planning when re-building a widget within Experience Builder.
First, review the Experience Builder documentation, and learn TypeScript, React, JSX, and Jimu per the Getting Started documentation.
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
domClassfunction like this:
... you should now re-write that with non-dojo alternatives, in this case:
- Widget life cycle methods do not work the same. In general, widget life cycle methods that happen at the widget startup (
postCreate) can probably moved into the componentDidMount() function (or equivalent
useEffect()if using hooks).
- The template that used to be in
widget.htmlwill now be converted to JSX in the
render()function of your custom Experience Builder widget (React component).
- 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). See
- If you have a custom Setting panel (in the
/settingfolder), the equivalent of that is in
src/settingin your custom Experience Builder widget. More info on creating a setting UI.