#javascript #html #adaptive-cards #microsoft-graph-sdks #microsoft-graph-teams
#javascript #HTML #адаптивные карточки #microsoft-graph-sdks #microsoft-graph-teams
Вопрос:
Я разрабатываю интерфейсное приложение с использованием Angular, которое должно показывать разговоры в командных каналах. В настоящее время я немного теряюсь, когда дело доходит до отображения сообщений чата. Я понимаю, что Teams использует AdaptiveCards для отображения различных типов сообщений, таких как ‘vnd.microsoft.card.thumbnail’, и что следует использовать AdaptiveCards для рендеринга карточек в HTML вместо выполнения всей работы по ручному созданию всевозможных HTML-шаблонов.
Но это именно то, в чем я терплю неудачу: (
Этот базовый пример работает просто отлично: https://learn.microsoft.com/de-de/adaptive-cards/sdk/rendering-cards/javascript/render-a-card Но как только я пытаюсь отобразить карточку с данными, которые я получаю из Microsoft Graph API (‘/teams/{tid}/channels /{cid}/messages’), она просто ничего не показывает. Кажется, что данные не сочетаются друг с другом. Например, AdaptiveCards имеют свойство, называемое «действия», тогда как объекты ChatMessage Graph имеют «кнопки».
Чего я не понимаю?
Большое спасибо, Бруно
Комментарии:
1. Вам нужно убедиться, что используемый вами шаблон соответствует данным, проще всего взять копию получаемой полезной нагрузки JSON, поместить ее в конструктор или vscode и отредактировать свой шаблон, чтобы он соответствовал фактическим данным, которые вы получаете. Однако я не уверен на 100%, сработает ли это без каких-либо взломов с вашей стороны. Понятия не имею, что вы получаете от Graph API прямо сейчас. С другой стороны, MS Teams не использует адаптивные карточки для рендеринга обычных сообщений в чате, они используются только для сообщений ботов, интерактивных материалов и приложений.
2. Да, обычные сообщения приходят в виде текста, но мне интересны интерактивные материалы. Я думал, что это будет работать просто так: var adaptiveCard = новые адаптивные карточки. AdaptiveCard(); adaptiveCard.parse(данные); var renderedCard = adaptiveCard.render(); document.body.appendChild(renderedCard); Возможно, проблема в ContentType=’application/vnd.microsoft.card.thumbnail’, потому что AdaptiveCards во всех примерах всегда имеет type =’AdaptiveCard’?
3. Ну да, но команды могут делать вещи, которые не работают для обычных рендереров, не уверен на 100% atm.
Ответ №1:
Я не думаю, что вы можете достичь желаемого, используя адаптивные карточки. Насколько я понимаю, вы хотите, чтобы результат JSON из Microsoft Graph API (‘/teams/{tid}/channels/{cid}/messages’) отображался в виде адаптивной карточки без какой-либо обработки. Этого не произойдет. Вы должны проанализировать данные, а затем сопоставить их со значениями adaptive card JSON.