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.

Sugerencia

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

Requisitos previos

Microsoft Teams con la aplicación Workflows 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. En el diseñador, 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.

    Importante

    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
    Texto del eslogan del encabezado Encuesta de Power Automate
    Encabezado de la encuesta Modelo de coche preferido
    Pregunta de sondeo 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
    Opción 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.

  • En el canal de Teams se ha publicado la nueva tarjeta adaptativa.

  • 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, todo envío solo restablecerá el formulario.

    Tarjeta de reemplazo.

  • La notificación por correo electrónico incluye un cuerpo de mensaje que muestra quién ha enviado la respuesta y qué coche se ha seleccionado.

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 de JSON. Compruebe siempre el JSON para asegurarse de que todos los valores de texto se incluyen entre comillas dobles y que los números se incluyen entre comillas. Todas las comillas deben ser rectas y no tipográficas.

      • Puede validar el formato de su JSON pegándolo en el Card Payload Editor.

    • 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.

  • Es posible que las Tarjetas adaptables no tengan el aspecto esperado debido a las limitaciones de estilo y del esquema:

    • Compruebe que los valores de los 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 adaptableaquí)

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

      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.