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 scrPaso 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