Uso de un Widget al estilo ArcGIS JavaScript API dentro de un Widget personalizado de Experience Builder

GavinRehkemper

<\/HEAD>

Hemos recibido algunas preguntas en los últimos meses sobre cómo usar "Custom ArcGIS API for JavaScript widgets" (como el Custom Recenter Widget<\/A>) desde un widget de Experience Builder. Estas son las instrucciones actuales sobre cómo hacerlo. Puede haber formas mejores o diferentes - si conoces alguna, ¡por favor avísanos!<\/P>

<\/P>

Nota: Última actualización 2020-07 para ArcGIS JS API 4.16 y Experience Builder Developer Edition v1.1.<\/EM><\/P><\/P>

1. Construir el Widget de JavaScript API<\/H2>Sigue las instrucciones en la documentación para la ArcGIS API for JavaScript para Crear un Widget Personalizado<\/A> y luego crea el Custom Recenter Widget<\/A>. Estas guías no usan webpack para empaquetar los archivos - solo usan el compilador TypeScript (tsc<\/CODE>) para convertir los archivos <CODE>*.tsx<\/CODE> a archivos <CODE>*.js<\/CODE>.<\/P><P><\/P><P>Después de ejecutar el comando <CODE>tsc<\/CODE> para convertir los archivos <CODE>tsx<\/CODE> a archivos <CODE>js<\/CODE> por última vez, copia el archivo JS (<CODE>Recenter.js<\/CODE>) y continúa - lo copiaremos en nuestro widget personalizado de Experience Builder en el siguiente paso.<\/P><P><\/P><H2 id="toc-hId--727302689" id="toc-hId--727302689">2. Crear un widget personalizado de Experience Builder<\/H2><P>Crea un nuevo widget personalizado de Experience Builder. La forma más fácil de comenzar rápidamente probablemente sea copiar el widget <CODE>simple<\/CODE>.<\/P><P><\/P><P>Dado que el JS API Widget interactúa con una Vista de Mapa, tu widget de Experience Builder necesitará la infraestructura para referenciar un widget de Vista de Mapa dentro de la misma aplicación Experience. La forma más sencilla de hacer esto es crear una Experience, agregar tu widget, luego ir a la configuración de tu aplicación en desarrollo (<CODE>server\\src\\public\\apps\\Z\\resources\\config<\/CODE>) y establecer <CODE>"useMapWidgetIds": ["widget_ZZ"],<\/CODE> en la configuración del widget.<\/P><P><\/P><P><IMG __jive_id="496581" alt="configuración ejemplo" 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>En tu archivo <CODE>manifest.json<\/CODE> del widget, incluye la dependencia <CODE>jimu-arcgis<\/CODE> agregando:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>"dependency": ["jimu-arcgis"],‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍<\/<SPAN><\/<SPAN><\/<SPAN>

<\/<SPAN>

<\/<SPAN> \/><\/P>

<\/P>

Próximos Pasos<\/H2>El siguiente paso lógico probablemente sería modificar el widget para que el texto esté dentro del widget Experience Builder en lugar de en el mapa. Lo dejaré a tu criterio, y también siéntete libre de publicar otros widgets e ideas de widgets que estés creando.<\/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