MoreBeerMorePower

Power Platform中心だけど、ノーコード/ローコード系を書いてます。

Adaptive Cards

Building a simple People picker in Adaptive Card based on group members

Adaptive cards are a way to provide an interactive UI for Teams channels or user chats, and Power Automate allows you to do this without coding. For example, when a list item or task is created, you can instantly notify Teams about it and …

【不要になりました】Teams に Adaptive Card を投稿するアクションの裏技

裏技だけどそのうちきっと公式に対応すると思います。(たぶん) 【2021/07/06 加筆】 そうこう言っている間に1週間たらずで対応されました。 現在はプレビュー環境のみですが、ほどなくして通常の環境でも利用可能になると思われます。 はじめに Power Auto…

LIFF を Adaptive Cards で らくらく作成!

『LIFF を HTMLとLIFF SDKで作れるのはわかったけど、画面作るの大変だな・・。』と悩んでいたのですが、Adaptive Cards使えばデザイナーあるな!と思ったのでやってみました。 今回は以前書いた以下2つの投稿を組み合わせたものです。 mofumofupower.hatena…

HTML上で Adaptive Card を表示する - (4) 応用・用途など

前回: https://mofumofupower.hatenablog.com/entry/adaptivecard-rendering-html3 ここまでで、HTML上で Adaptive Card を表示するために必要な要素は大体カバーしました。 実際にどう使うかを見ていきます。 1. Azure Blob ストレージにおいて SharePoint …

Microsoft Teams における Adaptive Card の新機能 - 解説と検証結果-

【2021/6/1】 Information maskingの挙動について追記 現時点の対応状況 新機能 Flow bot Webhook 1. Building full-width Adaptive Cards 〇 〇 2. Type-ahead (auto–complete support) × 〇 3. Information masking × 〇 4. Expanded (Stage) view for ima…

HTML上で Adaptive Card を表示する - (3) アクションへの対応

前回: https://mofumofupower.hatenablog.com/entry/adaptivecard-rendering-html2 前回までで、単純なカードの表示とスタイルの設定を行いました。 <html> <head> <link rel="stylesheet" href="ここにCSSファイルのパス" /> <script type="text/javascript" src="https://unpkg.com/adaptivecards/dist/adaptivecards.js"></script> </link></head></html>

HTML上で Adaptive Card を表示する - (2) スタイルの設定

前回: HTML上で Adaptive Card を表示する - (1) 単純なカード表示 - MoreBeerMorePower 前回は非常に簡単な Adaptive Card を表示するための JavaScript SDK を利用した HTML を紹介しました。 カードを表示するだけであればそのままでも問題ないのですが、…

はてなブログにAdaptive Card表示できるかテスト

代表的なサンプルカードをここに挿入してみます。 // Set card json const card = { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "Publish Adaptive Card Schema" }, { "type": "ColumnSet", …

HTML上で Adaptive Card を表示する - (1) 単純なカード表示

Adaptive Cards は JavaScript SDK を提供しているので、これを読み込むことで非常に簡単に Adaptive Card をHTML上で表示することができます。 docs.microsoft.com 「Adaptive CardsはHTMLとかCSSとか知らなくてもカード型UIを表示できるのが強みじゃないん…

Teams に アダプティブカードを送信するアクションが追加されました

以前、ユーザー や Flow bot として Power Automate から Teams にメッセージを投稿するアクションが統一されます!という投稿をしました。 mofumofupower.hatenablog.com 今回は通常のメッセージに加えて、Teams に アダプティブカード を送信するアクショ…

Teamsで送信した位置情報から付近のレストランを検索するFlow Botを作る

Teamsのモバイルアプリは位置情報 (現在地だけでなく、地図上の座標) をチャットに投稿できるのですが、これを利用して指定された地点の周辺のレストランを検索してリストを提示してくれるBotを Power Automateで作ってみました。 動作した際のキャプチャは…

Teams に送信する承認依頼をカスタマイズする

はじめに Power Automateで承認ワークフローを作成するときに利用するコネクター「承認」に関する発展的な内容です。 ※Power Automate で「承認」コネクター利用については 公式のDocs をご確認ください。 承認アクションは通知を有効にすると承認者のメール…

Adaptive Cards Community Call 9月メモ

アジェンダ 2020年9月のAdaptive Cards Community Call のメモです。 2020 Q4のロードマップ Adaptive Component紹介 2020 Q4のロードマップ これまでと同様、ロードマップ(というか対応予定かどうか)は以下のサイトで公開されているという案内でした。 Pl…

メッセージセンターのPlanner同期結果をTeamsにお知らせ

はじめに Microsoft 365 管理センターの「メッセージセンター」に最近 Planner との同期設定が追加されました。メッセージセンターに届いたメッセージの中で、管理者側でアクションが必要なものをタスク化することが目的です。 この同期機能についてはすでに…

Microsoft Teams への予約投稿を Power Automate と Adaptive Cards でつくる

更新情報 [2021/06/07] タイムゾーン変換に関して仕様変更らしき箇所を補足しました はじめに 最近では予約XXがいろいろ提供されていますね。Twitterでの予約ツイート、Outlookでの予約送信などなど。でもTeamsにはない!! ということで今回はTeamsのメッセ…

Microsoft Teams の Incoming/Outgoing webhook でカード送信

はじめに 自分用の簡単な備忘録です。 Microsoft Teamsの Incoming Webhook ではメッセージでMarkdown形式がサポートされていることがよく知られています。 このほかに、各種カードの送信にも対応していますが、方法があまり書かれていないので簡単に記載し…

Adaptive Cards のアクション [ToggleVisibility] と [ShowCard] を使ってみよう - ShowCard 編

[2020/08/12: 一部内容を修正しました。ShowCardは入れ子にできた] はじめに Adaptive Card を作成するうえで少し厄介なアクション、ToggleVisiblity と ShowCard について、前回は ToggleVisiblityの利用方法と簡単な活用方法を紹介しました。 Adaptive Car…

Adaptive Cards のアクション [ToggleVisibility] と [ShowCard] を使ってみよう - ToggleVisiblity 編

はじめに Adaptive Cardsのデザイナーを使っていて、最も縁遠い存在なのはおそらく Action.ToggleVisibility と Action.ShowCard ではないでしょうか!(私見) この2つはプロパティペインに設定が足りないので、CARD PAYLOAD EDITORを直接編集しなければい…

リスト形式のデータを Adaptive Cards で表示する方法

はじめに Adaptive Cards を利用して Teams にメッセージを投稿する場合、完全に固定のカードを利用するケースはそれほど多くないかなと思います。 多くは、何らか別のデータソースがあって、その情報を加工してカードにし投稿するというシナリオになります…

Adaptive Cards 入門用ドキュメントを作成・公開しました

最近ずっとこれをやっていて、ブログ滞っていましたが、基礎編が完成しましたので、こちらでもお知らせです。 基礎編としては以下の内容をカバーしています。 基礎編 Adaptive Cardsの概要 Adaptive Cards デザイナーの利用 Microsoft Teams, Outlookへのカ…

Power AutomateからTeamsに@メンション入りメッセージを送る

はじめに Power AutomateでTeams向けアクションに「ユーザーの@メンショントークンを取得する」が追加されたことに伴い、以前の方法よりも大幅に手軽に@メンション付きのメッセージを送ることができるようになりました。 対象のアクションは以下の4種です。 …

選択したメッセージのトリガーでスケジュール登録フロー

はじめに 7/6に自分の環境では利用できるようになった、Microsoft Teamsの新しいトリガー『選択したメッセージ』ですが、これを使って比較的簡単な自動化を作ってみました。 前の投稿↓ Teamsのメッセージ選択時トリガーがPower Automateに追加されました! -…

勢いあまってAdaptive Cardsの愛好会を作成しました

最近Power AutomateとTeamsの関連で、ずっとAdaptive Cardsを研究しているのですが、あまり交流がない。 そして作例を披露しあう場がない!ということで勢いあまってFacebookでグループを作成いたしました! https://www.facebook.com/groups/98830380161283…

Teamsのメッセージ選択時トリガーがPower Automateに追加されました!

はじめに ※全テナント反映されているかはわかりません。 (投稿時点) Microsoft TeamsとのIntegrationが強化されているPower Platformですが、Power Automateで注目のトリガーが利用可能になりました! 選択したメッセージ これまで、SharePointやOneDriveや…

JPPUG Summer 20 内容補足

はじめに 投稿時点ではまだ登壇前ですが、JPPUG Summer 20でお話する内容の補足記事です。 イベントへの参加登録・詳細は以下Connpassからどうぞ powerapps.connpass.com なかなか、デモや動画だと式を追いかけられないとか、映像が荒いとかあると思いますの…

Adaptive Cards Management System に触れる

Adaptive Cards Management System Adaptive Cards management system (以下、ACMS ) は、2つの構成要素からなりたっています。 フロントエンドのカード管理ポータル カードデザイナーやフロントエンドの開発者はAdaptive CardsのテンプレートをWeb画面で作…

Microsoft Teams上でAdaptive Cardsを利用したサーベイを行う

以前、コロナ対策エンジニアのほうでウェビナーやったときの資料や動画を置いていなかったので、こちらでまとめておきます。 つくったもの Power AutomateのMicrosoft TeamsコネクターにあるAdaptive Cardsの送信&ユーザーからのレスポンス待ち受けを利用し…

Adaptive Cards Templating SDK を Azure Functionで利用して自前のTemplating APIを作る

Adaptive Cards のTemplatingとは? 端的に言えば、Adaptive Cardsのレイアウトとそこに表示するデータの分離です。 レイアウト側に ${title}のような文字を入れておいて、データ側で {"title":"This is title"}のように指定すると、生成されたカードには Th…

Microsoft Searchの結果をAdaptive Cardsでカスタマイズする

お友達のてっちゃんと太田さんが教えてくれたので、自分のブログをMicrosoft Searchを使って検索→Adaptive Cardsで結果をカスタマイズする方法を残しておきます。 てっちゃん、太田さんありがとうございました! 検索結果のカスタマイズ Microsoft Searchで…

Adaptive CardsをTeamsに送る際、ユーザーのプロフィール写真を表示する方法

備忘録 Power Automateから、Microsoft TeamsにAdaptive Cardsを送信するときに、Flow botとして送られるので、「誰が送信のトリガーになったか表示したい」という要望はありそう。 これを実現する方法ご紹介。 カードのメッセージは一番シンプルには以下の…