Crear su primera tarjeta adaptable

Las tarjetas adaptables incluidas en Power Automate pueden compartir bloques de información o recopilar datos mediante un formulario para un origen de datos determinado.

En cualquier caso, tendrá que esbozar los conjuntos de datos que va a compartir y los datos que el formulario tendrá que recopilar.

Tip

Use bloques de datos sencillos en lugar de matrices de tabla complejas.

Requisitos previos

  • Microsoft Teams con la aplicación Power Automate instalada.

Agrega una acción

En este procedimiento, agregará una acción que usará los datos de las acciones anteriores en el flujo para publicar información en un canal de Microsoft Teams.

  1. Inicie sesión en Power Automate.

  2. Seleccione Mis flujos en la barra de navegación superior.

  3. Seleccione Nuevo flujo > Flujo de nube instantáneo.

  4. Asigne un nombre al flujo.

  5. Seleccione Desencadenar un flujo manualmente como desencadenador.

  6. Seleccione Crear.

  7. Seleccione Nuevo paso.

  8. Busque Microsoft Teams y seleccione Publique una tarjeta adaptable en un canal de Teams y espere respuesta como acción.

  9. Seleccione Teams y el Canal al que quiere enviar la tarjeta.

  10. Pegue este archivo JSON en el cuadro Mensaje.

    {
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
            {
                "type": "TextBlock",
                "text": "Poll Request",
                "id": "Title",
                "spacing": "Medium",
                "horizontalAlignment": "Center",
                "size": "ExtraLarge",
                "weight": "Bolder",
                "color": "Accent"
            },
            {
                "type": "TextBlock",
                "text": "Header Tagline Text",
                "id": "acHeaderTagLine",
                "separator": true
            },
            {
                "type": "TextBlock",
                "text": "Poll Header",
                "weight": "Bolder",
                "size": "ExtraLarge",
                "spacing": "None",
                "id": "acHeader"
            },
            {
                "type": "TextBlock",
                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum lorem eget neque sollicitudin, quis malesuada felis ultrices. ",
                "id": "acInstructions",
                "wrap": true
            },
            {
                "type": "TextBlock",
                "text": "Poll Question",
                "id": "acPollQuestion"
            },
            {
                "type": "Input.ChoiceSet",
                "placeholder": "Select from these choices",
                "choices": [
                    {
                        "title": "Choice 1",
                        "value": "Choice 1"
                    },
                    {
                        "title": "Choice 2",
                        "value": "Choice 2"
                    },
                    {
                        "title": "Choice 3",
                        "value": "Choice 3"
                    }
                ],
                "id": "acPollChoices",
                "style": "expanded"
            }
        ],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "Submit",
                "id": "btnSubmit"
            }
        ]
    }
    
  11. Realice los reemplazos siguientes en el archivo JSON.

    Important

    No quite las comillas al realizar los reemplazos. Puede revisar las opciones de automóvil para ajustarlas a sus necesidades:

    Texto que se va a cambiar Nuevo texto
    Header Tagline Text Sondeo de Power Automate
    Poll Header Modelo de coche preferido
    Poll Question Vote por el modelo de coche preferido entre las opciones que se muestran aquí.
    Reemplace el texto latino por una razón, o contexto empresarial, relacionado con el motivo por el que realiza el sondeo. Estamos sondeando a nuestros empleados para determinar si debemos proporcionar plazas de aparcamiento personalizadas que se ajusten al tamaño de los coches más populares.
    Choice 1 (reemplazar en ambos lugares) Tesla
    Choice 2 (reemplazar en ambos lugares) Lexus
    Choice 3 (reemplazar en ambos lugares) Honda
  12. Seleccione Nuevo paso y luego busque y seleccione una de las acciones de Enviar un correo electrónico a las que tenga acceso.

  13. Indique el destinatario de correo electrónico como la persona que seleccionó el botón instantáneo (use la etiqueta de Correo electrónico del contenido dinámico del desencadenador).

  14. Configure el Cuerpo del correo electrónico de la manera siguiente: Reemplace las palabras entre llaves "{}" por tokens dinámicos:
    Su respuesta al sondeo fue {acPollChoices} (acPollChoices consiste en contenido dinámico de la espera de una acción de respuesta). Lo envió {Nombre de usuario} (el nombre de usuario es contenido dinámico del desencadenador)

Prueba de la tarjeta adaptable

Para probar su trabajo, ejecute el flujo que creó anteriormente y confirme lo siguiente:

  • La ejecución de flujo no tiene errores y espera la respuesta, y muestra el indicador de espera para la acción de tarjeta adaptable en la pantalla de ejecución.

  • El canal de Teams tiene la nueva tarjeta adaptable publicada.

  • Cuando responda a la tarjeta seleccionando un modelo de automóvil y seleccionando después el botón Enviar de la sección inferior de la tarjeta adaptable:

    • No deben producirse errores en la tarjeta adaptable.

    • La ejecución de flujo se completa correctamente.

  • El reemplazo de la tarjeta es pertinente después del envío si se ha configurado el área Actualizar mensaje en la parte inferior de las acciones en espera de respuesta (que se muestran a continuación con la tarjeta de reemplazo correspondiente). De lo contrario, todos los envíos simplemente restablecerán el formulario.

    Tarjeta de reemplazo.

  • La notificación por correo electrónico contiene el cuerpo que muestra quién envió la respuesta y qué coche se seleccionó.

Enhorabuena. ¡acaba de crear su primera tarjeta interactiva adaptable!

Primera tarjeta finalizada.

Sugerencias para la solución de problemas de tarjetas adaptables

Los problemas más habituales que encontrará al crear tarjetas adaptables son:

  • Los errores de ejecución de flujo suelen deberse a uno de los siguientes factores:

    En este caso, el error puede ser similar a esta captura de pantalla:

    Mensaje de error.

    • JSON con formato incorrecto: no suele ser tan complejo como cabría esperar. Normalmente, se trata de situaciones en las que:

      • Hay comillas tipográficas, o faltan comillas, alrededor de los valores dentro del JSON. Compruebe siempre el archivo JSON para asegurarse de que todos los valores de texto estén entre comillas dobles y que los números estén entre comillas. Todas las comillas deben ser rectas y no tipográficas.

      • Puede validar el formato del archivo JSON pegando el archivo JSON en el editor de carga de tarjeta.

    • Direcciones URL de imagen que faltan: todos los valores de imagen dentro de las tarjetas adaptables deben hacer referencia a una dirección URL válida. El contenido completo de la imagen no se admite directamente en una tarjeta adaptable. Pruebe los vínculos de imagen pegando la dirección URL en el explorador para ver si se muestra una imagen.

  • Puede que las tarjetas adaptables no se parezcan a lo que se espera durante la aplicación de estilos y las restricciones de esquema:

    • Compruebe que los valores de marcadores de posición, estilos de texto y cualquier lenguaje de marcado se alinean con los requisitos del esquema de tarjeta adaptada (revise los procedimientos recomendados para el esquema de tarjeta adaptable aquí)

    • Aproveche el validador de tarjeta adaptable de Visual Studio Code. Para instalarlo desde la aplicación de Visual Studio Code, abra el Marketplace de extensiones y busque Visor de tarjetas adaptables.

      Extensión de Visual Studio Code.

Captura de pantalla truncada de la extensión del visor de tarjetas adaptables instalada en Visual Studio Code (acceso directo: Ctrl+V+A una vez esté habilitado).

  • Los errores siguientes al envío de tarjeta adaptable suelen deberse a:

    • Uso de una acción que no incluye "en espera de respuesta" en el nombre

      Inténtelo de nuevo.

    • Se intenta enviar la tarjeta más de una vez. Cada tarjeta adaptable solo se puede enviar una vez, tras lo cual se omitirán todos los envíos posteriores.

Note

¿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).