Adición de un cuadro de lista, una lista desplegable, un cuadro combinado o botones de selección a una aplicación de lienzo

Muestre una sola columna de datos (por ejemplo, de una tabla de varias columnas) en una aplicación de lienzo para que los usuarios puedan seleccionar uno o varios elementos de una lista.

  • Agregue un cuadro de lista para permitir a los usuarios seleccionar más de una opción.
  • Agregue una lista desplegable o un cuado combinado para que ocupe menos espacio en una pantalla.
  • Agregue un conjunto de botones de selección para obtener un efecto de diseño concreto.

Este tema se centra en los cuadros de listas y botones de selección, pero los mismos principios se aplican a las listas desplegables.

Requisitos previos

  1. Crear una aplicación de lienzo en blanco.
  2. Aprenda a agregar y configurar controles.

Creación de una lista sencilla

  1. Agregue un control Cuadro de lista, denomínelo MyListBox y establezca su propiedad Items en esta expresión:

    ["circle","triangle","rectangle"]

    El diseñador tendrá un aspecto similar al siguiente:

    Pantalla con control Cuadro de lista

  2. En la pestaña Insertar, seleccione Iconos, seleccione el círculo y sitúelo bajo MyListBox:

    Icono de agregar

  3. Agregue un triángulo y un rectángulo y, después, disponga las formas en una fila bajo MyListBox:

    Agregar formas

  4. Defina la propiedad Visible de las formas siguientes con las funciones indicadas a continuación:

    Forma Establecer función de Visible en
    Círculo If("circle" in MyListBox.SelectedItems.Value, true)
    triángulo If("triangle" in MyListBox.SelectedItems.Value, true)
    rectángulo If("rectangle" in MyListBox.SelectedItems.Value, true)
  5. Mientras mantiene presionada la tecla Alt, seleccione una o varias formas en MyListBox.

    Solo se mostrarán aquellas formas que seleccione.

En estos pasos, ha utilizado una expresión para crear una lista de elementos. Esto es aplicable a otros elementos de su negocio. Por ejemplo, puede usar un control Desplegable para mostrar imágenes de productos, descripciones de productos, etc.

Adición de botones de selección

  1. En la pestaña Inicio, seleccione Nueva pantalla y luego En blanco.

  2. En la pestaña Insertar, seleccione Controles y, a continuación, seleccione Radio.

    Agregar botón de radio

  3. Cambie el nombre del control Radio por Choices y establezca la siguiente fórmula para la propiedad Items:
    ["red","green","blue"]

    Cambiar el nombre del control

    Si es necesario, cambie el tamaño del control para mostrar todas las opciones.

  4. En la pestaña Insertar, seleccione Iconos y, a continuación, seleccione el círculo.

  5. Defina la siguiente función para la propiedad Fill del círculo:
    If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

    En esta fórmula, el círculo cambia de color dependiendo de qué botón de selección elija.

  6. Sitúe el círculo bajo el control Radio, como en este ejemplo:

    Mover círculo debajo del control de radio

  7. Mientras mantiene presionada la tecla Alt, seleccione otro botón de selección para cambiar el color del círculo.

Agregar un elemento a una lista existente

  1. Agregue un control Botón y denomínelo "btnReset".

    ¿No sabe cómo agregar, nombrar y configurar un control?

  2. Establezca la propiedad OnSelect en btnReset con esta fórmula:

    ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})
    
  3. Establezca la propiedad Text en btnReset a "Reset".

  4. Agregue un control Cuadro de lista, denomínelo IbItems y establezca su propiedad Items a MyItems.

  5. Mientras mantiene presionada la tecla Alt, seleccione el botón Restablecer.

    Nota

    El cuadro de lista debe llenarse con los elementos de la colección "MyItems".

  6. Organice el cuadro de lista y el botón para que estén alineados verticalmente.

    Botón de cuadro de lista.

  7. Agregar un control Entrada de texto y denominarlo "txtAdd".

  8. Establezca la propiedad Text de txtAdd a "".

  9. Agregue un control Botón y denomínelo "btnAdd".

  10. Establezca la propiedad Text de btnAdd a "Add".

  11. Establezca la propiedad OnSelect de btnAdd con la siguiente fórmula:

    Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
    

    Nota

    • La función de recopilación agregará el texto de la entrada de texto como un elemento en la colección.
    • La función de restablecimiento reiniciará la entrada de texto a su estado predeterminado.
  12. Organice txtAdd y btnAdd para que estén alineados verticalmente debajo de lbItems y btnReset.

    Todos los controles: antes de agregar.

  13. Obtenga una versión preliminar de la aplicación presionando F5.

  14. Agregaue un valor de texto al control de entrada de texto txtAdd.

  1. Presione el botón Agregar.

    Nota

    El cuadro de lista debe llenarse con los elementos de la colección MyItems.

(Opcional) Eliminar un elemento de una lista existente

  1. Agregue un control Botón y denomínelo "btnDelete".

  2. Establezca la propiedad Text de btnDelete a"Delete".

  3. Establezca la propiedad OnSelect de btnDelete con la siguiente fórmula:

    Remove(MyItems, lbItems.Selected)
    
  4. Organice btnDelete para que esté alineada verticalmente debajo de btnReset

    Todos los controles con el botón de eliminar.

  5. Obtenga una versión preliminar de la aplicación presionando F5.

  6. Presione el botón Restablecer para restablecer el cuadro de lista.

  7. Pulse sobre un elemento en el cuadro de lista para seleccionarlo.

  1. Pulse el botón Eliminar para eliminar el elemento.

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).