Añadir parámetros configurables a plantillas

Las plantillas de aplicación web personalizables permiten a los usuarios personalizar la apariencia y el comportamiento de una aplicación. Hacer que una plantilla sea configurable es un proceso de cuatro pasos:

  1. Si aún no lo ha hecho, cree una plantilla de aplicación web. Para obtener instrucciones completas, consulte Crear plantillas de aplicación web.
  2. Crea un archivo de configuración.
  3. Configura la plantilla para que lea las propiedades de configuración y aplícalas a la aplicación.
  4. Asocia el archivo de configuración con el elemento de la plantilla personalizada.

Para empezar, consulte las secciones siguientes.

Crear un archivo de configuración

El archivo de configuración es un archivo JSON que define el cuadro de diálogo de entrada de la plantilla. Este archivo contiene una o más secciones que categorizan las opciones de personalización.

La propiedad fieldName debe ser exclusiva dentro de los ajustes de configuración.

Crea las distintas secciones especificando una categoría y un conjunto de campos.

{
    "configurationSettings": [
        {
            "category": "",
            "fields": []
        }
    ]
}

Especifica las opciones de configuración utilizando los tipos de campo que se muestran en la tabla siguiente.

Tipo de campo

Descripción

Párrafo

Muestra texto explicativo en el cuadro de diálogo de configuración.

{
       "type": "paragraph",
       "value": "* These menu items will appear in the application when the web map has layers that require them."
}

Cadena de caracteres

Acepta entrada de texto. Incluye la propiedad stringFieldOption, que especifica el tipo de cuadro de texto que se muestra en la pantalla. Los valores son textbox (cuadro de texto), textarea (área de texto) y richtext (texto con formato). Textbox es el valor predeterminado y consiste en un cuadro de texto con una sola línea. El área de texto muestra un campo de texto mayor para introducir datos. El texto con formato muestra un editor de texto con formato que permite a los usuarios aplicar algunos formatos, como establecer la fuente o aplicar negrita o cursiva al texto.

{
        "type": "string",
        "fieldName": "description",
        "label": "Description",
        "tooltip": "",
         "stringFieldOption": richtext || textarea || textbox,
        "placeHolder": "Text that appears in the text box to provide a hint to users on text to enter"
}

Boolean

Crea un cuadro de texto para especificar valores verdaderos o falsos.

{
       "type": "boolean",
       "fieldName": "displaytitle",
       "label": "Show Title",
       "tooltip": ""
 }

Number

Crea un campo que acepta valores numéricos. Si el campo debe aceptar únicamente un intervalo de valores específico, puedes utilizar el ajuste de restricción para delimitar el rango de valores específico que se puede introducir o para dar formato a los valores introducidos.

Más información sobre cómo crear restricciones con Dojo NumberTextBox

{ 
     "type": "number",
     "fieldName": "range",
     "label": "Range:",
     "tooltip": "",
     "constraints" :{min:0,max:10,places:0}
}

Options

Crea una lista desplegable con una serie de opciones.

{
   "type": "options",
   "fieldName": "theme",
   "tooltip": "Color theme to use",
   "label": "Color Scheme:",
   "options": [{
     "label": "Blue",
     "value": "blue"
   }, {
     "label": "Green",
     "value": "green"
   }, {
     "label": "Orange",
     "value": "orange"
   }]
 }

Archivo de configuración de ejemplo

A continuación hay un ejemplo de un archivo de configuración completo y el panel de configuración que resulta.

{
    "configurationSettings": [
        {
            "category": "General Settings",
            "fields": [
                {
                    "type": "options",
                    "fieldName": "theme",
                    "tooltip": "Color theme to use",
                    "label": "Color Scheme:",
                    "options": [
                        {
                            "label": "Blue",
                            "value": "blue"
                        },
                        {
                            "label": "Green",
                            "value": "green"
                        },
                        {
                            "label": "Orange",
                            "value": "orange"
                        }
                    ]
                },
                {
                    "type": "string",
                    "fieldName": "layer",
                    "label": "Analysis Layer",
                    "tooltip": "Feature Layer with Facilities to search"
                },
                {
                    "type": "string",
                    "fieldName": "orgname",
                    "label": "Organization Name:",
                    "tooltip": "",
                    "stringFieldOption": "richtext",
                    "placeHolder": "Organization Name"
                },
                {
                    "type": "number",
                    "fieldName": "bufferdistance",
                    "label": "Search Distance (miles)",
                    "value": "1"
                }
            ]
        }
    ],
    "values": {
        "theme": "orange",
        "bufferdistance": 1
    }
}

El panel de configuración
El panel de configuración del código de ejemplo:

Configurar la plantilla para leer la información del archivo de configuración

Si la plantilla va a ser configurable, la aplicación deberá aceptar el ID de elemento para una aplicación de representación cartográfica en la red como el valor del parámetro de URL appid. Este ID se utiliza para efectuar una solicitud asíncrona para recuperar las propiedades de configuración de la aplicación. En la API de ArcGIS para JavaScript, puedes usar esri.request para recuperar los detalles de configuración de la aplicación.

En este ejemplo, esri.arcgis.utils.arcgisUrl va a parar a www.arcgis.com/sharing/content/items.

var requestHandle = esri.request({
    url: esri.arcgis.utils.arcgisUrl + "/" + appid + "/data",
    content: {
        f: "json"
     },
    callbackParamName: "callback",
    load: function (response) {
     for (var key in response.values){
      if(response.values[key]!==undefined)configOptions[key]=response.values[key];
      }
    }, 
});

La respuesta incluirá los cambios que el usuario haya solicitado sobre la aplicación, utilizando el panel de configuración. A continuación, puedes recuperar los cambios y aplicarlos a la aplicación. La aplicación debería definir los valores predeterminados de las opciones de configuración a fin de manejar las situaciones en las cuales la plantilla no se haya configurado.

{
    "source": "15a34e2c161b4364860854fbc84262c5",
    "folderId": "5705faa4594a4fd09edf01742c16e523",
    "values": {
        "webmap": "32f1438789d34b5e8125f0f7c64b8d63",
        "layer":"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/2",
        "theme": "green",
        "orgname": "Water Points",
        "bufferdistance": 3
       }
 }

Asociar la información del archivo de configuración con un elemento de una plantilla personalizada

Una vez que hayas creado el archivo de configuración, estarás listo para asociarlo a tu plantilla personalizada y hacer que la aplicación sea configurable. En primer lugar, si no lo ha hecho ya, añada la plantilla como nuevo elemento de la aplicación de representación cartográfica en la red en a su portal. Para obtener más información sobre la adición de una aplicación, consulte Añadir aplicaciones. A continuación, abre la página de detalles del elemento de tu aplicación web, haz clic en el botón Editar y copia y pega el código JSON desde tu archivo de configuración en el cuadro Parámetros de configuración situado al final de la página de detalles del elemento.

Página de detalles con el campo Parámetros de configuración
Haz que tu plantilla sea configurable añadiéndole la información del archivo de configuración dentro del campo Parámetros de configuración, dentro de los detalles del elemento de plantilla.

Ahora hay una sección de parámetros de configuración en el modo de Edición del elemento de la aplicación web.

NotaNota:

El campo Parámetros de configuración requiere un JSON válido. Es una buena práctica ejecutar el JSON mediante un validador como JSON Lint a fin de garantizar que tengas un JSON bien formateado y libre de errores.

Si quieres utilizar la plantilla configurable en la galería de plantillas de representación cartográfica en la red de tu organización o en una galería de plantillas de grupos, comparte el elemento con el grupo que se esté utilizando para las plantillas. A continuación, el administrador de tu organización puede configurar el visor de mapas o configurar grupos para usar el grupo que incluya tu plantilla.

5/9/2014