Compartir a través de

Personalizar las plantillas de la aplicación de ejemplo Hitos

En este artículo, aprenderá a personalizar las plantillas de aplicaciones de muestra. Por ejemplo, es posible que deba cambiar el logotipo de la empresa, actualizar los datos dentro de las plantillas de aplicaciones de muestra para que se ajusten a los requisitos de su negocio, agregar o eliminar controles en las pantallas para ampliar la aplicación.

Requisitos previos

Instalar una plantilla de aplicación de ejemplo Más detalles: Usar plantillas de aplicaciones de muestra en Microsoft Teams.

Nota

  • Las secciones de este artículo usan una de las plantillas de aplicaciones de muestra disponibles como ejemplo. Las tablas, controles, pantallas y otros componentes de las aplicaciones pueden variar según la aplicación que haya instalado. Sea prudente al personalizar la aplicación que seleccione.
  • Lea Actualizaciones de la plantilla de la aplicación de ejemplo antes de personalizar las plantillas de las aplicaciones de ejemplo para comprender el impacto de las nuevas versiones en las versiones de la plantilla la aplicación de ejemplo.

Abrir plantillas de la aplicación de ejemplo en Power Apps Studio

Para empezar a personalizar las plantillas de la aplicación de ejemplo, el primer paso es abrir la aplicación dentro de Power Apps Studio.

  1. Inicie sesión en Teams.

  2. Seleccione Más aplicaciones agregadas. (Más aplicaciones agregadas).

  3. Seleccione Power Apps.

    Seleccione la aplicación Power Apps.

  4. Seleccione la pestaña Crear.

  5. Seleccione el entorno de equipo donde instaló la plantilla de la aplicación de muestra.

  6. Seleccione Aplicaciones instaladas.

  7. Seleccione la plantilla de la aplicación de ejemplo que quiera instalar.

  8. Si se le solicita, seleccione la ubicación.

Más información: Editar una aplicación en Power Apps Studio

Quitar datos de ejemplo

Cuando instala plantillas de aplicaciones de ejemplo, es posible que las tablas se rellenen previamente con datos de ejemplo. La siguiente tabla enumera las plantillas de aplicaciones de ejemplo y la lista de tablas con los datos de ejemplo que se eliminarán:

Para eliminar datos de las plantillas de las aplicaciones de ejemplo:

  1. Abra la aplicación de ejemplo (por ejemplo, Gestionar inspecciones) en Power Apps Studio.

  2. Seleccione Datos en el panel izquierdo.

  3. Seleccione Datos - puntos suspensivos. junto al nombre de la tabla (por ejemplo, Tarea de inspección de área para la aplicación Administrar inspecciones).

  4. Seleccione Editar datos.

  5. Elimine todas las filas que contienen datos de muestra.

    Eliminar filas.

  6. Cierre el editor visual.

  7. Repita los pasos anteriores para las tablas restantes.

Agregar su logo a la pantalla de carga

  1. Abra la plantilla de la aplicación de ejemplo (por ejemplo, Inspección) en Power Apps Studio.

  2. En el panel izquierdo, seleccione Vista de árbol.

  3. Si aún no está seleccionado, seleccione Pantalla de aterrizaje.

  4. Seleccione Insertar.

  5. Seleccione el control Imagen en Medios.

    Agregar imagen.

  6. Desde el panel de propiedades en el lado derecho, seleccione el menú desplegable Imagen y luego seleccione + Agregar un archivo de imagen.

    Agregar archivo de imagen.

  7. Seleccione la imagen para el logotipo de su empresa y luego seleccione Abrir.

  8. Posición y control de tamaño de la imagen a la posición que desee en la pantalla de carga.

    Logotipo de la empresa.

Cambiar el texto de la pantalla de bienvenida

Nota

El texto de bienvenida de la pantalla de bienvenida de la aplicación Inspección utiliza una fórmula que contiene variables globales para mostrar correctamente la terminología deseada para las inspecciones y los artículos que se inspeccionan. Tenga cuidado al cambiar esta fórmula.

  1. Abra la plantilla de la aplicación de ejemplo (por ejemplo, Inspección) en Power Apps Studio.

  2. Seleccione el control de etiqueta de texto con el texto de saludo Me alegra tenerle aquí.

    La fórmula para el texto del saludo está en este formato:

    "Glad to have you here, we are ready for you to " & If(Lower(gblWorkType)="inspection", "inspect", Lower(gblWorkType)) & Switch(
Left(
    Lower(areaLabel),
    1
),
"a",
" an ",
"e",
" an ",
"i",
" an ",
"o",
" an ",
"u",
" an ",
" a "
) & Lower(areaLabel)

  3. Seleccione la barra de fórmulas.

  4. Seleccione la frase Me alegra tenerle aquí.

  5. Actualice el texto de saludo, como Nos alegra que esté aquí.

    "We are happy that you are here, we are ready for you to " & If(Lower(gblWorkType)="inspection", "inspect", Lower(gblWorkType)) & Switch(
Left(
    Lower(areaLabel),
    1
),
"a",
" an ",
"e",
" an ",
"i",
" an ",
"o",
" an ",
"u",
" an ",
" a "
) & Lower(areaLabel)

    Actualizar el texto del saludo en la fórmula.

Cambie el color de fondo de la pantalla

Nota

La aplicación Inspection aprovecha las variables temáticas globales para garantizar una experiencia de usuario coherente. Si modifica un relleno de pantalla, la pantalla modificada ya no usará el tema de la aplicación estándar.

  1. Abra la plantilla de la aplicación de ejemplo (por ejemplo, Inspección) en Power Apps Studio.

  2. En el panel izquierdo, seleccione Vista de árbol.

  3. Seleccione Pantalla de bienvenida en la vista de árbol.

  4. Seleccione Rellenar en la lista de propiedades de la parte superior izquierda.

  5. En la barra de fórmulas, reemplace la fórmula con el color que desee.

    El color de relleno de fondo de la pantalla se establecerá en el color de fondo seleccionado.

    Cambiar el color del fondo.

Editar datos en masa

Si desea editar rápidamente los datos en la aplicación, puede abrir la tabla y modificar o eliminar datos.

Precaución

Las plantillas de aplicaciones de ejemplo utilizan varias tablas relacionadas, como las ubicaciones de inspección de área y los tipos de ubicación de inspección de área para la aplicación de inspección. Tenga cuidado al eliminar registros de las tablas sin verificar la relación y las dependencias de los datos.

  1. Abra la plantilla de la aplicación de ejemplo (por ejemplo, Inspección) en Power Apps Studio.

  2. Seleccione Datos en el panel izquierdo.

  3. Seleccione Datos - puntos suspensivos. junto al nombre de la tabla (por ejemplo, Tipos de ubicación de la inspección de área para la aplicación Inspección).

  4. Seleccione la celda dentro del Editor de Visual, por ejemplo Comida en la columna Nombre.

  5. Reemplace el texto con el valor que desee.

  6. Cierre el editor visual.

    Los datos de la aplicación deben reflejar el valor actualizado, como el nombre de la ubicación en este ejemplo.

    Editar datos en masa.

Agregar una columna a la aplicación

Importante

Los pasos de personalización de la aplicación Inspection en esta sección cubren algunas de las opciones de configuración avanzadas. Este ejemplo requiere que esté familiarizado con Power Apps Studio, se sienta cómodo modificando fórmulas y trabajando con controles como contenedores.

Considere un escenario en el que tiene varias tiendas y desea asociar ubicaciones e inspecciones con tiendas específicas.

Agregar la columna de texto del nombre de la tienda a la tabla de ubicaciones

  1. Abra la aplicación Administrar inspecciones en Power Apps Studio.

  2. Seleccione Datos en el panel izquierdo.

  3. Seleccione Datos - puntos suspensivos. junto al nombre de la tabla (por ejemplo, Ubicaciones de la inspección de área para la aplicación Administrar inspecciones).

  4. Seleccione Agregar columna.

  5. Introduzca un Nombre como "Nombre de la tienda".

  6. Seleccione Crear.

  7. Cierre el editor visual.

    Agregar columna de nombre de tienda.

Agregar la columna del nombre de la tienda al formulario de ubicación

  1. Seleccione la Pantalla ubicaciones.

    Propina

    Puede ignorar el error sobre el uso de los conectores de vista previa en esta aplicación.

  2. En Vista de árbol, busque btnArea_GroupedAreas.

  3. En las Áreas agrupadas en el formulario, arrastre el borde izquierdo para que quede paralelo al borde del campo Título.

    Nota

    El control de campo Áreas agrupadas está en un contenedor. Por lo tanto, el área seleccionada puede aparecer en una parte de la pantalla diferente a donde ve la columna. Arrastrar el área seleccionada cambia el tamaño de la columna.

  4. Seleccione Insertar en el panel de la izquierda.

  5. Seleccione el control Etiqueta.

  6. Posicione la Etiqueta de modo que esté alineada horizontalmente con Áreas agrupadas y verticalmente con el Tipo de área.

    Posición de la etiqueta de control.

  7. Seleccione Texto en la lista de propiedades de la parte superior izquierda.

  8. Seleccione la barra de fórmulas.

  9. Cambie la fórmula a Nombre de la tienda.

  10. Seleccione Insertar en el panel de la izquierda.

  11. Seleccione el control Cuadro de texto.

  12. Arrastre el control del cuadro de texto para alinearlo horizontalmente con Área agrupada y verticalmente con Tipo de área.

  13. Seleccione Valor en la lista de propiedades de la parte superior izquierda.

  14. En la barra de fórmulas, reemplace el valor actual con gblLocation.'Store Name'

  15. Seleccione ColorBackground en la lista de propiedades de la parte superior izquierda.

  16. En la barra de fórmulas, introduzca "White".

    Propiedad ColorBackground.

  17. Seleccione Modo de presentación en la lista de propiedades de la parte superior izquierda.

  18. En la barra de fórmulas, introduzca "Editar" si aún no está presente.

  19. Mantenga pulsada la Tecla Alt en su teclado y seleccione Editar.

    Editar con la tecla alt presionada.

  20. En el panel izquierdo, seleccione Vista de árbol.

  21. Busque btnAreaDetails_Save y seleccione el control devuelto.

  22. Expanda la barra de fórmulas.

  23. Al final de la línea 17, agregue una coma y esta fórmula:

    'Store Name':Microsoft_CoreControls_TextBox1.Value

    Esta sección de la fórmula debería parecerse a lo siguiente:

    {
	msft_name: txtArea_EditTitle.Text,
	'Location Type': cmbAreaDetails_AreaType.Selected,
	'Primary Image': picArea_UploadedImage.Image, 'Store Name':Microsoft_CoreControls_TextBox1.Value
}

    Nota

    Si la fórmula actualizada muestra un error, verifique el nombre del cuadro de texto para el nombre de la tienda. Por ejemplo, puede ser Microsoft_CoreControls_TextBox2 en lugar de Microsoft_CoreControls_TextBox1, dependiendo de sus cambios.

  24. Seleccione el control de etiqueta agregado en el paso 5.

  25. Seleccione la propiedad Y en la lista de propiedades de la parte superior izquierda.

  26. Seleccione la barra de fórmulas.

  27. Cambie la fórmula a:

    If(gblEditLocation,250,200)

  28. Seleccione el cuadro de texto agregado en el paso 11.

  29. Seleccione la propiedad Y en la lista de propiedades de la parte superior izquierda.

  30. Seleccione la barra de fórmulas.

  31. Cambie la fórmula a:

    If(gblEditLocation,282,232)

  32. Mantenga pulsada la Tecla CTRL en el teclado y seleccione tanto la etiqueta del nombre de la tienda como el cuadro de texto.

  33. Seleccione la propiedad Visible en la lista de propiedades de la parte superior izquierda.

  34. Seleccione la barra de fórmulas.

  35. Cambie la fórmula a:

    If(gblViewInspection, false, true)

    Cambios de posición con la propiedad Y.

Publicar actualizaciones de aplicaciones en Teams

Para guardar y publicar los cambios en la aplicación de muestra:

  1. Seleccione Guardar arriba a la derecha.

  2. Seleccione Publicar a Teams

  3. Seleccione Siguiente.

  4. Para publicar la versión actualizada de una aplicación en una pestaña activa existente, seleccione Guardar + cerrar.
    Para agregar la versión publicada de una aplicación a una nueva pestaña en un canal diferente, seleccione Agregar una pestaña. (Agregar una pestaña) para el canal que desee y luego seleccione Guardar + cerrar.

Más información: Publicar y agregar una aplicación a Teams