Skip to content

Commit

Permalink
Merge pull request #51 from southworkscom/node-samples-updates
Browse files Browse the repository at this point in the history
[Node-Samples] Update to botbuilder 3.5.1
  • Loading branch information
willportnoy authored Jan 23, 2017
2 parents 4801b87 + 51ed21e commit 4e30d50
Show file tree
Hide file tree
Showing 144 changed files with 1,786 additions and 1,440 deletions.
7 changes: 5 additions & 2 deletions Node/cards-CarouselCards/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ A sample bot that sends multiple rich card attachments in a single message using

The minimum prerequisites to run this sample are:
* Latest Node.js with NPM. Download it from [here](https://nodejs.org/en/download/).
* The Bot Framework Emulator. To install the Bot Framework Emulator, download it from [here](https://aka.ms/bf-bc-emulator). Please refer to [this documentation article](https://docs.botframework.com/en-us/csharp/builder/sdkreference/gettingstarted.html#emulator) to know more about the Bot Framework Emulator.
* The Bot Framework Emulator. To install the Bot Framework Emulator, download it from [here](https://emulator.botframework.com/). Please refer to [this documentation article](https://github.com/microsoft/botframework-emulator/wiki/Getting-Started) to know more about the Bot Framework Emulator.
* **[Recommended]** Visual Studio Code for IntelliSense and debugging, download it from [here](https://code.visualstudio.com/) for free.

### Code Highlights

You can send multiple rich card attachments in a single message. On most channels they will be sent as a list of rich cards, but some channels (like Skype and Facebook) can render them as a carousel of rich cards. The `Message.attachmentLayout()` method allows you to control how the rich cards will be rendered. Check out the key code located in [app.js](app.js#L24) class where the attachments layout is changed to the Carousel mode.
You can send multiple rich card attachments in a single message. On most channels they will be sent as a list of rich cards, but some channels (like Skype and Facebook) can render them as a carousel of rich cards. The `Message.attachmentLayout()` method allows you to control how the rich cards will be rendered. Check out the key code located in [app.js](app.js#L23) class where the attachments layout is changed to the Carousel mode.


> Note: Only the [Hero](https://docs.botframework.com/en-us/node/builder/chat-reference/classes/_botbuilder_d_.herocard.html) and [Thumbnail](https://docs.botframework.com/en-us/node/builder/chat-reference/classes/_botbuilder_d_.thumbnailcard.html) Cards are supported for the Carousel AttachmentLayout mode.
Expand Down Expand Up @@ -56,6 +56,8 @@ To get more information about how to get started in Bot Builder for Node and Att
* [Message.attachments](https://docs.botframework.com/en-us/node/builder/chat-reference/classes/_botbuilder_d_.message.html#attachments)
* [Message.attachmentLayout](https://docs.botframework.com/en-us/node/builder/chat-reference/classes/_botbuilder_d_.message.html#attachmentlayout)
* [AttachmentLayout](https://docs.botframework.com/en-us/node/builder/chat-reference/modules/_botbuilder_d_.html#attachmentlayout)
* [Adding Attachments to a Message](https://docs.botframework.com/en-us/core-concepts/attachments)
* [Carousel Layout in Microsoft Teams](https://msdn.microsoft.com/en-us/microsoft-teams/bots#carousel-layout)
* [RichCards sample](../cards-RichCards)

> **Limitations**
Expand All @@ -66,6 +68,7 @@ To get more information about how to get started in Bot Builder for Node and Att
> The features used in this sample are fully supported in the following channels:
> - Skype
> - Facebook
> - Microsoft Teams
>
> They are also supported, with some limitations, in the following channels:
> - Telegram
Expand Down
25 changes: 12 additions & 13 deletions Node/cards-CarouselCards/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,15 @@ server.listen(process.env.port || process.env.PORT || 3978, function () {
console.log('%s listening to %s', server.name, server.url);
});

// Create chat bot
// Create chat bot and listen to messages
var connector = new builder.ChatConnector({
appId: process.env.MICROSOFT_APP_ID,
appPassword: process.env.MICROSOFT_APP_PASSWORD
});
var bot = new builder.UniversalBot(connector);
server.post('/api/messages', connector.listen());

// Bot dialog
bot.dialog('/', function (session) {
// Bot setup
var bot = new builder.UniversalBot(connector, function (session) {
var cards = getCardsAttachments();

// create reply with Carousel AttachmentLayout
Expand All @@ -31,10 +30,10 @@ function getCardsAttachments(session) {
return [
new builder.HeroCard(session)
.title('Azure Storage')
.subtitle('Massively scalable cloud storage for your applications')
.subtitle('Offload the heavy lifting of data center management')
.text('Store and help protect your data. Get durable, highly available data storage across the globe and pay only for what you use.')
.images([
builder.CardImage.create(session, 'https://acom.azurecomcdn.net/80C57D/cdn/mediahandler/docarticles/dpsmedia-prod/azure.microsoft.com/en-us/documentation/articles/storage-introduction/20160801042915/storage-concepts.png')
builder.CardImage.create(session, 'https://docs.microsoft.com/en-us/azure/storage/media/storage-introduction/storage-concepts.png')
])
.buttons([
builder.CardAction.openUrl(session, 'https://azure.microsoft.com/en-us/services/storage/', 'Learn More')
Expand All @@ -45,18 +44,18 @@ function getCardsAttachments(session) {
.subtitle('Blazing fast, planet-scale NoSQL')
.text('NoSQL service for highly available, globally distributed apps—take full advantage of SQL and JavaScript over document and key-value data without the hassles of on-premises or virtual machine-based cloud database options.')
.images([
builder.CardImage.create(session, 'https://sec.ch9.ms/ch9/29f4/beb4b953-ab91-4a31-b16a-71fb6d6829f4/WhatisAzureDocumentDB_960.jpg')
builder.CardImage.create(session, 'https://docs.microsoft.com/en-us/azure/documentdb/media/documentdb-introduction/json-database-resources1.png')
])
.buttons([
builder.CardAction.openUrl(session, 'https://azure.microsoft.com/en-us/services/documentdb/', 'Learn More')
]),

new builder.HeroCard(session)
.title('Azure Functions')
.subtitle('Process events with serverless code')
.text('Azure Functions is a serverless event driven experience that extends the existing Azure App Service platform. These nano-services can scale based on demand and you pay only for the resources you consume.')
.subtitle('Process events with a serverless code architecture')
.text('An event-based serverless compute experience to accelerate your development. It can scale based on demand and you pay only for the resources you consume.')
.images([
builder.CardImage.create(session, 'https://azurecomcdn.azureedge.net/cvt-8636d9bb8d979834d655a5d39d1b4e86b12956a2bcfdb8beb04730b6daac1b86/images/page/services/functions/azure-functions-screenshot.png')
builder.CardImage.create(session, 'https://azurecomcdn.azureedge.net/cvt-5daae9212bb433ad0510fbfbff44121ac7c759adc284d7a43d60dbbf2358a07a/images/page/services/functions/01-develop.png')
])
.buttons([
builder.CardAction.openUrl(session, 'https://azure.microsoft.com/en-us/services/functions/', 'Learn More')
Expand All @@ -67,10 +66,10 @@ function getCardsAttachments(session) {
.subtitle('Build powerful intelligence into your applications to enable natural and contextual interactions')
.text('Enable natural and contextual interaction with tools that augment users\' experiences using the power of machine-based intelligence. Tap into an ever-growing collection of powerful artificial intelligence algorithms for vision, speech, language, and knowledge.')
.images([
builder.CardImage.create(session, 'https://azurecomcdn.azureedge.net/cvt-8636d9bb8d979834d655a5d39d1b4e86b12956a2bcfdb8beb04730b6daac1b86/images/page/services/functions/azure-functions-screenshot.png')
builder.CardImage.create(session, 'https://azurecomcdn.azureedge.net/cvt-68b530dac63f0ccae8466a2610289af04bdc67ee0bfbc2d5e526b8efd10af05a/images/page/services/cognitive-services/cognitive-services.png')
])
.buttons([
builder.CardAction.openUrl(session, 'https://azure.microsoft.com/en-us/services/functions/', 'Learn More')
builder.CardAction.openUrl(session, 'https://azure.microsoft.com/en-us/services/cognitive-services/', 'Learn More')
])
];
}
}
Binary file modified Node/cards-CarouselCards/images/outcome-emulator.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 16 additions & 4 deletions Node/cards-CarouselCards/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,26 @@
"name": "botbuilder-sample-carouselcards",
"version": "1.0.0",
"description": "Bot Builder Sample - Carousel Cards",
"main": "index.js",
"scripts": {
"start": "node app.js"
},
"author": "",
"author": "Microsoft Corp.",
"license": "MIT",
"keywords": [
"botbuilder",
"bots",
"chatbots",
"botbuilder-samples"
],
"bugs": {
"url": "https://github.com/Microsoft/BotBuilder-Samples/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/Microsoft/BotBuilder-Samples.git"
},
"dependencies": {
"botbuilder": "^3.2.3",
"restify": "^4.1.1"
"botbuilder": "^3.5.1",
"restify": "^4.3.0"
}
}
Loading

0 comments on commit 4e30d50

Please sign in to comment.