Compartir a través de


Crear una aplicación de lienzo a partir de una imagen

El recorrido de creación de una aplicación generalmente implica una fase de diseño para planificar cómo debería verse la aplicación. Ya sea que el diseño se base en un formulario en papel existente, un dibujo en pizarra o incluso una imagen de una aplicación heredada, puede llevar una cantidad considerable de tiempo crear la aplicación desde cero.

Con la característica De la imagen a la aplicación, ahora puede crear una aplicación a partir de un diseño visual y conectarla a los datos a través de unos simples pasos en la interfaz guiada. Esta característica facilita que los creadores de todos los niveles puedan iniciar el proceso de desarrollo de la aplicación.

Nota

  • El estilo de los componentes de la aplicación, como fuentes y colores, se basará en el tema Office Blue en Power Apps.
  • Si desea que se conserven los estilos de diseño exactos cuando cree su aplicación, piense en crear una aplicación de lienzo de Figma.
  • Power Apps no persiste la imagen que carga. La imagen cargada solo se procesa en memoria para generar la aplicación.

Requisitos previos

  • Una licencia de Power Apps. Si no tiene una licencia de Power Apps, puede  suscribirse para obtener una gratuita.
  • Si está utilizando su propia imagen, la extensión del archivo de imagen debe ser .jpg o .png, y el tamaño del archivo de 4 MB como máximo. Además, la imagen debe contener un formulario de una página claramente legible con un color de fondo claro. Para obtener los mejores resultados, edite su imagen para que tenga un fondo blanco y un alto contraste.

Crear una aplicación

  1. Inicie sesión en  Power Apps.

  2. Seleccione +Crear en el panel izquierdo.

    Seleccione Crear en el panel izquierdo

  3. Seleccione Imagen.

    Seleccione Imagen (versión preliminar) de las fichas disponibles.

  4. Revise los ejemplos de imágenes recomendadas y consejos. Para obtener la mejor experiencia, asegúrese de que su imagen cumpla con estas recomendaciones. Cuando haya acabado, seleccione el motón Siguiente.

  5. Escriba un nombre para la aplicación.

  6. Cargue su propia imagen. Si no tiene una imagen lista, también puede usar una de las imágenes de muestra disponibles.

    Nota

    Cuando utilice su propia imagen, asegúrese de que cumpla con los requisitos de imagen mencionados en los Requisitos de imagen.

    Por ejemplo, aquí hay dos imágenes de muestra con calidades aceptables e inaceptables:

    Calidad aceptable Calidad inaceptable
    Ejemplo de imagen dibujada a mano con calidad aceptable. Ejemplo de imagen dibujada a mano con calidad inaceptable.
  7. Según las dimensiones de su imagen, el formato (tablet o teléfono) se seleccionará automáticamente. Para obtener los mejores resultados, le recomendamos que mantenga el formato sugerido. El uso del formato sugerido asegurará la coincidencia más cercana entre su imagen de entrada y la aplicación final. Seleccione Siguiente.

    Proporcione el nombre de la imagen, el tipo de imagen y el diseño.

  8. Su imagen se etiquetará automáticamente en función de los componentes que se identificaron. Por ejemplo, en la siguiente imagen de muestra, el cuadro que dice "Introduzca su nombre de pila" se identificó como un control de Entrada de texto.

    Puede dibujar una nueva etiqueta seleccionando y arrastrando para seleccionar la región que abarca el componente. Luego, elija el tipo de componente con el que desea asociar la nueva etiqueta.

    Para editar una etiqueta existente o eliminarla, seleccione la etiqueta. Luego puede asignar un componente diferente para esa etiqueta o ajustar las dimensiones de la etiqueta arrastrando las esquinas para cambiar el tamaño. Si desea eliminar la etiqueta, seleccione Eliminar etiqueta.

    Diseñe componentes para la aplicación seleccionando etiquetas o creando una nueva etiqueta y luego eligiendo el control de etiquetas.

    Sugerencia

    Seleccione la pestaña Instrucciones en el lado derecho de la pantalla para obtener más información sobre los diferentes tipos de componentes y cómo etiquetar con precisión cada uno.

    Una vez que haya revisado las etiquetas y se haya asegurado de que cada componente esté etiquetado correctamente, seleccione Siguiente.

  9. El siguiente paso consiste en configurar los datos. Para obtener la mejor experiencia, le recomendamos que conecte su aplicación a un origen de datos seleccionando Conectarse a una tabla de Dataverse*. Si elige esta opción y selecciona Siguiente, se le guiará en la siguiente etapa para seleccionar una tabla Dataverse existente que tenga y mapear la campos de la imagen a las columnas de esa tabla o cree una nueva tabla en Dataverse y agregue columnas basadas en los campos de formulario en su imagen, y su aplicación contendrá un componente de formulario que está conectado a su tabla de Dataverse.

    Si no desea conectarse a Dataverse, seleccione Omitir esto por ahora. Si elige esta opción y selecciona Crear, su aplicación se creará tal cual, lo que significa que los componentes que etiquetó en el paso anterior se generarán directamente. No se colocarán en un componente de formulario y su aplicación no se conectará a los datos.

    Elija conectarse a Dataverse o continúe sin crear una tabla ahora.

    Si elige omitir la la conexión a Dataverse, seleccione Crear y la aplicación se creará para usted. Más tarde, puede agregar conexiones de datos a su aplicación para conectar la aplicación con sus datos.

    Nota

    La opción para conectarse a una tabla de Dataverse estará deshabilitada si no tiene Dataverse en su entorno.

  10. Si eligió conectarse a una tabla de Dataverse y seleccionó Crear una tabla nueva o una tabla existente, ahora puede editar los detalles de la tabla y la columna. Cada etiqueta corresponde a una columna de datos basada en los campos de formulario que se identificaron en su imagen.

    Seleccione una etiqueta para modificar las propiedades de la columna, como Nombre para mostrar, Nombre y Tipo de datos. Para eliminar una columna existente, seleccione la etiqueta y luego seleccione Eliminar columna.

    Diseñe la tabla, cambie las columnas y sus propiedades.

    Puede agregar una columna de datos dibujando una nueva etiqueta y configurando las propiedades. Cuando se etiquetan columnas, la mayoría de las veces dibujará una etiqueta alrededor de dos cosas: una etiqueta y algo en lo que el usuario escribirá datos, como una entrada de texto.

    Sugerencia

    Seleccione Propiedades de la tabla en el lado derecho de la pantalla para ver y editar las propiedades de su nueva tabla.

    Al seleccionar Siguiente, podrá revisar la estructura de tablas y columnas.

    Revise y confirme la estructura del esquema de la tabla y la columna.

    Una vez que haya completado la revisión, seleccione Crear para crear la aplicación. La creación de la aplicación puede tardar uno o dos minutos.

  11. Una vez que se crea la aplicación, su nueva aplicación se abrirá en Power Apps Studio para que pueda continuar creando y personalizando su aplicación.

    La aplicación ha sido creada y abierta en Power Apps Studio para que usted pueda personalizarla.

    Si elige crear una nueva tabla en Dataverse, su formulario se conectará automáticamente a su nueva tabla.

    La tabla se ha creado y agregado a la aplicación.

  12. Puede continuar creando y personalizando su aplicación agregando más componentes o modificando las propiedades de estilo.

    Estos son algunos de los siguientes pasos comunes para llevar su aplicación al siguiente nivel:

    1. Agregue una nueva pantalla nombrada Screen2 a su aplicación y una galería para mostrar los registros. Establezca el origen de datos de la galería en su nueva tabla de Dataverse.
    2. En la pantalla que contiene su formulario, agregue un botón (si aún no tiene uno) para enviar los datos del formulario. Establezca la fórmula de la propiedad OnSelect a SubmitForm(Form1).
    3. Seleccione el formulario, luego seleccione la pestaña Avanzado en el lado derecho de la pantalla y establezca la propiedad OnSuccess a Navigate(Screen2). De esta manera, después de que los datos del formulario se hayan enviado con éxito, la aplicación navegará a la pantalla que contiene la galería para mostrar los registros.
    4. Seleccione Reproducir en la parte superior derecha de la pantalla para obtener una versión preliminar de su aplicación. Rellene el formulario y seleccione Enviar para enviar el formulario. Su nuevo registro aparecerá en la pantalla de la galería.
  13. Guarde y publique la aplicación.

Requisitos de imagen

  • La imagen que desea cargar debe tener la extensión de archivo .jpg o .png. Si tiene una imagen de diseño con otra extensión de archivo, guarde el archivo de imagen con la extensión de archivo .jpg o .png para poder usarlo con esta característica.
  • El tamaño de la imagen debe ser menor de 4 MB.
  • Si está utilizando capturas de pantalla o bocetos digitales, modifique el fondo para que sea claro, de color puro si el blanco no está disponible.
  • Si hace una foto, use un contraste más alto o hágala más brillante. Asegúrese de que la parte que quiere etiquetar sea clara y brillante.
  • Si hace una foto con una cámara o un teléfono, use un contraste más alto para favorecer los fondos claros. Puede usar cualquier aplicación de edición de fotos disponible para editar el contraste de la imagen.
  • Si usa imágenes dibujadas a mano, intente usar un bloc de dibujo blanco sin líneas.

Limitaciones

Consulte también