Verwendung eines ArcGIS JavaScript API-Stil Widgets innerhalb eines benutzerdefinierten Experience Builder Widgets

GavinRehkemper

<\/HEAD>

Wir haben in den letzten Monaten einige Fragen dazu erhalten, wie man "Custom ArcGIS API for JavaScript widgets" (wie das Custom Recenter Widget<\/A>) innerhalb eines Experience Builder-Widgets verwendet. Dies sind die aktuellen Anweisungen, wie man das macht. Es kann bessere oder andere Wege geben – wenn Sie einen kennen, lassen Sie es uns bitte wissen!<\/P>

<\/P>

Hinweis: Zuletzt aktualisiert 2020-07 für ArcGIS JS API 4.16 und Experience Builder Developer Edition v1.1.<\/EM><\/P><\/P>

1. Erstellen Sie das JavaScript API Widget<\/H2>Befolgen Sie die Anweisungen in der Dokumentation für die ArcGIS API for JavaScript, um ein Custom Widget zu erstellen<\/A> und dann das Custom Recenter Widget<\/A>. Diese Anleitungen verwenden kein webpack zum Verpacken der Dateien – sie nutzen nur den TypeScript-Compiler (tsc<\/CODE>), um die <CODE>*.tsx<\/CODE>-Dateien in <CODE>*.js<\/CODE>-Dateien umzuwandeln.<\/P><P><\/P><P>Nachdem Sie den <CODE>tsc<\/CODE>-Befehl ausgeführt haben, um die <CODE>tsx<\/CODE>-Dateien ein letztes Mal in <CODE>js<\/CODE>-Dateien umzuwandeln, kopieren Sie die JS-Datei (<CODE>Recenter.js<\/CODE>) und machen weiter – wir werden diese im nächsten Schritt in unser benutzerdefiniertes Experience Builder-Widget einfügen.<\/P><P><\/P><H2 id="toc-hId--727302689" id="toc-hId--727302689">2. Erstellen Sie ein benutzerdefiniertes Experience Builder-Widget<\/H2><P>Erstellen Sie ein neues benutzerdefiniertes Experience Builder-Widget. Der einfachste Weg, schnell loszulegen, ist wahrscheinlich, das <CODE>simple<\/CODE>-Widget zu kopieren.<\/P><P><\/P><P>Da das JS API Widget mit einer Map View interagiert, benötigt Ihr Experience Builder-Widget die Infrastruktur, um auf ein Map View-Widget innerhalb derselben Experience-App zu verweisen. Der einfachste Weg ist, eine Experience zu erstellen, Ihr Widget hinzuzufügen und dann zur Konfiguration Ihrer Arbeits-App (<CODE>server\\src\\public\\apps\\Z\\resources\\config<\/CODE>) zu gehen und <CODE>"useMapWidgetIds": ["widget_ZZ"],<\/CODE> in der Widget-Konfiguration einzustellen.<\/P><P><\/P><P><IMG __jive_id="496581" alt="Beispielkonfiguration" 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>Fügen Sie in Ihrer Widget-<CODE>manifest.json<\/CODE> die Abhängigkeit <CODE>jimu-arcgis<\/CODE> hinzu, indem Sie folgendes ergänzen:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>"dependency": ["jimu-arcgis"],‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍<\/<SPAN><\/<SPAN><\/<SPAN>

<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/><|vq_15291|> \/><\/P>

<\/P>

Nächste Schritte<\/H2>Der nächste logische Schritt wäre wahrscheinlich, das Widget so zu ändern, dass der Text innerhalb des Experience Builder-Widgets statt auf der Karte angezeigt wird. Ich überlasse das Ihnen, und bitte zögern Sie auch nicht, andere Widgets und Widget-Ideen, die Sie entwickeln, zu posten!<\/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