[MicroSoft] Adaptive Card 적용시켜보기 (js기반)

 

https://adaptivecards.io/

Adaptive Cards

 

 

✔️Adaptive Card

챗봇 및 대화창에서 사용할 수 있는 템플릿을 제공해준다.

 

 

 

목표

1. ajax 통신으로 데이터를 받는다

2. 받아온 데이터를 기반으로 카드를 만들 것 

3. 카드 개수와 데이터는 동적으로 변한다.

4. 1개의 대화창에 카드를 여러개 만들기

 

 

cf) 폐쇠망이 아닐 경우에 기반하여 작성

 

사용법 

1. HTML 파일 Head태그에 script문 추가 

 <script src="https://unpkg.com/adaptivecards/dist/adaptivecards.js"></script>

 

2. ajax 통신

  $.ajax({

    type: "POST",

    url: `${url}/${api}`,

    contentType: "application/json",

    data: JSON.stringify('ACCOUNT_1'),

    success: function (response) {

      // 카드가 만들어질 위치 생성

      const pElement = document.createElement("p");

      pElement.classList.add("bot-message");

      // 2개이상 조회시 슬라이딩 배너 생성을 위한 div

      let background = document.createElement('div')

      background.classList.add(`post-wrapper_${time}`)

      pElement.appendChild(background)

      //adaptive card 객체 생성

      const adaptiveCard = new AdaptiveCards.AdaptiveCard();

      adaptiveCard.onExecuteAction = detailAccount;

      //반복문

      response.forEach((v, i) => {

        var info = {

          'idx': v[0],

          'type': v[1],

          'sub_group': v[2],

          'title': v[3],

          'number': v[4],

          'total': v[5],

          'end_date': v[6],

          'rate': v[7],

          'use_yn': v[8],

          'start_date': new Date(v[9]).toISOString().split('T')[0],

        }

        //templete.js에 함수 (카드 타입, 정보들)

        let cardJson = choicetemplate('type1', info)

        adaptiveCard.parse(cardJson);

        backup += adaptiveCard.render().innerHTML

        background.appendChild(adaptiveCard.render());

      });

      let container = document.getElementById("chatbox");

      container.appendChild(pElement);

      //슬라이드 배너 효과

      let postWrapper = $(`.post-wrapper_${time}`);

      if (postWrapper.length) {

        postWrapper.slick({

          dots: true

        });

      }

 

추가 설명

1. 카드를 만드는 객체를 생성한다.
    const adaptiveCard = new AdaptiveCards.AdaptiveCard();

2. 카드의 버튼의 기능을 지정해준다.
    adaptiveCard.onExecuteAction = detailAccount;

3. 반복문을 통해 데이터를 받아온 것을 객체 형태로 바꾼다.

4. choicetemplate라는 함수를 사용하여 데이터를 넣는다. (내가 adaptive card로 만든것을 넣은 json데이터)

5. json 데이터를 parse 시킨다. 

6. 내가 카드를 넣을 곳에 adaptiveCard.render()를 한다 
     이떄 html 태그로 변환된다. 그전에는 저장이 되지 않는다.


cf)
여러개의 카드를 만들려고할때 
adaptive card.parse()를 한번에하면 될줄 알았지만 되지 않았다. 
한번 parse()하면 한번 render()해야되는 것 같다.

 

---

 

버튼 action 

function detailAccount(action) {

  console.log(action)

  switch (action.id) {

    //거래내역조회 Btn

    case 'Account_history':

      $('button').hide()

      U00005_1(action.data)

      break;

    //해지하기 Btn  

    case 'Termination':

      $('button').hide()

      U00005_2(action.data)

      break;

    //해지하기 -> 해지하기 Btn

    case 'Termination_Ok':

      $('button').hide()

      U00005_3()

      break;

  }

}