Utilisation d'un Widget de style ArcGIS JavaScript API dans un Widget personnalisé Experience Builder

GavinRehkemper

<\/HEAD>

Nous avons reçu quelques questions au cours des derniers mois sur la façon d'utiliser les "Custom ArcGIS API for JavaScript widgets" (comme le Custom Recenter Widget<\/A>) depuis un widget Experience Builder. Voici les instructions actuelles pour le faire. Il peut y avoir de meilleures ou différentes méthodes - si vous en découvrez une, merci de nous en informer !<\/P>

<\/P>

Note : Dernière mise à jour en 2020-07 pour ArcGIS JS API 4.16 et Experience Builder Developer Edition v1.1.<\/EM><\/P><\/P>

1. Construire le Widget JavaScript API<\/H2>Suivez les instructions dans la documentation de l'ArcGIS API for JavaScript pour Créer un Widget Personnalisé<\/A> puis créez le Custom Recenter Widget<\/A>. Ces guides n'utilisent pas webpack pour empaqueter les fichiers - ils utilisent uniquement le compilateur TypeScript (tsc<\/CODE>) pour convertir les fichiers <CODE>*.tsx<\/CODE> en fichiers <CODE>*.js<\/CODE>.<\/P><P><\/P><P>Après avoir exécuté la commande <CODE>tsc<\/CODE> pour convertir les fichiers <CODE>tsx<\/CODE> en fichiers <CODE>js<\/CODE> une dernière fois, copiez le fichier JS (<CODE>Recenter.js<\/CODE>) et passez à l'étape suivante - nous allons copier ceci dans notre widget Experience Builder personnalisé à l'étape suivante.<\/P><P><\/P><H2 id="toc-hId--727302689" id="toc-hId--727302689">2. Créer un widget Experience Builder personnalisé<\/H2><P>Créez un nouveau widget Experience Builder personnalisé. Le moyen le plus simple de commencer rapidement est probablement de copier le widget <CODE>simple<\/CODE>.<\/P><P><\/P><P>Puisque le JS API Widget interagit avec une Map View, votre widget Experience Builder aura besoin de l'infrastructure pour référencer un widget Map View dans la même application Experience. Le moyen le plus simple de faire cela est de créer une Experience, d'ajouter votre widget, puis d'aller dans la configuration de votre application en cours (<CODE>server\\src\\public\\apps\\Z\\resources\\config<\/CODE>) et de définir <CODE>"useMapWidgetIds": ["widget_ZZ"],<\/CODE> dans la configuration du widget.<\/P><P><\/P><P><IMG __jive_id="496581" alt="exemple de configuration" class="jive-emoji jive-image image-2 j-img-original" src="https:\/\/us.v-cdn.net\/6038851\/uploads\/legacyfs\/online\/496581_example-config-highlight.png" \/><\/P><P><\/P><P>Dans votre fichier <CODE>manifest.json<\/CODE> du widget, incluez la dépendance <CODE>jimu-arcgis<\/CODE> en ajoutant :<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>"dependency": ["jimu-arcgis"],‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍<\/<\span></SPAN></SPAN>

<\/><\/><\/>Copiez le fichier JS que vous aviez obtenu à l'étape 1 (Recenter.js<\/> ) dans vos fichiers de widget, au même niveau que <CODE>widget.tsx<\/> (dans <CODE>src/runtime<\/> ).<\/><\/><\/>Dans <CODE>widget.tsx<\/> , importez le fichier :<\/><\/><PRE class="lia-code-sample line-numbers language-none"><CODE>import Recenter = require(".\Recenter");‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍ </SPAN></SPAN><\/><\/><\/>Puis utilisez le widget Recenter dans le callback de JimuMapViewComponent<\/> ou partout où vous avez une instance de Map View :<\/><\/><PRE class="lia-code-sample line-numbers language-none"><CODE><SPAN class="token function">render</SPAN>( ) { return ( <div className="widget-demo jimu-widget m-2"> {this.props.hasOwnProperty("useMapWidgetIds") && this.props.useMapWidgetIds && this.props.useMapWidgetIds.length === 1 && ( <JimuMapViewComponent useMapWidgetIds={this.props.useMapWidgetIds} onActiveViewChange={(jmv: JimuMapView) => { if (jmv) { jmv.view.when(function () { const recenter = new Recenter({ view: jmv.view, initialCenter: [-100.33, 43.69], }); jmv.view.ui.add(recenter, "top-right"); }); } }} /> )} <p>Simple Widget</p> </div> ); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<\/><\/><\/>Pour que ce code fonctionne, vous devrez importer JimuMapViewComponent et JimuMapView en haut de votre widget comme ceci :<\/><\/>

import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";<SPAN class="line-numbers-rows"><SPAN>‍ </SPAN></SPAN>

<\/><\/><\/>Si tout se passe bien, vous verrez la boîte d'information dans le coin supérieur droit de la carte lorsque vous ajoutez votre widget à une Experience (et que vous le configurez manuellement pour référencer une carte) :<\/><\/>

\/><\/P>

<\/P>

Étapes suivantes<\/H2>La prochaine étape logique serait probablement de modifier le widget pour que le texte soit à l'intérieur du widget Experience Builder au lieu d'être sur la carte. Je vous laisse faire cela, et n'hésitez pas également à publier d'autres widgets et idées de widgets que vous développez !<\/P><\/BODY><\/HTML>

VaddineniSrinivasulu

Hello @GavinRehkemper 

I am building a custom widget which wraps some react widget loading via script tag inside widget.tsx. the widget loads and runs properly in blank templates. However widget doesnt loads when i use different templates like webbapp builder classic, etc. i see errors in console saying Error: multiple define in init.js