Knowledge base

Campo de texto

• "inputType": "entrada de texto"
  • Descripción: Un simple campo de texto libre
  • Ejemplo:

"text_input": {
    "title": "Entrada de texto",
    "inputType": "textinput",
    "value": "Valor de texto libre",
    "info": "Un campo de texto libre"
}

Área de texto

• "inputType": "área de texto"
  • Descripción: Un cuadro de texto para la entrada de texto más largo.
  • Ejemplo:

"textarea_input": {
    "title": "Área de texto",
    "inputType": "textarea",
    "value": "Mira esto",
    "info": "Ahora con un 20 por ciento más de espacio para tu ensayo."
}

Múltiples campos de texto

• "inputType": "entrada de texto múltiple"
  • Descripción: el usuario puede agregar varios campos de texto de entrada con valores separados. Se utiliza maxValue para definir el número máximo de valores que se pueden introducir.
  • Ejemplo:

"multiple_text_input": {
    "title": "Entrada de texto múltiple",
    "inputType": "entrada de texto múltiple",
    "value": [
        {
            "element": "Hola"
        },
        {
            "element": "Mundo"
        }
    ],
    "maxValue": 4,
    "info": "Se permite un máximo de 4 valores"
}

Campo desplegable

• "inputType": "entrada desplegable"
  • Descripción: Un campo desplegable con opciones seleccionables. Utilícelo elements como atributo específico para agregar los valores deseados como elementos JSO anónimos que representan las opciones desplegables. Cada elemento debe contener un nombre y un valor.
  • Ejemplo:

"bluetooth_connect_mode": {
    "title": "Modo de conexión",
    "inputType": "dropdown-input",
    "value": "search",
    "elements": [
        {
            "name": "Buscar y encontrar",
            "value": "buscar"
        },
        {
            "name": "Código de escaneo",
            "value": "escanear"
        }
    ],
    "showIfComputed": true,
    "info": "'Buscar y encontrar' descubrirá todos los dispositivos disponibles y los filtrará según el tipo. 'Code Scan' le permite escanear la dirección MAC o el nombre del dispositivo."
}

Múltiples campos desplegables

• "inputType": "entrada desplegable múltiple"
  • Descripción: Con el campo de entrada desplegable de varios niveles, el usuario puede agregar varias instancias del mismo campo desplegable y, por lo tanto, elegir varios valores para su pedido. Los atributos específicos son:
    • maxValue para definir el número máximo de valores que se pueden seleccionar
    • elements: para agregar elementos JSON anónimos que representen las opciones desplegables (cada elemento debe contener un nombre y un valor)
  • Ejemplo:

"multiple_dropdown_input": {
            "title": "Entrada desplegable múltiple",
            "inputType": "entrada desplegable múltiple",
            "value": [
                {
                    "name": "Valor mostrado"
                },
                {
                     "name": "Valor mostrado 2"
                },
            ],
            "elements": [
                {
                    "name": "Valor mostrado"
                },
                {
                    "name": "Valor mostrado 2"
                },
                {
                    "name": "Valor mostrado 3"
                }
            ],
            "maxValue": 2
        }

Casilla de verificación

• "inputType": "checkbox-input"
  • Descripción: una entrada de alternancia booleana
  • Ejemplo:

"checkbox_input": {
    "title": "Entrada de casilla de verificación",
    "inputType": "checkbox-input",
    "value": "true"
}

Rango de números

• "inputType": "rango"
  • Descripción: Entrada de rango de números
  • Ejemplo:

"range": {
    "title": "Rango de lectura",
    "inputType": "range",
    "rangeMin": "1",
    "rangeMax": "20",
    "value": 15
}

Carga de archivos

• "inputType": "carga de archivos"
  • Descripción: Permite al usuario cargar un archivo de imagen.
  • Ejemplo:

"sensor_type": {
    "inputType": "file-upload",
    "title": "Icono",
    "accept": "image/png",
    "multiple": false,
    "showIf": "root. Value_1.sensor_shown.value",
    "value": "xai:/wf-editor/2c639f9c-a3d5-4830-9e55-092fe98d92a4/component_sensor_1563203048508_image001.png?version=1",
    "showIfComputed": true
}

Selector de color

• "inputType": "entrada de color"
  • Descripción: Una entrada para seleccionar un color. Los usuarios pueden definir una lista de valores hexadecimales para seleccionar o utilizar el selector de color completo.
  • Ejemplo:

"color": {
    "inputType": "color-input",
    "title": "Selector de color",
    "list": [
        "#fcba03",
        "#1d6280"
    ],
    "showIfComputed": true,
    "value": "#fcba03"
}

Entrada de mapa

• "inputType": "map-input"
  • Descripción: Un campo de entrada de texto que asocia una clave y un valor como en un mapa. De forma predeterminada, los marcadores de posición en los campos de texto serán "Clave" y "Valor". Se pueden cambiar como se ve en el siguiente ejemplo.
  • Ejemplo:

"headers": {
    "title": "Encabezados Http",
    "inputType": "map-input",
    "placeholder": {
        "key": "Nombre del encabezado",
        "value": "Valor del encabezado"
    },
    "value": [
        {
            "key": "Content-Type",
            "value": "application/json"
        },
        {
            "key": "Aceptar",
            "valor": "application/json"
        }
    ]
}

Para guardar los datos de entrada del mapa en un mapa Javascript real, siga este enfoque:

<setvar id="save_headers">
    <context_of>workflow</context_of>
    <context_update>
        <param name="headers" type="object"><![ CDATA[?{ var headers = { §{#each configuration.headers.value}§'§{key}§': '§{value}§',§{/each}§ }; headers }?]] ></param>      
    </context_update><
/setvar>

Entrada de origen de datos

• "inputType": "selección de fuente de datos"
  • Descripción: Un campo desplegable que le permite seleccionar entre todas las fuentes de datos cargadas en el Centro de comando de primera línea. Esto le permite asociar dinámicamente su componente con diferentes fuentes de datos.
  • Ejemplo:

"datasource": {
            "noOptionsInfo": "¡No se encontraron fuentes de datos!",
            "title": "Fuente de datos",
            "inputType": "selección de fuente de datos",
            "revisionSelection": true,
            "required": true,
            "info": "Seleccione la fuente de datos que desea usar.",
            "value": null
        }