8 ms·

Adaptive Cards

miguelrochefort 4y ago
I maintain a list of Adaptive Cards projects and resources here: https://github.com/miguelrochefort/awesome-adaptive-cards https://github.com/miguelrochefort/awesome-adaptive-cards
Gys 4y ago
This reminds me of https://jasonette.com/ https://jasonette.com/ Very interesting idea because it can be much more platform agnostic then html. Ideally resulting in moving away from the html everywhere, which often means including a separate browser everywhere and non native UIs.
- jagged-chisel 4y ago
  Docs are 404, the Heroku app is nonexistent … is jasonette still alive?
  - easrng 4y ago
    https://github.com/jasonelle/jasonelle/wiki/History https://github.com/jasonelle/jasonelle/wiki/History
michaelmior 4y ago
Would be great to see something like catch on for other chat platforms as well (e.g. Slack, Messenger, etc.). Being able to define a UI once for all those would be great.
- hyperrail 4y ago
  Webex's Slack-like chat room service uses Adaptive Cards to define interactive messages from bots, just like Microsoft Teams does. I do agree with you that it should catch on more and it's unfortunate that it hasn't.
  - valgaze 4y ago
    + 1 ex. You can do something like this: https://i.imgur.com/dcbzn3w.gif https://i.imgur.com/dcbzn3w.gif I do a lot of thinking about conversation design "tooling" for automated agents and I found wrangling Adaptive Cards with "dynamic" content was a bit annoying since there's so many options. I needed a simple subset of functionality to cover most cases and to add features like tappable suggestion "chips" I made little a utility called "Speedycard" which lets you "build" Adaptive Cards kinda like this:g const myCard = new SpeedyCard() .setTitle('System is ') .setSubtitle('If you see this card, everything is working') .setImage('https://i.imgur.com/VQoXfHn.gif') .setInput(`What's on your mind?`) .setUrl('https://www.youtube.com/watch?v=3GwjfUFyY6M', 'Take a moment to celebrate') .setTable([[`Bot's Date`, new Date().toDateString()], ["Bot's Uptime", `${String(process.uptime())}s`]]) .setData({mySpecialData: {a:1, b:2}}) const fullCard = myCard.render() // JSON passed to an API/client While I am convinced about the importance of conversation design and being thoughtful about this stuff sometimes it's convenient to just have a little form and the user adds their data and call it day Cards source (can use this anywhere): https://github.com/valgaze/speedybot/blob/master/src/cards.ts https://github.com/valgaze/speedybot/blob/master/src/cards.t... Experiment optimized for Cloudflare Workers: https://www.npmjs.com/package/speedybot-hub https://www.npmjs.com/package/speedybot-hub Main Library: https://www.npmjs.com/package/speedybot https://www.npmjs.com/package/speedybot
password4321 4y ago
Smells new. Anyone willing to recommend how long to wait before adopting a new MS technology?
- hazz99 4y ago
  I don’t believe it’s particularly new. Microsoft has thoroughly embraced this in the Teams API, so I wouldn’t expect it to go away soon.
- nhance 4y ago
  This has been around for several years now at the least
- hyperrail 4y ago
  Adaptive Cards have been around since 2016: https://github.com/microsoft/AdaptiveCards/graphs/contributors https://github.com/microsoft/AdaptiveCards/graphs/contributo... It's a healthy project, with multiple development teams within Microsoft both using and contributing to it. If you scroll down the originally linked homepage, you see 4 Microsoft products that have used it, 3 of which are in active development today.
  - vyrotek 4y ago
    It looks like a lot of documentation is pointing to the wrong branch. It took me a minute to understand why I was looking at code that hadn't been touched in 2+ years. The docs are pointing to the "master" branch but everything has moved to the "main" branch. ex. https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/getting-started https://docs.microsoft.com/en-us/adaptive-cards/rendering-ca...
    - paulcam206 4y ago
      filed https://github.com/microsoft/AdaptiveCards/issues/7475 https://github.com/microsoft/AdaptiveCards/issues/7475 to track :)
- brokenkebab2 4y ago
eternityforest 4y ago
Looks amazing! It's not every day I see a new technology that actually stands out. I could see a lot of apps being built largely as card galleries. Also, "Experience Owners" should be nominated for Buzzword of the Year. It's so incredibly plastic corporate buzzword-y, but actually kind of does give a bit of a buzz when you see it.
deleted 4y ago
[deleted]
bloopernova 4y ago
Unfortunately it didn't work in Linux Firefox :(
jacknews 4y ago
Is it just me or is the video a word-soup marketing pitch of benefits, possibilities etc? 'Open yourself up to content, with adaptive cards'. What does this thing actually do, and how does it work?
- nsriv 4y ago
  Perhaps the video is, but your questions are answered in the text above the video.
- paulcam206 4y ago
  When I was first introduced to AdaptiveCards, it took me a while to grok just what it's for. This video is a good walkthrough covering the type of scenarios that are enabled with their use: https://www.youtube.com/watch?v=wT1yFr_j6IM https://www.youtube.com/watch?v=wT1yFr_j6IM
dchuk 4y ago
Interesting, seems similar to what Joel is doing here: https://blockprotocol.org https://blockprotocol.org
- vladsanchez 4y ago
  Coincidence? This all reminds me of [https://en.wikipedia.org/wiki/Microformat https://en.wikipedia.org/wiki/Microformat]
spankalee 4y ago
This is what HTML is for, and if you look at the schema it has many of the same element/container concepts that HTML has. A subset of HTML designed for easy embedding, possibly removing features and quirks and allowing for a smaller and faster runtime was the goal of the project that directly preceded and led to Flutter. I wish that goal had remained so that we had a cross-platform UI runtime that was still lightweight on the web.
- paulcam206 4y ago
  Probably the first thing to call out is that solving cross-plat UI in the general case is a non-goal for Adaptive Cards. It's not intended to replace e.g. ReactNative. Adaptive Cards exists to allow small snippets of card-like UI to be defined and shared across platforms. The problem with using HTML (or a subset thereof) to solve this problem is that it necessarily requires HTML rendering on every platform you want to support. If your intent as a dev is to integrate card-like experiences into an existing app, requiring a web rendering surface might be too heavyweight... and even if apps chose to adopt web rendering, there would still be the issue of getting styling to line up. The goal of Adaptive Cards is to use a platform's native rendering and controls. Apps should get native performance with native styling. Of note, these cards may not be originating from within your team, so there's no way to guarantee that card authors will make design choices that fit within the design language of your app. The solution is to only allow for semantic styling choices (e.g. card author can't specify "Ubuntu Mono" as the font, but can specify "monospace"). The app hosting the card gets to define how these semantic choices are actually implemented.
eliseumds 4y ago
Wow, this is very hard to read. It should be illegal to use light grey text on a white background.
- Tao332 4y ago
  It's technically black, but the font weight is ultra ultra light.
thermin 4y ago
Seems incredibly like an intentionally style-less, script-less version of HTML: a tree structure of blocks, tables, lists etc with simple actions like "show", "hide" and "submit form".
latchkey 4y ago
This concept is patented: https://patents.justia.com/patent/9285977 https://patents.justia.com/patent/9285977 https://www.wrap.co/ https://www.wrap.co/
- nynx 4y ago
  Imagine thinking that software patents are legitimate.
  - latchkey 4y ago
    To be clear, I didn't say it was legitimate.
wokwokwok 4y ago
Use this in teams automation. It’s just another priority format you need a full blown editor to build your UI in. Difficult to debug with, but works fine as long as you hardly ever need to change your templates.
TeeMassive 4y ago
Makes sense to have the Markdown equivalent but for UI. (In fact that wouldn't be a bad idea.)
stayinrhythm 4y ago
"there are now 15 competing standards" vibes (https://xkcd.com/927/ https://xkcd.com/927/)
brundolf 4y ago
Our industry has been chasing the dragon of universal GUI components for nearly as long as there have been GUIs. What's different this time?
paulcam206 4y ago
Hey everyone -- I'm a dev on AdaptiveCards and happy to (attempt to) answer any questions folks might have :) I'd be remiss if I didn't mention our monthly Community Calls. Feel free to join in! You can grab a .ics reminder here: https://aka.ms/adaptivecardscommunitycall https://aka.ms/adaptivecardscommunitycall

I maintain a list of Adaptive Cards projects and resources here: https://github.com/miguelrochefort/awesome-adaptive-cards https://github.com/miguelrochefort/awesome-adaptive-cards

Gys 4y ago

This reminds me of https://jasonette.com/ https://jasonette.com/ Very interesting idea because it can be much more platform agnostic then html. Ideally resulting in moving away from the html everywhere, which often means including a separate browser everywhere and non native UIs.

jagged-chisel 4y ago
Docs are 404, the Heroku app is nonexistent … is jasonette still alive?
- easrng 4y ago
  https://github.com/jasonelle/jasonelle/wiki/History https://github.com/jasonelle/jasonelle/wiki/History

michaelmior 4y ago

Would be great to see something like catch on for other chat platforms as well (e.g. Slack, Messenger, etc.). Being able to define a UI once for all those would be great.

hyperrail 4y ago
Webex's Slack-like chat room service uses Adaptive Cards to define interactive messages from bots, just like Microsoft Teams does. I do agree with you that it should catch on more and it's unfortunate that it hasn't.
- valgaze 4y ago
  + 1 ex. You can do something like this: https://i.imgur.com/dcbzn3w.gif https://i.imgur.com/dcbzn3w.gif I do a lot of thinking about conversation design "tooling" for automated agents and I found wrangling Adaptive Cards with "dynamic" content was a bit annoying since there's so many options. I needed a simple subset of functionality to cover most cases and to add features like tappable suggestion "chips" I made little a utility called "Speedycard" which lets you "build" Adaptive Cards kinda like this:g const myCard = new SpeedyCard() .setTitle('System is ') .setSubtitle('If you see this card, everything is working') .setImage('https://i.imgur.com/VQoXfHn.gif') .setInput(`What's on your mind?`) .setUrl('https://www.youtube.com/watch?v=3GwjfUFyY6M', 'Take a moment to celebrate') .setTable([[`Bot's Date`, new Date().toDateString()], ["Bot's Uptime", `${String(process.uptime())}s`]]) .setData({mySpecialData: {a:1, b:2}}) const fullCard = myCard.render() // JSON passed to an API/client While I am convinced about the importance of conversation design and being thoughtful about this stuff sometimes it's convenient to just have a little form and the user adds their data and call it day Cards source (can use this anywhere): https://github.com/valgaze/speedybot/blob/master/src/cards.ts https://github.com/valgaze/speedybot/blob/master/src/cards.t... Experiment optimized for Cloudflare Workers: https://www.npmjs.com/package/speedybot-hub https://www.npmjs.com/package/speedybot-hub Main Library: https://www.npmjs.com/package/speedybot https://www.npmjs.com/package/speedybot

password4321 4y ago

Smells new. Anyone willing to recommend how long to wait before adopting a new MS technology?

hazz99 4y ago
I don’t believe it’s particularly new. Microsoft has thoroughly embraced this in the Teams API, so I wouldn’t expect it to go away soon.
nhance 4y ago
This has been around for several years now at the least
hyperrail 4y ago
Adaptive Cards have been around since 2016: https://github.com/microsoft/AdaptiveCards/graphs/contributors https://github.com/microsoft/AdaptiveCards/graphs/contributo... It's a healthy project, with multiple development teams within Microsoft both using and contributing to it. If you scroll down the originally linked homepage, you see 4 Microsoft products that have used it, 3 of which are in active development today.
- vyrotek 4y ago
  It looks like a lot of documentation is pointing to the wrong branch. It took me a minute to understand why I was looking at code that hadn't been touched in 2+ years. The docs are pointing to the "master" branch but everything has moved to the "main" branch. ex. https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/getting-started https://docs.microsoft.com/en-us/adaptive-cards/rendering-ca...
  - paulcam206 4y ago
    filed https://github.com/microsoft/AdaptiveCards/issues/7475 https://github.com/microsoft/AdaptiveCards/issues/7475 to track :)
brokenkebab2 4y ago

eternityforest 4y ago

Looks amazing! It's not every day I see a new technology that actually stands out. I could see a lot of apps being built largely as card galleries. Also, "Experience Owners" should be nominated for Buzzword of the Year. It's so incredibly plastic corporate buzzword-y, but actually kind of does give a bit of a buzz when you see it.

deleted 4y ago

[deleted]

bloopernova 4y ago

Unfortunately it didn't work in Linux Firefox :(

jacknews 4y ago

Is it just me or is the video a word-soup marketing pitch of benefits, possibilities etc? 'Open yourself up to content, with adaptive cards'. What does this thing actually do, and how does it work?

nsriv 4y ago
Perhaps the video is, but your questions are answered in the text above the video.
paulcam206 4y ago
When I was first introduced to AdaptiveCards, it took me a while to grok just what it's for. This video is a good walkthrough covering the type of scenarios that are enabled with their use: https://www.youtube.com/watch?v=wT1yFr_j6IM https://www.youtube.com/watch?v=wT1yFr_j6IM

dchuk 4y ago

Interesting, seems similar to what Joel is doing here: https://blockprotocol.org https://blockprotocol.org

vladsanchez 4y ago
Coincidence? This all reminds me of [https://en.wikipedia.org/wiki/Microformat https://en.wikipedia.org/wiki/Microformat]

spankalee 4y ago

This is what HTML is for, and if you look at the schema it has many of the same element/container concepts that HTML has. A subset of HTML designed for easy embedding, possibly removing features and quirks and allowing for a smaller and faster runtime was the goal of the project that directly preceded and led to Flutter. I wish that goal had remained so that we had a cross-platform UI runtime that was still lightweight on the web.

paulcam206 4y ago
Probably the first thing to call out is that solving cross-plat UI in the general case is a non-goal for Adaptive Cards. It's not intended to replace e.g. ReactNative. Adaptive Cards exists to allow small snippets of card-like UI to be defined and shared across platforms. The problem with using HTML (or a subset thereof) to solve this problem is that it necessarily requires HTML rendering on every platform you want to support. If your intent as a dev is to integrate card-like experiences into an existing app, requiring a web rendering surface might be too heavyweight... and even if apps chose to adopt web rendering, there would still be the issue of getting styling to line up. The goal of Adaptive Cards is to use a platform's native rendering and controls. Apps should get native performance with native styling. Of note, these cards may not be originating from within your team, so there's no way to guarantee that card authors will make design choices that fit within the design language of your app. The solution is to only allow for semantic styling choices (e.g. card author can't specify "Ubuntu Mono" as the font, but can specify "monospace"). The app hosting the card gets to define how these semantic choices are actually implemented.

eliseumds 4y ago

Wow, this is very hard to read. It should be illegal to use light grey text on a white background.

Tao332 4y ago
It's technically black, but the font weight is ultra ultra light.

thermin 4y ago

Seems incredibly like an intentionally style-less, script-less version of HTML: a tree structure of blocks, tables, lists etc with simple actions like "show", "hide" and "submit form".

latchkey 4y ago

This concept is patented: https://patents.justia.com/patent/9285977 https://patents.justia.com/patent/9285977 https://www.wrap.co/ https://www.wrap.co/

nynx 4y ago
Imagine thinking that software patents are legitimate.
- latchkey 4y ago
  To be clear, I didn't say it was legitimate.

wokwokwok 4y ago

Use this in teams automation. It’s just another priority format you need a full blown editor to build your UI in. Difficult to debug with, but works fine as long as you hardly ever need to change your templates.

TeeMassive 4y ago

Makes sense to have the Markdown equivalent but for UI. (In fact that wouldn't be a bad idea.)

stayinrhythm 4y ago

"there are now 15 competing standards" vibes (https://xkcd.com/927/ https://xkcd.com/927/)

brundolf 4y ago

Our industry has been chasing the dragon of universal GUI components for nearly as long as there have been GUIs. What's different this time?

paulcam206 4y ago

Hey everyone -- I'm a dev on AdaptiveCards and happy to (attempt to) answer any questions folks might have :) I'd be remiss if I didn't mention our monthly Community Calls. Feel free to join in! You can grab a .ics reminder here: https://aka.ms/adaptivecardscommunitycall https://aka.ms/adaptivecardscommunitycall