Widgets de entrada

Usa widgets de entrada para administrar entradas de usuario como clics y entradas de texto.

Botón Widget de botón:

Los usuarios hacen clic en botones para realizar acciones, como enviar un formulario o un correo electrónico.

Uso

Arrastra un botón hasta la página y usa el Editor de propiedades para configurar su texto, apariencia y función.

Flujos de trabajo comunes

  • En el Editor de propiedades, establece acciones para generar respuestas a eventos, como cuando un usuario hace clic en un botón (el evento onClick).
  • Vincula el texto de la etiqueta a una fuente de datos o secuencia de comandos.

Aplica estilos

Usa el selector de tema en la barra de acción para controlar la apariencia del botón.

Información adicional

En la API de Widgets, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Ejemplos

Muchas muestras y plantillas usan botones.

Etiqueta Widget de etiqueta

Usa los widgets de etiqueta para agregar etiquetas de texto a los objetos en una página.

Uso

Arrastra una etiqueta hasta la página y usa el Editor de propiedades para configurar su texto y apariencia.

Flujos de trabajo comunes

  • Proporciona un título para una imagen.
  • Vincula la propiedad de texto de la etiqueta a una fuente de datos.

Aplica estilos

Usa el selector de temas en la barra de acción para controlar la apariencia de la etiqueta. Puedes personalizar aún más el tipo y tamaño de fuente.

Información adicional

La API de Widgets tiene más información sobre los estilos, propiedades, métodos y eventos de este widget.

Ejemplos

Muchas muestras y plantillas usan etiquetas.

Cuadro de texto Widget de cuadro de texto

Usa el widget de cuadro de texto para proporcionar un lugar a los usuarios donde ingresar y editar texto.

Uso

Arrastra un cuadro de texto a la página y usa el Editor de propiedades para configurar su etiqueta, apariencia y valor inicial.

Flujos de trabajo comunes

  • Proporciona un lugar para que los usuarios ingresen texto.
  • Muestra al usuario un valor de texto predeterminado, pero editable.
  • Vincula el valor inicial a una fuente de datos.

Aplica estilos

Usa el selector de temas en la barra de acciones para elegir entre diferentes apariencias, incluidas algunas con el ícono de búsqueda.

Ejemplos

La plantilla de Galería de materiales tiene varios cuadros de texto.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Área de texto Widget de área de texto

Usa el widget de área de texto para proporcionar un campo grande de desplazamiento en el que el usuario pueda ingresar texto.

Uso

Arrastra un área de texto a la página y usa el Editor de propiedades para configurar su texto y apariencia.

Flujos de trabajo comunes

  • Permite al usuario ingresar un valor de texto largo y de desplazamiento.
  • Vincula la propiedad de texto de la etiqueta a una fuente de datos.

Aplica estilos

Usa el selector de temas en la barra de acción para controlar la apariencia del área de texto.

Ejemplos

La plantilla de la Galería de materiales tiene varias áreas de texto.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Casilla de verificación Widget de casilla de verificación

Usa un widget de casilla de verificación para proporcionar a los usuarios una opción binaria de sí o no.

Uso

Arrastra una casilla de verificación a la página y usa el Editor de propiedades para configurar su etiqueta y valor inicial.

Flujos de trabajo comunes

  • Permite al usuario habilitar o inhabilitar una configuración.
  • Vincula un valor para mostrar el estado de una función sí o no determinada.

Aplica estilos

Usa el selector de temas en la barra de acción para mostrar el widget como una casilla de verificación o un control deslizante.

Ejemplos

La plantilla de la Galería de materiales tiene varias casillas de verificación.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Menú desplegable Widget de menú desplegable

Usa el widget de menú desplegable para permitir que los usuarios elijan entre una lista de opciones. Son útiles a la hora de asignar un valor de un conjunto de valores posibles o para establecer un extremo de relación.

Uso

Arrastra un widget de menú desplegable hasta la página y usa el Editor de propiedades para configurar sus opciones.

Flujos de trabajo comunes

  • Permite al usuario elegir una de varias opciones.
  • Propaga una lista desplegable con elementos de un modelo de datos.

Estas son propiedades importantes para los widgets de menú desplegable:

Propiedad Descripción
value El valor asignado a la propiedad de vinculación de datos, en función de la selección del usuario del menú desplegable
options Un arreglo de representaciones de string de opciones que conforman el contenido del menú desplegable
names Un arreglo de strings que se muestra en lugar de las strings predeterminadas de options. El arreglo debe tener el mismo largo que options
allowNull Una casilla de verificación que, si se marca, establece el value inicial del menú desplegable en null
nullItemName Una string mostrada para el valor nulo del menú desplegable, que con frecuencia se usa como mensajes sobre las selecciones del usuario

A continuación, se muestran algunos ejemplos de vinculaciones de menú desplegable:

En este claro ejemplo, se permite a los usuarios elegir un FavoriteColor de una lista de Colors representada por una proyección de la propiedad ColorNames de la lista.

  • valor: @datasource.item.FavoriteColor
  • opciones: @datasources.Color.items
  • nombres: @datasources.Color.items..ColorNames

En este ejemplo, se permite a los usuarios asignar el campo Currency a una de las divisas en la lista de su propiedad possibleValues.

  • valor: @datasource.item.Currency
  • opciones: @datasource.model.fields.Currency.possibleValues

En este ejemplo, se permite a los usuarios vincular InternetSpeed a una expresión de JavaScript que consiste de un literal de arreglo.

  • valor: @datasource.item.InternetSpeed
  • opciones: ["Google Fiber", "Cable Modem", "DSL", "Dial up"];

Aplica estilos

Usa el selector de tema en la barra de acción para controlar la apariencia del menú desplegable.

Ejemplos

La plantilla de la Galería de materiales usa widgets de menú desplegable.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Cuadro de fecha Widget de cuadro de fecha

Usa el widget de cuadro de fecha para permitir que los usuarios ingresen fechas. Los usuarios pueden escribir de forma manual una fecha o hacer clic en el ícono de calendario para mostrar un selector de fecha.

Uso

Arrastra el widget de cuadro de fecha a la página y usa el Editor de propiedades para configurar sus opciones, incluidos el formato de fecha y la zona horaria.

Flujos de trabajo comunes

  • Habilita al usuario a ingresar fechas en tablas, formularios y áreas de texto.

Aplica estilos

Usa el selector de temas en la barra de acción para controlar la apariencia del cuadro de fecha.

Ejemplos

La plantilla de Aprobación de viajes incluye varios cuadros de fecha.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Grupo de botones de selección Widget de grupo de botones de selección

Usa el widget del grupo de botones de selección para permitir a los usuarios elegir una de varias opciones preconfiguradas.

Uso

Arrastra un widget de botones de selección a la página y usa el Editor de propiedades para configurar sus valores y opciones.

Flujos de trabajo comunes

Los grupos de botones de selección permiten a los usuarios seleccionar un value de un arreglo de options.

Aplica estilos

Usa el selector de temas en la barra de acción para controlar si el widget se muestra de forma horizontal o vertical.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Calificación por estrellas Widget de calificación por estrellas

Usa el widget de calificación por estrellas para permitir que los usuarios apliquen una calificación a otro objeto en la página.

Uso

Arrastra un widget de calificación por estrellas hasta la página y usa el Editor de propiedades para configurar sus opciones, incluida la cantidad total de estrellas y cuántas se seleccionan cuando se carga el widget.

Flujos de trabajo comunes

  • Establece la cantidad de estrellas y vincula el valor a una fuente de datos.

Aplica estilos

Usa el selector de temas en la barra de acción para elegir si el widget debe usar estrellas o corazones.

Ejemplos

La plantilla de Calificaciones del proveedor usa calificaciones por estrellas.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Control deslizante Widget de control deslizante

Usa el widget de control deslizante para permitir que los usuarios seleccionen entre un rango de valores.

Uso

Arrastra el widget de control deslizante hasta la página y usa el Editor de propiedades para configurar sus opciones, incluido su rango de valores.

Flujos de trabajo comunes

  • Establece el rango de valores y vincúlalo a las fuentes de datos.

Aplica estilos

No hay opciones de estilos para este widget.

Ejemplos

La plantilla de Galería de materiales tiene un widget de control deslizante.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Cuadro de sugerencias Widget de caja de sugerencias

Usa el widget de cuadro de sugerencias para ayudar a los usuarios a completar un campo de texto con valores que configuraste con anterioridad.

Uso

Arrastra un widget de cuadro de sugerencias a la página y usa el Editor de propiedades para configurar sus opciones.

Flujos de trabajo comunes

  • Usa la propiedad value para especificar el valor y options a fin de proporcionar los valores sugeridos. El tipo de elementos en options debe coincidir con el tipo de elementos en value.
  • Puedes configurar el cuadro de sugerencias para que obtenga sus sugerencias de un campo con valores posibles, una relación o a un registro de un modelo existente. Por el momento, esto se puede hacer solo con la IU provista en el campo de sugerencia de texto.

Aplica estilos

Usa el selector de temas en la barra de acción para controlar la apariencia del cuadro de sugerencias.

Ejemplos

La plantilla de Calificaciones del proveedor usa el widget de cuadro de sugerencias.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Editor de texto Widget de editor de textos

Usa el widget de editor de texto para proporcionar un editor de texto en el que los usuarios pueden escribir y dar formato a entradas de texto más largas.

Uso

Arrastra un widget de editor de texto a la página y usa el Editor de propiedades para configurar sus opciones.

Flujos de trabajo comunes

  • Permite al usuario ingresar un valor de texto largo y de desplazamiento.
  • Vincula la propiedad de texto de la etiqueta a una fuente de datos.

Aplica estilos

Usa el selector de temas en la barra de acción para controlar la apariencia del editor de textos.

Ejemplos

La plantilla de Calificaciones del proveedor usa el widget del editor de textos.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Selector múltiple Widget de selector múltiple

Permite a los usuarios seleccionar elementos múltiples de un arreglo de opciones con el widget de selector múltiple.

Uso

Agrega un widget de selector múltiple a la página y usa el Editor de propiedades para configurar sus opciones.

Para establecer las opciones que un usuario de la app puede seleccionar, configura la propiedad options. Haz clic en options y, en el editor de código de vinculación, ingresa uno de los elementos siguientes:

  • un arreglo de opciones, como ["east", "north", "south", "west"]
  • una vinculación a items en un campo de fuente de datos con la sintaxis siguiente:

    @datasource.items..field-name

    .. es el operador de proyecciones que te permite acceder a una lista compilada de valores para un campo. Por ejemplo, si un modelo tiene un campo llamado Región, puedes establecer las opciones de selector múltiple en todos los valores para Región en todos los registros con la vinculación @datasource.items..Region. Si la Región de un registro es “este” y la de otro “norte, sur”, entonces, el usuario puede seleccionar “este”, “norte” y “sur” como opciones en la app.

Para almacenar los valores que el usuario selecciona, configura la propiedad values con una vinculación de datos. Si el usuario selecciona múltiples strings, debes transformarlas en un arreglo. Una forma de crear un arreglo es con la transformación de vinculación strToArray:

@datasource.item.field-name#strToArray()

El tipo de elementos de options debe coincidir con el tipo de elementos en values.

Flujo de trabajo común

  • Se usa para asignar valores a campos repetidos o establecer una relación de extremo de varios.

Aplica estilos

Para controlar el aspecto del widget de selector múltiple, usa el selector de temas en la barra de acción.

Ejemplos

El instructivo de selección de opciones te enseña a configurar un widget de selector. La plantilla de Calificaciones del proveedor usa el widget de selector múltiple.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Selector de Drive Widget de selector de Drive

Usa el widget de selector de Drive para permitir que los usuarios encuentren archivos en sus unidades y los suban a tu app.

Uso

  1. Configura tu app para que se ejecute como usuario.
  2. Arrastra un widget de selector de Drive a la página y usa el Editor de propiedades para configurar sus opciones.

Flujos de trabajo comunes

El widget muestra la información siguiente:

  • Nombre del archivo
  • URL de archivos que puedes usar para vincular al archivo
  • ID de archivos que puedes usar para obtener un objeto de archivo. Esto te permite llamar a operaciones como las que se muestran a continuación:
    • File.setOwner(user)
    • File.setStarred(starred)
    • File.setTrashed(trashed)
    • File.makeCopy()
    • File.getDownloadUrl()

Debes configurar tu app para que se ejecute como usuario a fin de usar este widget.

Por configuración predeterminada, el widget de selector de Drive permite a los usuarios seleccionar un archivo en su Google Drive o en su computadora para subir a Google Drive. El selector de Drive incluye una propiedad views en el grupo de propiedades del selector de Drive que agrega pestañas adicionales a la vista. Por ejemplo, agrega FOLDERS a la propiedad views para incluir una pestaña en el selector de Drive que muestra las carpetas de Google Drive de un usuario; agrega IMAGE_SEARCH a fin de agregar una pestaña de búsqueda de imágenes de Google y agrega SPREADSHEETS si quieres agregar una pestaña que muestra solo las Hojas de cálculo de Google Drive del usuario. Para obtener más información sobre las vistas en el widget del selector de Drive, consulta la Referencia de clases de selector.

Puedes usar la propiedad features en el grupo de propiedades del selector de Drive para modificar el comportamiento de las vistas. Por ejemplo, agrega MULTISELECT_ENABLED para permitir que el usuario seleccione más de un elemento a la vez. Para obtener más información sobre las funciones en el widget del selector de Drive, consulta la Referencia de clases de selector.

Si agregas la vista de carpetas, el selector de Drive recuerda la última carpeta que el usuario vio y la muestra cuando el usuario hace clic en el botón del selector de Drive otra vez. Los usuarios pueden navegar de forma directa hacia una carpeta si hacen clic en cualquier nombre de carpeta que aparece en la ruta de navegación en la parte superior del widget.

Aplica estilos

Usa el selector de temas en la barra de acción para controlar la apariencia del selector de Drive.

Ejemplos

La plantilla de Calificaciones del proveedor usa el widget del selector de Drive.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.

Selector de usuarios Widget de selector de usuario

El widget de selector de usuarios permite que los usuarios encuentren otras personas en tu organización. Mientras el usuario escribe, el widget proporciona sugerencias de autocompletado con foto, nombre y dirección de correo electrónico.

Uso

  1. Agrega un modelo de directorio a tu app.
  2. Arrastra un widget de selector de usuarios a la página y usa el Editor de propiedades para configurar sus opciones.

Flujos de trabajo comunes

  • Vincula la dirección de correo electrónico de la persona seleccionada con un campo en un modelo.

Aplica estilos

Usa el selector de temas en la barra de acción para controlar la apariencia del selector de usuarios.

Ejemplos

La plantilla de Aprobación de documentos usa el widget del selector de usuarios.

Información adicional

En la API de Widget, encontrarás más información sobre estilos, propiedades, métodos y eventos.