Usando um Widget no estilo ArcGIS JavaScript API dentro de um Widget Custom Experience Builder

GavinRehkemper

<\/HEAD>

Recebemos algumas perguntas nos últimos meses sobre como usar "Custom ArcGIS API for JavaScript widgets" (como o Custom Recenter Widget<\/A>) dentro de um widget do Experience Builder. Estas são as instruções atuais sobre como fazer isso. Pode haver maneiras melhores ou diferentes - se você souber de alguma, por favor nos avise!<\/P>

<\/P>

Nota: Última atualização em 2020-07 para ArcGIS JS API 4.16 e Experience Builder Developer Edition v1.1.<\/EM><\/P><\/P>

1. Construir o Widget da JavaScript API<\/H2>Siga as instruções na documentação da ArcGIS API for JavaScript para Criar um Widget Personalizado<\/A> e então crie o Custom Recenter Widget<\/A>. Estes guias não usam webpack para empacotar os arquivos - eles usam apenas o compilador TypeScript (tsc<\/CODE>) para converter os arquivos <CODE>*.tsx<\/CODE> em arquivos <CODE>*.js<\/CODE>.<\/P><P><\/P><P>Depois de executar o comando <CODE>tsc<\/CODE> para converter os arquivos <CODE>tsx<\/CODE> em arquivos <CODE>js<\/CODE> pela última vez, copie o arquivo JS (<CODE>Recenter.js<\/CODE>) e continue - iremos copiá-lo para nosso widget personalizado do Experience Builder na próxima etapa.<\/P><P><\/P><H2 id="toc-hId--727302689" id="toc-hId--727302689">2. Criar um widget personalizado do Experience Builder<\/H2><P>Crie um novo widget personalizado do Experience Builder. A maneira mais fácil de começar rapidamente provavelmente é copiar o widget <CODE>simple<\/CODE>.<\/P><P><\/P><P>Como o JS API Widget interage com uma Map View, seu widget do Experience Builder precisará da infraestrutura para referenciar um widget Map View dentro do mesmo app Experience. A maneira mais fácil de fazer isso é criar uma Experience, adicionar seu widget, depois ir para a configuração do seu app em desenvolvimento (<CODE>server\src\public\apps\Z\resources\config<\/CODE>) e definir <CODE>"useMapWidgetIds": ["widget_ZZ"],<\/CODE> na configuração do widget.<\/P><P><\/P><P><IMG __jive_id="496581" alt="exemplo de configuração" 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>No seu arquivo <CODE>manifest.json<\/CODE> do widget, inclua a dependência <CODE>jimu-arcgis<\/CODE> adicionando:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>"dependency": ["jimu-arcgis"],‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍<\/<SPAN><\/<SPAN><\PRE>

<\/>Copie o arquivo JS que você tinha da etapa 1 (Recenter.js<\/> ) para os arquivos do seu widget, no mesmo nível que widget.tsx<\/> (dentro de src/runtime<\/> ).<\/> <\/> <\/> Dentro de < CODE >widget.tsx< \ / CODE > , importe o arquivo : < \ / P > < \ P > < PRE class = " lia-code-sample line-numbers language-none " > < CODE > import Recenter = require(".\Recenter");‍‍‍ < SPAN class = " line-numbers-rows " > < SPAN > ‍ < \/SPAN > < \/SPAN > < \/ CODE > < \/ PRE > < P > < \/ P > < P > Então utilize o widget Recenter dentro do callback de < CODE >JimuMapViewComponent< \ / CODE > ou em qualquer lugar onde você tenha uma instância da Map View : </ P >< P >< / P >< PRE class = " lia-code-sample line-numbers language-none " >< CODE >< SPAN class = " token function " > render </ SPAN >< SPAN class = " punctuation token " >(</ SPAN >< SPAN class = " punctuation token " )</ SPAN > { < SPAN class = " keyword token " > return </ SPAN > ( < 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 > ); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ < SPAN class = " line-numbers-rows " > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ < /SPAN >< SPAN > ‍ </ CODE ></ PRE >< P ></ P >< P > Para que o código acima funcione, você precisará importar JimuMapViewComponent e JimuMapView no topo do seu widget assim : </ P >< P ></ P >< PRE class = " lia-code-sample line-numbers language-none " >< CODE >< SPAN class = " keyword token " > import { JimuMapViewComponent , JimuMapView } from \/><\/P><\/P>

Próximos Passos<\/H2>O próximo passo lógico provavelmente seria modificar o widget para ter o texto dentro do widget Experience Builder em vez de no mapa. Vou deixar isso com você, e também sinta-se à vontade para postar outros widgets e ideias de widgets que você está construindo!<\/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