Как реализовать адаптивную карту для ботов Azure? - PullRequest
Новая
       34

Как реализовать адаптивную карту для ботов Azure?

0 голосов
/ 13 апреля 2019

Мое понимание создания адаптивной карты в лазурном боте заключается в ее жестком кодировании.Есть ли лучше создать адаптивную карту?Потому что представьте, нужно ли нам создавать 120 карт.Мы должны жестко кодировать файлы, подобные приведенным ниже кодам, что не является хорошей практикой.Пожалуйста помоги!Спасибо 

 {
   "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "Image",
        "url":"google.image.com",
        "size": "small"
      }
     ],
    "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Google",
      "url": "google.com"
     }
     ]
  }

1 Ответ

0 голосов
/ 15 апреля 2019

Есть несколько способов сделать это. С учетом карты: 

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Image",
            "id": "img",
            "selectAction": {
                "type": "Action.OpenUrl",
                "title": "Google",
                "url": "http://www.google.com"
            },
            "url": "https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Google",
            "url": "http://www.google.com"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

Который будет отображаться как:

enter image description here

И учитывая, что мы импортируем его с: 

import * as cardJson from './adaptiveCard.json';

И тогда наш код выглядит примерно так: 

const card = CardFactory.adaptiveCard(cardJson);
const msg = MessageFactory.text('');
msg.attachments = [card];
await context.sendActivity(msg);

1. Редактировать JSON напрямую

Если мы используем это, чтобы изменить изображение: 

cardJson.body[0].url = 'https://skillbotbuilder.gallerycdn.vsassets.io/extensions/skillbotbuilder/skillbotbuilder/1.0/1546976085901/Microsoft.VisualStudio.Services.Icons.Default';

получаем:

enter image description here

Итак, вы можете использовать ваш .json в качестве шаблона, а затем создать его с помощью javascript. Или:

2. Используйте другой тип карты

Вот ссылка на другие типы карт

Затем вы можете использовать CardFactory для создания карт.

Карта героя, подобная вышеприведенной, будет выглядеть примерно так: 

const hero = CardFactory.heroCard(
    null,
    CardFactory.images(['https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image']),
    CardFactory.actions([{
        type: 'Action.OpenUrl',
        title: 'Google',
        value: 'Google.com'
    }])
);
...