Crear un widget de Custom UI | Ubidots Centro de Ayuda

VISITA NUESTRO CENTRO DE DESARROLLADORES PARA LA DOCUMENTACIÓN COMPLETA DEL WIDGET DE CUSTOM UI

El widget de Custom UI es una herramienta que permite a los usuarios crear formularios web dentro de Ubidots utilizando formato XML, que Ubidots convierte en elementos web como campos de texto, menús desplegables y botones de alternancia, entre otros.

Considera un caso en el que los datos de los turnos de trabajo de una fábrica deben ser registrados.

Puedes hacerlo fácilmente enviando los datos a un campo de contexto en una variable en Ubidots con una Custom UI como la que se muestra arriba.

Requisitos

Una cuenta activa de Ubidots (Industrial y superior).
Conocimientos básicos de HTML.

1. Crear el Widget de Custom UI

En tu cuenta de Ubidots, ve al dashboard en el que deseas trabajar (o crea uno nuevo).

Haz clic en el botón "+" en la esquina superior derecha de la pantalla para crear un nuevo widget y busca el widget de Custom UI en el cajón:

2. Crear la UI

Hay tres componentes principales que se pueden usar dentro del widget de Custom UI:

Combo de entrada
Párrafo
Botón

Elemento del Custom UI	Descripción	Propiedades
Combo de entrada	Muestra un campo de entrada dependiendo del tipo de propiedad.	type: El tipo de campo de entrada. id: Identificador único para acceder a este campo. label: La etiqueta de texto que será visible junto al campo de entrada. description: Pequeña descripción de texto debajo de la etiqueta, utilizada para dar una pista al usuario sobre la entrada. placeholder: Texto de marcador de posición mostrado dentro del campo de entrada.
Párrafo	Muestra encabezados/párrafos dependiendo del tipo de propiedad.	type: Tipo de párrafo.
Botón	Muestra un botón cuyo color depende del tipo de propiedad.	type: Define el color del botón. click: Una etiqueta definida por el usuario que sirve como ID único para vincular el botón a una acción.

Estos elementos se pueden usar como se muestra en el siguiente XML:

<form>

    <paragraph type="h1">Send data form</paragraph>

    <inputcombo
        type="text"
        id="variable_label"
        label="Variable label"
        description="Choose the variable to which send data"
        placeholder="Enter the name of the variable"
    />

    <inputcombo
        type="number"
        id="variable_value"
        label="Variable value"
        description="Set the value that you want to send"
        placeholder="Enter the value that you want to send"
        min="0" 
        max="100"
    />

    <inputcombo
        type="date"
        id="start_date"
        label="Date"
        description="Set the date in which the measuremet was performed"
        placeholder="Set the date"
    />

    <inputcombo
        type="number.buttons"
        id="variable_value_button"
        label="Variable value button using"
        description="Set the value that you want to send using buttons"
        placeholder="Enter the value that you want to send"
        min="0"
        max="100"
    />
    
    <inputcombo
        type="toggle"
        id="enable_device"
        label="Enable device"
        description="Set the state of the device"
    />

    <inputcombo
        type="hour"
        id="start_hour"
        label="Start Time"
        description="Set the hour at which the measurement was performed"
    />
    
    <inputcombo
        type='dropdown.list'
        id='variable_from_list'
        label="Select a variable"
        description="Select a common variable from all devices"
        placeholder='Choose an option'
    >
       <menu>
		   <item id='temperature'>Temperature</item>
		   <item id='humidity'>Humidity</item>
		   <item id='iluminance'>Iluminance</item>
		   <item id='magnetic_flux'>Magnetic flux</item>
      </menu>
    </inputcombo>
    
    <inputcombo
        type='dropdown.checkbox'
        id='devices_from_list'
        label="Select multiple options"
        description="Select multiple devices to send data"
        placeholder='Choose multiple options'
    >
        <menu>
            <item id='dev_1'>device 1</item>
            <item id='dev_2'>device 2</item>
            <item id='dev_3'>device 3</item>
            <item id='dev_4'>device 4</item>
        </menu>
    </inputcombo>

    <button type="success" click="make_request">Send</button> 

</form>

El XML anterior se muestra como el siguiente widget de Custom UI:

2.1. Input combo type text

Muestra un campo de texto estándar.

2.2. Input combo type number y number.buttons

Muestra un campo de entrada estándar que solo acepta números.

Configurar las propiedades min y max hará que el campo de entrada acepte valores en el rango min <= input <= max.
Esta propiedad hace que los botones del campo de entrada aumenten/disminuyan el conteo actual por el valor establecido en step.

2.3. Input combo type date

Muestra un campo de entrada de fecha en el formato mm/dd/yy, HH:MM (formato de 12h).

2.4. Input combo type hour

Muestra un campo de entrada de hora en el formato HH:MM (formato de 12h).

2.5. Input combo type toggle

Muestra un botón de alternancia.

2.6. Input combo type dropdown.list

Muestra un menú desplegable que permite seleccionar una sola opción.
El siguiente fragmento de código muestra cómo agregar elementos al menú desplegable:

<inputcombo
    type='dropdown.list'
    id='variable_from_list'
    label="Select a variable"
    description="Select a common variable from all devices"
    placeholder='Choose an option'
    >
        <menu>
            <item id='temperature'>Temperature</item>
	    <item id='humidity'>Humidity</item>
	    <item id='iluminance'>Iluminance</item>
	    <item id='magnetic_flux'>Magnetic flux</item>
       </menu>
</inputcombo>

2.7. Input combo type dropdown.checkbox

Muestra un menú desplegable que permite seleccionar múltiples opciones. La forma de agregar elementos al menú desplegable es exactamente la misma que para dropdown.list.

2.8. Paragraph

Este elemento permite la fácil aplicación de diferentes estilos de texto. A continuación se muestran los detalles de cada tipo de estilo de párrafo disponible:

Tipo de párrafo	Descripción
normal	Muestra texto estándar sin ningún formato especial.
bold	Muestra el texto en estilo negrita.
h1, h2, h3, h4	Muestra el tipo de encabezado correspondiente.

2.9. Button

Este elemento mostrará un botón que, según su tipo, tendrá un color que indica diferentes estados:

Tipo de botón	Descripción
primary	Botón azul predeterminado
success	Botón verde
warning	Botón naranja
danger	Botón rojo
muted	Botón gris

Nota: Para obtener una buena comprensión de los elementos compatibles con Custom UI, por favor visita nuestro Centro de Desarrolladores.

Ahora puedes proceder a crear la UI, como lo requieras, con los elementos presentados arriba. Para hacerlo, haz clic en la opción de editor de código del widget:

Como se mencionó en la introducción de este artículo, este ejemplo se basa en un escenario en el que necesitamos enviar el nombre, apellido y fecha de inicio de sesión de un usuario al contexto de una variable, por lo que se usaron tres campos diferentes.

Antes de guardar el código, hay algunas cosas que deben tenerse en cuenta antes de configurar las acciones (el siguiente paso de la guía):

El atributo id de cada campo de entrada debe coincidir con el nombre de la variable que deseas enviar a Ubidots.
El valor del atributo click debe ser la etiqueta de la acción.

Pega tu XML en el editor de código, luego haz clic en guardar.

3. Configurar las Acciones

Haz clic en la opción "acciones" que se muestra a continuación:

Aparecerá el siguiente modal. Allí tendrás que configurar estos ajustes:

Label: Cualquier nombre para identificar la acción activada por el botón del widget. Esta etiqueta debe coincidir con el valor del atributo click del botón (como se mencionó anteriormente). Esto significa que si el atributo click de tu botón está configurado como "receive_data", entonces la etiqueta de las acciones también debe ser "receive_data".
On click: Esta opción selecciona la acción que se activará al hacer clic en el botón. Para este ejemplo en particular, se está utilizando el webhook de disparo; sin embargo, elige la opción que coincida con tus requisitos.
URL: Esta es la URL a la que se enviará la solicitud HTTP.
Headers: Configura los encabezados HTTP según los requisitos del punto final que estás solicitando.
*Payload: Dado que este ejemplo trata de enviar datos a Ubidots, la carga contiene las variables que deben ser enviadas; sin embargo, si estás utilizando el método GET, no se necesitará ninguna carga.

*Configuración del campo Payload: Es importante tener en cuenta que, dado que esta carga necesita ser llenada con los valores de los campos input del widget, se necesita la notación ##{{}} para capturar los datos de dichos campos.

Además, las variables a enviar deben tener los mismos nombres que el id del campo de entrada. Esto significa que si deseas enviar datos desde un campo de entrada cuyo ID es "temperature", entonces la clave correspondiente en la carga también debe ser "temperature", de esa manera, cuando se presione el botón, el valor de "temperature" en el campo de entrada se enviará a la URL configurada del webhook.

Finalmente, haz clic en el botón "aceptar" para guardar la configuración actual.

4. Características adicionales

Puedes personalizar la apariencia de tu widget de Custom UI en la pestaña "apariencia" de la configuración haciendo lo siguiente:

Nombrando tu widget de Custom UI.
Configurando el padding para crear espacio alrededor del contenido del elemento.
Estableciendo un color de fondo.
Seleccionando una imagen de fondo.
Ingresando un estilo personalizado para tu widget.

5. Retroalimentación y sugerencias

No dudes en hacer preguntas o sugerencias en nuestro foro de la comunidad, o contactarnos a través de support@ubidots.com.