[파워 앱스] 반응형 카드(Adaptive Card) 만들기

 

 

PowerApps에서 버튼을 누르면 Outlook이나 Teams로 메세지를 전송하고,

응답을 다시 받고 싶다면 어떻게 해야할까?

 

 

1. Adaptive Card 작성

 

 

원하는 형태의 Adaptive Card는 https://adaptivecards.io/ 에서 만들 수 있다.

상단의 Designer 탭을 선택하면 Adaptive Card를 쉽게 만들 수 있는 에디터가 있다.

 

 

하단의 편집기에서 구조를 변경하면 미리보기로 바뀐 카드를 확인 가능하다.

 

 

 

2.  Outlook으로 메일 보내기

 

 

앱에서 흐름 추가하고 Outlook 커넥터에서 메일 보내기 동작을 생성한다.

 

 

원하는 형태의 카드를 만들었다면 에디터에서 코드를 복사한 다음, 흐름에서 코드 아이콘을 선택하면 본문에 Script를 작성할 수 있게 된다. 거기에 붙여넣자.

 

Outlook의 경우,

<script type="application/adaptivecard+json">

</script>

script 태그 안에 adaptive card 코드를 넣으면 된다.

 

Teams의 adaptive card에는 필요없다.

 

받는 사람은 '동적 컨텐츠 추가 > Power Apps에서 질문'으로 동적으로 설정 가능하다.

Script 태그 안넣으면 메일 보내도 아무것도 안보인다.

 

 

앱에서 버튼 하나 넣고, OnSelect에 방금 생성한 흐름이름.Run() 입력한다.

 

 

버튼을 눌러본다.

 

 

메일로 직접 만든 Adaptive Card가 온다.

 

저기서 버튼을 누르면 URL을 통해 앱을 열수도 있고(Action.Openurl), 사용자 응답을 제출할 수도(Action.Submit), Http 요청을 보낼 수도 있고(Action.Http), Sharepoint List에 데이터를 저장할 수도 있고...

 

하여튼 뭔가 할 수 있는 것이 많다.

어떻게 하는지 궁금하면 여기 들어가보자.

 

 

3. Teams는 어떻게?

 

 

아래와 같이 설정하고 받는 사람(마찬가지로 동적 설정 가능), 메세지에 Adaptive Card 코드를 붙여넣는다.

 

 

저장한 후에, 버튼 하나 추가해서 OnSelect에 흐름 이름.Run() 넣고 눌러보자.

 

Teams로 봇을 통해 채팅에 Adaptive Card가 전달된다.

 

Adaptive Card 예제 중 하나를 사용해봤다.

 

 

4. Adaptive Card 만들기가 어려워요

 

 

그럴줄 알고 MS가 예제와 템플릿을 많이 만들어 놓았다.

Samples 탭에 가보면(여기) 템플릿이 많으니 참고해서 입맛대로 조금씩 바꾸고 사용하자.