MI PRIMER WIDGET PARA EXPETIENCE BUILDER

 1.- Detallamos el requerimiento

Tenemos el siguiente servicio Web

ArcGIS API for JavaScript: SampleWorldCities (arcgisonline.com)

https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer?f=jsapi

Vemos que el servicio contiene 3 capas

La capa Cities tiene estos atributos

El requerimiento consiste en hacer una consulta sobre las ciudades que tiene el servicio indicado anteriormente.

El plan es implementar el widget en 3 etapas:

- No hay interacción con ningún otro widget.

- Interacción con un widget de mapa.

- Eliminación de todos los parámetros codificados

Todo el desarrollo de widgets basado en componentes funcionales comienza con los siguientes pasos:

- Crea una carpeta con el nombre del widget que estás haciendo: Stage1

- Crea un archivo manifest.json (no olvides agregar: "dependencia": ["jimu-arcgis"] a medida que avanzas 

utilizar alguna API de ArcGIS para módulos JavaScript

- Agregar un archivo icon.svg

- En la carpeta Stage1, cree una carpeta src con una carpeta en tiempo de ejecución dentro.

- En la carpeta de ejecución, cree el archivo widget.tsx:

Vamos...!

Paso 1: Creamos la carpeta

Paso 2: Creamos el archivo manifest.json

Paso 3.- Completamos los siguiente parámetros en el archivo manifest.json

{

  "name": "Stage1",

  "label": "Stage1",

  "type": "widget",

  "version": "1.12.0",

  "exbVersion": "1.12.0",

  "author": "Catherine LeCocq",

  "description": "Tutorial Stage 1",

  "license": "http://www.apache.org/licenses/LICENSE-2.0",

  "properties": {},

  "dependency": ["jimu-arcgis"],

  "defaultSize": {

    "width": 400,

    "height": 400

  }

}

Paso 4.- Agregamos un archivo icon.svg

Paso 5.- Creamos la Carpeta scr

Paso 6.- Creamos la carpeta runtime

 Paso 7.- Creamos le archivo widget.tsx

Paso 8.- Codificamos

8.1 Estructuramos la parte básica del Codigo

8.2 Creamos los parámetros de entradas

8.3 Creamos la consulta

8.4 Programamos la consulta usando las constantes

8.5 Mostramos los datos consultados

Para mostrar los resultados en una tabla, simplemente agregue la entrada de la tabla en la declaración y mantenga el resultado de la consulta en el estado del widget

8.6 Por otro aspecto estético, resulta útil borrar la tabla al cerrar el widget. Esto se puede hacer por escuchando cambios en el estado del widget.

9.- Copiamos el Widget en el directorio.

10.- Ejecutamos Experience Builder y ya nos aparece el Widget