Een ArcGIS JavaScript API-stijl Widget gebruiken binnen een Aangepaste Experience Builder Widget

GavinRehkemper

<\/HEAD>

We hebben de afgelopen maanden enkele vragen ontvangen over hoe je "Custom ArcGIS API for JavaScript widgets" (zoals de Custom Recenter Widget<\/A>) kunt gebruiken binnen een Experience Builder widget. Dit zijn de huidige instructies om dat te doen. Er kunnen betere of andere manieren zijn - als je er een ontdekt, laat het ons dan weten!<\/P>

<\/P>

Opmerking: Laatst bijgewerkt in 2020-07 voor ArcGIS JS API 4.16 en Experience Builder Developer Edition v1.1.<\/EM><\/P><\/P>

1. Bouw de JavaScript API Widget<\/H2>Volg de instructies in de documentatie voor de ArcGIS API for JavaScript om een Custom Widget te maken<\/A> en maak vervolgens de Custom Recenter Widget<\/A>. Deze handleidingen gebruiken geen webpack om de bestanden te bundelen - ze gebruiken alleen de TypeScript compiler (tsc<\/CODE>) om de <CODE>*.tsx<\/CODE> bestanden naar <CODE>*.js<\/CODE> bestanden te converteren.<\/P><P><\/P><P>Nadat je het <CODE>tsc<\/CODE> commando hebt uitgevoerd om de <CODE>tsx<\/CODE> bestanden één laatste keer naar <CODE>js<\/CODE> bestanden te converteren, kopieer je het JS-bestand (<CODE>Recenter.js<\/CODE>) en ga je verder - we zullen dit in onze custom Experience Builder widget plakken in de volgende stap.<\/P><P><\/P><H2 id="toc-hId--727302689" id="toc-hId--727302689">2. Maak een Custom Experience Builder widget<\/H2><P>Maak een nieuwe custom Experience Builder widget. De snelste manier om snel aan de slag te gaan is waarschijnlijk door de <CODE>simple<\/CODE> widget te kopiëren.<\/P><P><\/P><P>Aangezien de JS API Widget interactie heeft met een Map View, heeft je Experience Builder widget de infrastructuur nodig om te verwijzen naar een Map View widget binnen dezelfde Experience app. De makkelijkste manier om dit te doen is door een Experience te maken, je widget toe te voegen, en vervolgens naar de config van je werkende app te gaan (<CODE>server\\src\\public\\apps\\Z\\resources\\config<\/CODE>) en <CODE>"useMapWidgetIds": ["widget_ZZ"],<\/CODE> in de widgetconfiguratie in te stellen.<\/P><P><\/P><P><IMG __jive_id="496581" alt="voorbeeldconfiguratie" 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>Voeg in je widget <CODE>manifest.json<\/CODE> de <CODE>jimu-arcgis<\/CODE>-afhankelijkheid toe door het volgende toe te voegen:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>"dependency": ["jimu-arcgis"],‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍<\/<SPAN><\/<SPAN><\/<SPAN>

<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/<\/><|vq_15204|>{ \/><\/P>

<\/P>

Volgende stappen<\/H2>De volgende logische stap zou waarschijnlijk zijn om de widget aan te passen zodat de tekst binnen de Experience Builder-widget staat in plaats van op de kaart. Ik laat dat aan jou over, en voel je ook vrij om andere widgets en widgetideeën die je aan het bouwen bent te plaatsen!<\/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