出典:ArcGIS Experience Builder - Guide - migrating-from-web-appbuilder
ArcGIS Experience Builder は、Web AppBuilder とはさまざまな点で異なります。これらの違いから、Web AppBuilder から Experience Builder へカスタム ウィジェットやテーマを直接変換することはできません。手動のプロセスですが、Experience Builder 用にウィジェットやテーマを再構築する際に考慮すべきヒント、テクニック、および推奨プラクティスを紹介します。
これは網羅的なものではありませんし、開発者が手動で書き直す作業であることに変わりはありません。これらの手順は、Experience Builder 内でウィジェットを再ビルドする際の準備と計画に役立つように提供されます。
まず、Experience Builder のドキュメントを確認し、ウィジェット開発のスタート ドキュメントに従って TypeScript、React、JSX、Jimu を学びます。
コア技術の概念に慣れたら、ブランク/スターターの Experience Builder のウィジェットを作成し、ビルド環境が正しく設定されていることを確認します。次に、Web AppBuilder のカスタム ウィジェットから新しい Experience Builder のカスタム ウィジェットにコードを移動し、次の点に注意してください。
どちらのウィジェットにも manifest.json がありますが、Experience Builder のものは若干異なりますので、新しい manifest.json の形式を確認し、適宜更新してください。
dojo 固有のモジュールはすべて置き換える必要があります。 - たとえば、dojo/domClass
モジュールの domClass
関数を次のように使用する場合
domClass.contains(domNode, "myClassName");
この場合、Dojo 以外の選択肢でそれを書き直す必要があります。
domNode.classList.contains("myClassName");
Dojo はブラウザのサポートを標準化してくれますが、ネイティブの JavaScript の機能を使うことはできませんので、MDN や CanIUse などのサイトで、使用する機能のブラウザ サポートを確認する必要があります。この場合、例えば CanIUse によると、classList
はすべての主要なブラウザでサポートされていると述べています。
ウィジェットのライフサイクル メソッドは、同じようには動作しません。一般的に、ウィジェット起動時に発生するウィジェットのライフサイクル メソッド (constructor
、postMixinProperties
、buildRendering
、postCreate
) は、おそらく componentDidMount() 関数(またはフックを使用する場合は同等の useEffect()
)に移動できます。
今まで widget.html にあったテンプレートは、Experience Builder のカスタムウィジェット (React コンポーネント) の render()
関数で JSX に変換されるようになります。
data-dojo-attach-point
で名前を付けている場合、React でそれに相当するものは Refs です。<div>${nls.label1}.</div>
では、「translations folder」パターンを使用するようになります)。Map/Scene オブジェクトへのアクセス - this.map
を使用している場合、Experience Builder では 1 つのエクスペリエンスに複数のマップまたはシーンを持つことができるようになったため、このパターンはまったく同じようには動作しません(Web AppBuilder アプリごとに 1 つのマップしか持つことができませんでした)。MapWidgetSelector と JimuMapViewComponent を参照してください。
カスタム設定パネル(/setting
フォルダ内)がある場合、それに相当するのは Experience Builder カスタムウィジェットの src/setting
内です。設定 UI の作成に関する詳細情報