첫 번째 적응형 카드 만들기Create your first adaptive card

Power Automate 내 적응형 카드는 정보 블록을 공유하거나 특정 데이터 원본의 양식을 통해 데이터를 수집할 수 있습니다.Adaptive cards within Power Automate may either share blocks of information or collect data via a form for a given data source.

두 경우 모두 어떤 데이터 세트를 공유할지 및/또는 어떤 데이터 양식을 수집해야 할지에 대한 대략적인 계획을 세워야 합니다.In either case you will need to sketch out which datasets you will share, and/or what data the form will need to collect.

복잡한 테이블 배열보다는 단순한 데이터 블록을 사용하는 편이 좋습니다.Use simple blocks of data rather than complex table arrays.

필수 구성 요소Prerequisites

  • Flow 앱이 설치된 Microsoft Teams.Microsoft Teams with the Flow App installed.

작업 추가Add an action

이 프로시저에서는 Microsoft Teams 채널로 정보를 게시하기 위해 흐름의 이전 작업에서 얻은 데이터를 사용하는 작업을 추가하게 됩니다.In this procedure, you’ll add an action which will use the data from previous actions in the flow to post information to a Microsoft Teams channel.

  1. Power Automate에 로그인합니다.Sign into Power Automate.

  2. 상단의 탐색 모음에서 내 Flow를 선택합니다.Select My flows in the top navigation bar.

  3. 새로 만들기 > 빈 값의 인스턴트를 선택합니다.Select New > Instant from blank.

  4. 흐름에 이름을 지정합니다.Give your flow a name.

  5. 수동으로 Flow 트리거를 트리거로 선택합니다.Select Manually trigger a flow as the trigger.

  6. 만들기를 선택합니다.Select Create.

  7. 새 단계를 선택합니다.Select New Step.

  8. Microsoft Teams를 검색한 다음 Teams 채널에 적응형 카드를 게시하고 응답 대기를 작업으로 선택합니다.Search for Microsoft Teams, and then select Post an adaptive card to a Teams channel and wait for a response as the action.

  9. 카드를 게시할 Team채널을 선택합니다.Select the Team and the Channel to which you'd like to post the card.

  10. 이 JSON을 메시지 상자에 붙여넣습니다.Paste this JSON into the Message box.

    {
        "$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. JSON에서 다음의 대체 작업을 수행합니다.Make the following replacements in the JSON.

    중요

    대체를 수행할 때 따옴표를 제거하지 마세요.Do not remove any quotation marks when you do the replacements. 차량 선택은 필요에 맞게 수정할 수 있습니다.You can revise the car choices to suit your needs:

    변경할 텍스트Text to change 새 텍스트New text
    머리글 설명 텍스트Header Tagline Text Power Automate 폴링Power Automate Poll
    설문 조사 머리글Poll Header 기본 차량 모델Preferred Car Model
    설문 조사 질문Poll Question 여기에 나열된 선택 사항 중에서 선호하는 차량 모델에 투표하세요.Please vote on your preferred car model from the choices listed here.
    라틴 문자를 설문 조사를 진행하는 이유 또는 관련 비즈니스 문맥으로 대체합니다.Replace the latin text with a reason, or business context, related to why you are conducting the poll. Microsoft는 직원 설문 조사를 통해 가장 인기 있는 차량 모델에 맞게 개인 맞춤형 주차 공간을 제공해야 할지 결정합니다.We are polling our employees in order to determine if we should provide personalized parking places which are sized for the most popular cars.
    선택 1(두 위치 모두에서 바꾸기)Choice 1 (replace in both places) TeslaTesla
    선택 2(두 위치 모두에서 바꾸기)Choice 2 (replace in both places) LexusLexus
    선택 3(두 위치 모두에서 바꾸기)Choice 3 (replace in both places) HondaHonda
  12. 새 단계를 선택한 다음 액세스 권한이 주어진 전자 메일 보내기 작업 중 하나를 검색해 선택합니다.Select New Step, and then search for and select one of the Send an email actions to which you have access.

  13. 전자 메일을 받는 사람을 인스턴트 단추를 선택한 사람으로 입력합니다(트리거의 동적 콘텐츠에서 전자 메일 태그 사용).Provide the email recipient as the person who selected the instant button (use the Email tag from the dynamic content from the trigger).

  14. 다음과 같이 전자 메일 본문을 구성합니다.Configure the Body of the email as follows. 중괄호 ‘{}’ 안의 단어를 동적 토큰으로 대체합니다.Replace the words in swiggly parentheses "{}" with dynamic tokens:
    제출하신 설문 조사 응답은 {acPollChoices}입니다(acPollChoices는 응답 대기 작업의 동적 콘텐츠임).Your poll response was {acPollChoices} (acPollChoices is dynamic content from the wait for a response action). 이 응답의 제출자는 {User Name}입니다(사용자 이름은 트리거의 동적 콘텐츠임).It was submitted by {User Name} (User Name is dynamic content from the trigger)

적응형 카드 테스트Test your adaptive card

작업을 테스트하려면 이전에 만든 흐름을 실행하고 다음을 확인합니다.To test your work, run the flow you created earlier and confirm the following:

  • 흐름 실행에 오류가 없고 응답을 기다리고 있으며 실행 화면에 적응형 카드 작업의 대기 표시기가 표시됩니다.The flow run has no errors, and waits for the response, showing the wait indicator for the Adaptive Card action on the run screen.

  • Teams 채널에 새 적응형 카드가 게시됩니다.The Teams channel has the new adaptive card posted.

  • 차량 모델을 선택하여 카드에 응답하고 나면 적응형 카드의 하단 섹션에서 제출 단추를 선택합니다.When you respond to the card by selecting a car model, and then selecting the Submit button on the bottom section of the adaptive card:

    • 적응형 카드에서 오류가 발생하지 않아야 합니다.No errors should occur on the adaptive card.

    • 흐름 실행이 성공적으로 완료됩니다.The flow run completes successfully.

  • 응답 대기 작업 하단의 메시지 업데이트 영역(해당하는 대체 카드의 옆에 표시됨)을 구성했다면 제출 후 대체 카드가 적용됩니다.Card replacement is relevant after submission if you have configured the Update message area at the bottom of the wait for a response actions (shown next with the corresponding replacement card). 그렇지 않은 경우 제출 시 양식이 초기화됩니다.Otherwise, all submissions will simply reset the form.

    대체 카드

  • 이메일 알림의 본문에는 응답 제출자와 선택된 차량이 표시됩니다.The email notification contains the body that shows who submitted the response and which car was selected.

축하합니다.Congratulations! 첫 번째 대화식 적응형 카드가 만들어졌습니다.you’ve just made your first interactive adaptive card!

첫 번째 카드 생성 완료

적응형 카드에 대한 문제 해결 팁Troubleshooting tips for adaptive cards

적응형 카드를 만들 때 마주하게 되는 가장 흔한 문제는 다음과 같습니다.The most common problems that you will encounter when creating adaptive cards are:

  • 흐름 실행 오류는 종종 다음 요인 중 하나로 인해 발생합니다.Flow run errors are often caused by one of the following factors:

    • Flow 앱이 Microsoft Teams에 설치되지 않은 경우. Teams에 Flow 앱을 설치하세요.The Flow App is not installed in Microsoft Teams – Please install the Flow App into Teams.

    이 경우 오류는 다음 스크린샷과 유사할 수 있습니다.In this case the error may resemble this screenshot:

    오류 메시지

    • JSON 형식이 잘못된 경우. 이때 원인은 대체로 생각보다 복잡하지 않습니다.Improperly formatted JSON – This is not usually as complex as one might expect. 대다수의 경우 다음과 같은 상황입니다.These are most often just situations where:

      • JSON 내의 값 주위에 둥근 따옴표 또는 누락된 따옴표가 있습니다.There are curly quotes, or missing quotes, around values within the JSON. 항상 JSON을 확인하여 모든 텍스트 값이 큰따옴표 처리되어 있는지, 해당 숫자가 따옴표 처리되어 있는지 확인합니다.Always check the JSON to ensure all text values are enclosed within double quotes, and that numbers are enclosed in quotation marks. 모든 따옴표는 둥근 따옴표가 아닌 곧은 따옴표여야 합니다.All quotation marks should be straight and not curly.

      • JSON을 카드 페이로드 편집기에 붙여넣어 JSON 형식의 유효성을 검사할 수 있습니다.You can validate the format of your JSON by pasting the JSON into the Card Payload Editor.

    • 이미지 URL이 누락된 경우. 적응형 카드 내의 모든 이미지 값은 유효한 URL을 참조해야 합니다.Missing Image URLs – All image values within Adaptive Cards must refer to a valid URL. 전체 이미지 콘텐츠는 적응형 카드에서 직접 지원되지 않습니다.Full image content is not be directly supported in an Adaptive Card. URL을 브라우저에 붙여넣는 방식으로 이미지 링크를 테스트하여 이미지가 표시되는지 확인합니다.Test your image links by pasting the URL into the browser to see if an image is displayed.

  • 적응형 카드는 스타일 지정 및 스키마 제약 조건을 적용하는 동안 예상과 다르게 보일 수 있습니다.Adaptive Cards may not look like what’s expected during to styling and schema constraints:

    • 자리 표시자 값, 텍스트 스타일, 태그 언어가 적응형 카드 스키마 요건에 맞게 조정되었는지 확인합니다(여기에서 적응형 카드 스키마 모범 사례 참조).Check that placeholder values, text styles, and any markup language aligns with Adaptive Card schema requirements (review Adaptive Card schema best practices here)

    • Visual Studio Code 적응형 카드 유효성 검사기를 활용합니다.Leverage the Visual Studio Code Adaptive Card validator. Visual Studio Code 애플리케이션을 통해 설치하려면 확장 Marketplace를 열고 적응형 카드 뷰어를 검색합니다.To install it from the Visual Studio Code application, open the Extensions Marketplace, and search for Adaptive Card Viewer.

      Visual Studio Code 확장명

Visual Studio Code에 설치된 적응형 카드 뷰어 확장의 잘린 스크린샷입니다(바로 가기 키: 사용 설정된 경우 Ctrl+V+A).Truncated screenshot of the Adaptive Card Viewer extension installed in Visual Studio Code (shortcut: Ctrl+V+A once enabled).

  • 적응형 카드 제출 이후에 발생하는 오류는 종종 다음 원인으로 인해 발생합니다.Errors following Adaptive Card submission are often due to:

    • 이름에 ‘응답 대기’가 포함되지 않은 작업을 사용하는 경우Using an action which does not include ‘wait for response’ in the name

      다시 시도

    • 카드를 2회 이상 제출하려는 경우.Attempting to submit the card more than once. 각각의 적응형 카드는 1회만 제출이 가능하며, 이후의 제출은 모두 무시됩니다.Each Adaptive Card can only be submit once, after which all further submissions will be ignored.