Aprende a enviar correos electrónicos desde Power Apps sin HTML

Mandar correos en Power Apps es bastante fácil, pero si buscas ir más allá de simple texto y añadir diferentes estilos de fuentes, colores, tamaños y demás entonces necesitaríamos escribir código HTML. Las buenas noticias es que con algo de ingenio esto no es necesario, por lo que hoy vamos a ver una forma simple de enviar correos formateados desde Power Apps usando Microsoft Outlook para generar el HTML y luego usarlo como plantilla.

APP «Requerimientos de TI»

Esta app le permite a un Gerente adquirir equipos de cómputo para sus empleados. Una vez que el Gerente llene una forma con los detalles del empleado, la fecha límite de la solicitud y el equipo que se requiere.

CREANDO UN FORMULARIO DE PETICIONES

Crearemos una nueva lista de SharePoint llamada «Requerimientos de TI» con las siguientes columnas:

  • Nombre del empleado (Texto).
  • Departamento (Elecciones).
  • Posición (Texto).
  • Fecha de inicio (Fecha).
  • Equipo (Elecciones).

Por ahora no te preocupes por incluir alguna ‘lista de objetos falsos’ pues los crearemos al enviar el formulario.

Nombre del empleadoDepartamentoPosiciónFecha de inicioEquipo

A continuación abriremos Power Apps Studio, crearemos una nueva plantilla de app en blanco y la conectaremos a nuestra lista de SharePoint que acabamos de crear. Añadiremos al app todos los campos que se muestran a continuación:

Power Apps correos HTML 1

CREANDO LA PLANTILLA DEL CORREO EN OUTLOOK

Cuando la forma ‘Petición de Equipo’ sea enviada, un correo será enviado al departamento de T/I. Nos interesa que el correo tenga diferentes tamaños de texto, tipos de fuentes, colores y una tabla mostrando los objetos que fueron pedidos. Para enviar un correo formateado en Power Apps como el que se muestra a continuación necesitamos escribir algo de código HTML. Esto nos tomaría algo de tiempo, pero por suerte hay una alternativa más fácil.

Abriremos Outlook y escribiremos un nuevo correo que se vea así:

Iremos a la pestaña de Archivo y en «Guardar como» elegiremos guardarlo como un documento HTML. Con esto hemos logrado generar el código necesario sin necesidad de tener que escribirlo por nuestra cuenta.

VISTA PREVIA DEL CORREO

Iremos al archivo que acabamos de guardar y lo abriremos con el Bloc de Notas o con cualquier editor de texto de nuestra preferencia.

Reemplazaremos todas las comillas en el documento por comillas dobles. Esto es importante ya que Power Apps lee las comillas individuales como el fin de una secuencia de texto en vez de leerlo como HTML.

De vuelta en Power Apps Studio entraremos a nuestro Control de Texto HTML en la pantalla llamado htm_EmailPreview. Copiaremos y pegaremos el código del documento HTML en la propiedad HTMLText y nos aseguraremos de encerrarlo con comillas dobles al inicio y al final.

Power Apps correos HTML 2

Ahora una vista previa del correo es mostrada, pero queremos remover los valores de sobra y mostrar solo los datos que realmente aparecen dentro de la forma. Los encontraremos manualmente y los reemplazaremos dentro de la propiedad HTMLText,

Aparecer en HTML comoReemplazar por
nombre_aqui» & Nombre.Text & «
departamento_aqui» & Dep.Selected.Value & «
posicion_aqui» & Puesto.Text & «
fecha_aqui» & ETA.SelectedDate & «
equipos_aqui» & Equipos.Selected.Value & «

Con esto hemos terminado la parte difícil. La vista previa del correo ahora nos muestra los valores de nuestro formulario de Peticiones.

ENVIANDO EL CORREO FORMATEADO

Ahora añadiremos el conector Office365Outlook a nuestra app.

Power Apps correos HTML 3

Para enviar el correo cuando la forma sea enviada necesitaremos poner este código en la propiedad OnSelect del botón para enviar.

Office365Outlook.SendEmailV2("admin@cutexcel.onmicrosoft.com","Test",htm_EmailPreview.HtmlText)

Para probar el mensaje de correo daremos click en el botón de Enviar.

El correo que aparecerá en tu bandeja de entrada se verá exactamente igual a la vista previa del correo que encontramos en la app.

Esta es una de las tantas formas que existe para enviar correos desde Power Apps, y al menos así evitamos la molestia del HTML.

Cualquier duda nos leemos abajo.

Aprende a enviar correos electrónicos desde Power Apps sin HTML

5 comentarios en «Aprende a enviar correos electrónicos desde Power Apps sin HTML»

  1. Intente colocar & DataCardValue1.text &, ya que dentro del control de la carta el usuario introduce el texto, tambien intente que tome el contenido de un text input, he puesto & textinput3.text & y sigue sin mostrarme ninguno de los dos, con base en tu ejemplo, mi carta seria igual al campo de Nombre, hay algun otro valor que deba revisar dentro de las propiedades?

    1. Ok, parece que todo lo estas haciendo bien, solo quedaria revisar que el concat que haces sea correcto, osea no metas los valores dentro de las comillas todo junto para que te lo tome como control & textp
      «texto» & DataCardValue1.Text & » texto»

  2. Tengo un formulario hecho a partir de una lista en SharePoint, segui los pasos que compartes aqui pero no logro que muestre el contenido de las tarjetas, aunque las pongo entre & me muestra el texto literal al momento de enviar el correo.

    1. Hola.
      Asegurate de estar llamando al control de la carta que contiene los datos (regularmente datacardValue) y no a la datacard como tal.
      De igual forma asegúrate que, dependiendo el tipo de control, estes llamando correctamente al valor (.text, .value, .selected, etc…)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll hacia arriba