From 11dd2fb6c34c9519d101f2338701fb1366851971 Mon Sep 17 00:00:00 2001 From: Amit Agarwal Date: Mon, 1 Oct 2018 12:05:31 -0700 Subject: [PATCH 1/3] List Card Sample App --- src/dialogs/RootDialog.ts | 2 + src/dialogs/examples/basic/ListCard.ts | 41 ++++++++++++++++ src/dialogs/examples/basic/ListCardDialog.ts | 51 ++++++++++++++++++++ src/locale/en/index.json | 5 ++ src/utils/DialogIds.ts | 1 + src/utils/DialogMatches.ts | 1 + 6 files changed, 101 insertions(+) create mode 100644 src/dialogs/examples/basic/ListCard.ts create mode 100644 src/dialogs/examples/basic/ListCardDialog.ts diff --git a/src/dialogs/RootDialog.ts b/src/dialogs/RootDialog.ts index 7220e4d4..2ac4a8c2 100644 --- a/src/dialogs/RootDialog.ts +++ b/src/dialogs/RootDialog.ts @@ -41,6 +41,7 @@ import { UpdateTextMsgSetupDialog } from "./examples/teams/UpdateTextMsgSetupDia import { NotifyDialog } from "./examples/teams/NotifyDialog"; import { PopupSignInDialog } from "./examples/basic/PopupSignInDialog"; import { AdaptiveCardDialog } from "./examples/basic/AdaptiveCardDialog"; +import { ListCardDialog } from "./examples/basic/ListCardDialog"; // *************************** END OF EXAMPLES ********************************* // Add imports for dialogs @@ -105,6 +106,7 @@ export class RootDialog extends builder.IntentDialog { new NotifyDialog(bot); new PopupSignInDialog(bot); new AdaptiveCardDialog(bot); + new ListCardDialog(bot); // *************************** END OF EXAMPLES ********************************* // Add child dialogs diff --git a/src/dialogs/examples/basic/ListCard.ts b/src/dialogs/examples/basic/ListCard.ts new file mode 100644 index 00000000..5e1b48e0 --- /dev/null +++ b/src/dialogs/examples/basic/ListCard.ts @@ -0,0 +1,41 @@ +import * as builder from "botbuilder"; + +// class that simplifies building list cards. List cards provides rich layout to show items in list layout. +export class ListCard { + public contentType: string; + public title: string; + public items: ListCardItem[]; + public buttons: Array; + + constructor() + { + this.contentType = "application/vnd.microsoft.teams.card.list"; + } + public ToAttachment(): builder.IAttachment + { + let attachment: builder.IAttachment = { + contentType: this.contentType, + content: this, + }; + + return attachment; + } +} + +// class that simplifies building list items for list card. +export class ListCardItem { + public id: string; + public type: ListCardItemType; + public title: string; + public subtitle: string; + public icon: string; + public tap: builder.CardAction; +} + +// below enum represent differnt item type supported in list card. +export enum ListCardItemType { + Person = "person", + File = "file", + Separator = "separator", + ResultItem = "resultItem", +} diff --git a/src/dialogs/examples/basic/ListCardDialog.ts b/src/dialogs/examples/basic/ListCardDialog.ts new file mode 100644 index 00000000..d411632b --- /dev/null +++ b/src/dialogs/examples/basic/ListCardDialog.ts @@ -0,0 +1,51 @@ +import * as builder from "botbuilder"; +import * as config from "config"; +import { TriggerActionDialog } from "../../../utils/TriggerActionDialog"; +import { DialogIds } from "../../../utils/DialogIds"; +import { DialogMatches } from "../../../utils/DialogMatches"; +import { ListCard, ListCardItem, ListCardItemType } from "../basic/ListCard"; +import { Strings } from "../../../locale/locale"; + +export class ListCardDialog extends TriggerActionDialog { + + private static async step1(session: builder.Session, args?: any | builder.IDialogResult, next?: (args?: builder.IDialogResult) => void): Promise { + let list = Array(); + + // list item1 + let item1 = new ListCardItem(); + item1.type = ListCardItemType.ResultItem; + item1.icon = config.get("app.baseUri") + "/assets/computer_people.jpg"; + item1.title = session.gettext(Strings.list_card_item1_title); + item1.subtitle = session.gettext(Strings.list_card_item1_subtitle); + + // list item2 + let item2 = new ListCardItem(); + item2.type = ListCardItemType.ResultItem; + item2.icon = config.get("app.baseUri") + "/assets/computer_person.jpg"; + item2.title = session.gettext(Strings.list_card_item2_title); + item2.subtitle = session.gettext(Strings.list_card_item1_subtitle); + + // we have added only two items for this sample, list card support multiple items as needed + list.push(item1); + list.push(item2); + + let card = new ListCard(); + card.title = session.gettext(Strings.list_card_title); + card.items = list; + + let message = new builder.Message(session); + message.addAttachment(card.ToAttachment()); + session.send(message); + session.endDialog(); + } + + constructor( + bot: builder.UniversalBot, + ) { + super(bot, + DialogIds.ListCardDialogId, + DialogMatches.ListCardDialogMatch, + ListCardDialog.step1, + ); + } +} diff --git a/src/locale/en/index.json b/src/locale/en/index.json index 743cbbc8..c14b3014 100644 --- a/src/locale/en/index.json +++ b/src/locale/en/index.json @@ -142,5 +142,10 @@ "popupsignin_card_title":"Please click below for popup sign-in experience", "popupsignin_button_title":"Sign In", "popupsignin_successful":"Authentication popup closed, magic number passed through - %s", + "list_card_item1_title":"Item1 title", + "list_card_item2_title":"Item2 title", + "list_card_item1_subtitle":"Item1 sub title", + "list_card_item2_subtitle":"Item2 sub title", + "list_card_title":"List card title here", "end_of_example_string_responses": "******************************* EVERYTHING ABOVE HERE IS FOR A TEMPLATE EXAMPLE DIALOG *******************************" } \ No newline at end of file diff --git a/src/utils/DialogIds.ts b/src/utils/DialogIds.ts index 30f0ea6f..e90ebde3 100644 --- a/src/utils/DialogIds.ts +++ b/src/utils/DialogIds.ts @@ -43,6 +43,7 @@ export const DialogIds = { NotifyDialogId: "NotifyDialog", PopupSignInDialogId: "PopupSignInDialog", AdaptiveCardDialogId: "AdaptiveCardDialog", + ListCardDialogId: "ListCardDialog", // *************************** END OF EXAMPLES ********************************* // Add entries for dialog ids diff --git a/src/utils/DialogMatches.ts b/src/utils/DialogMatches.ts index 57dfd8cb..1d838a0d 100644 --- a/src/utils/DialogMatches.ts +++ b/src/utils/DialogMatches.ts @@ -42,6 +42,7 @@ export const DialogMatches = { NotifyDialogMatch: /notify/i, PopUpSignInDialogMatch: /signin/i, AdaptiveCardDialogMatch: /adaptive card/i, + ListCardDialogMatch: /list card/i, // *************************** END OF EXAMPLES ********************************* // Add regex or string intent matches for dialogs From 277a90fa36b75830aa02ba8a9239bf16155539c4 Mon Sep 17 00:00:00 2001 From: Amit Agarwal Date: Thu, 4 Oct 2018 12:01:13 -0700 Subject: [PATCH 2/3] Updated teams bot builder package List Card --- package.json | 2 +- src/dialogs/examples/basic/ListCard.ts | 41 -------------------- src/dialogs/examples/basic/ListCardDialog.ts | 33 ++++++++-------- 3 files changed, 18 insertions(+), 58 deletions(-) delete mode 100644 src/dialogs/examples/basic/ListCard.ts diff --git a/package.json b/package.json index b64cc7c0..866583c1 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "async": "^2.4.0", "bluebird": "^3.4.7", "botbuilder": "^3.15.0", - "botbuilder-teams": "^0.2.1", + "botbuilder-teams": "^0.2.3-beta1", "chrono-node": "^1.2.5", "config": "^1.25.1", "crypto": "0.0.3", diff --git a/src/dialogs/examples/basic/ListCard.ts b/src/dialogs/examples/basic/ListCard.ts deleted file mode 100644 index 5e1b48e0..00000000 --- a/src/dialogs/examples/basic/ListCard.ts +++ /dev/null @@ -1,41 +0,0 @@ -import * as builder from "botbuilder"; - -// class that simplifies building list cards. List cards provides rich layout to show items in list layout. -export class ListCard { - public contentType: string; - public title: string; - public items: ListCardItem[]; - public buttons: Array; - - constructor() - { - this.contentType = "application/vnd.microsoft.teams.card.list"; - } - public ToAttachment(): builder.IAttachment - { - let attachment: builder.IAttachment = { - contentType: this.contentType, - content: this, - }; - - return attachment; - } -} - -// class that simplifies building list items for list card. -export class ListCardItem { - public id: string; - public type: ListCardItemType; - public title: string; - public subtitle: string; - public icon: string; - public tap: builder.CardAction; -} - -// below enum represent differnt item type supported in list card. -export enum ListCardItemType { - Person = "person", - File = "file", - Separator = "separator", - ResultItem = "resultItem", -} diff --git a/src/dialogs/examples/basic/ListCardDialog.ts b/src/dialogs/examples/basic/ListCardDialog.ts index d411632b..25377e54 100644 --- a/src/dialogs/examples/basic/ListCardDialog.ts +++ b/src/dialogs/examples/basic/ListCardDialog.ts @@ -1,40 +1,41 @@ +import * as builderteams from "botbuilder-teams"; import * as builder from "botbuilder"; import * as config from "config"; import { TriggerActionDialog } from "../../../utils/TriggerActionDialog"; import { DialogIds } from "../../../utils/DialogIds"; import { DialogMatches } from "../../../utils/DialogMatches"; -import { ListCard, ListCardItem, ListCardItemType } from "../basic/ListCard"; +// import { ListCard, ListCardItem, ListCardItemType } from "../basic/ListCard"; import { Strings } from "../../../locale/locale"; export class ListCardDialog extends TriggerActionDialog { private static async step1(session: builder.Session, args?: any | builder.IDialogResult, next?: (args?: builder.IDialogResult) => void): Promise { - let list = Array(); + let list = Array(); // list item1 - let item1 = new ListCardItem(); - item1.type = ListCardItemType.ResultItem; - item1.icon = config.get("app.baseUri") + "/assets/computer_people.jpg"; - item1.title = session.gettext(Strings.list_card_item1_title); - item1.subtitle = session.gettext(Strings.list_card_item1_subtitle); + let item1 = new builderteams.ListCardItem(); + item1.type(builderteams.ListCardItemType.resultItem); + item1.icon(config.get("app.baseUri") + "/assets/computer_people.jpg"); + item1.title(session.gettext(Strings.list_card_item1_title)); + item1.subtitle(session.gettext(Strings.list_card_item1_subtitle)); // list item2 - let item2 = new ListCardItem(); - item2.type = ListCardItemType.ResultItem; - item2.icon = config.get("app.baseUri") + "/assets/computer_person.jpg"; - item2.title = session.gettext(Strings.list_card_item2_title); - item2.subtitle = session.gettext(Strings.list_card_item1_subtitle); + let item2 = new builderteams.ListCardItem(); + item2.type(builderteams.ListCardItemType.resultItem); + item2.icon(config.get("app.baseUri") + "/assets/computer_person.jpg"); + item2.title(session.gettext(Strings.list_card_item2_title)); + item2.subtitle(session.gettext(Strings.list_card_item1_subtitle)); // we have added only two items for this sample, list card support multiple items as needed list.push(item1); list.push(item2); - let card = new ListCard(); - card.title = session.gettext(Strings.list_card_title); - card.items = list; + let card = new builderteams.ListCard(); + card.title(session.gettext(Strings.list_card_title)); + card.items(list); let message = new builder.Message(session); - message.addAttachment(card.ToAttachment()); + message.addAttachment(card.toAttachment()); session.send(message); session.endDialog(); } From 8308ce7b9ab77a7a25442f88812a3d87ab0d39b2 Mon Sep 17 00:00:00 2001 From: Amit Agarwal Date: Thu, 4 Oct 2018 13:35:40 -0700 Subject: [PATCH 3/3] Used builder chain list card --- src/dialogs/examples/basic/ListCardDialog.ts | 43 +++++++------------- 1 file changed, 15 insertions(+), 28 deletions(-) diff --git a/src/dialogs/examples/basic/ListCardDialog.ts b/src/dialogs/examples/basic/ListCardDialog.ts index 25377e54..2edf2622 100644 --- a/src/dialogs/examples/basic/ListCardDialog.ts +++ b/src/dialogs/examples/basic/ListCardDialog.ts @@ -4,39 +4,26 @@ import * as config from "config"; import { TriggerActionDialog } from "../../../utils/TriggerActionDialog"; import { DialogIds } from "../../../utils/DialogIds"; import { DialogMatches } from "../../../utils/DialogMatches"; -// import { ListCard, ListCardItem, ListCardItemType } from "../basic/ListCard"; import { Strings } from "../../../locale/locale"; export class ListCardDialog extends TriggerActionDialog { private static async step1(session: builder.Session, args?: any | builder.IDialogResult, next?: (args?: builder.IDialogResult) => void): Promise { - let list = Array(); - - // list item1 - let item1 = new builderteams.ListCardItem(); - item1.type(builderteams.ListCardItemType.resultItem); - item1.icon(config.get("app.baseUri") + "/assets/computer_people.jpg"); - item1.title(session.gettext(Strings.list_card_item1_title)); - item1.subtitle(session.gettext(Strings.list_card_item1_subtitle)); - - // list item2 - let item2 = new builderteams.ListCardItem(); - item2.type(builderteams.ListCardItemType.resultItem); - item2.icon(config.get("app.baseUri") + "/assets/computer_person.jpg"); - item2.title(session.gettext(Strings.list_card_item2_title)); - item2.subtitle(session.gettext(Strings.list_card_item1_subtitle)); - - // we have added only two items for this sample, list card support multiple items as needed - list.push(item1); - list.push(item2); - - let card = new builderteams.ListCard(); - card.title(session.gettext(Strings.list_card_title)); - card.items(list); - - let message = new builder.Message(session); - message.addAttachment(card.toAttachment()); - session.send(message); + let card = new builderteams.ListCard(session) + .title(session.gettext(Strings.list_card_title)) + // item1 + .addItem(new builderteams.ListCardItem(session) + .icon(config.get("app.baseUri") + "/assets/computer_people.jpg") + .title(session.gettext(Strings.list_card_item1_title)) + .subtitle(session.gettext(Strings.list_card_item1_subtitle))) + // item2 + .addItem(new builderteams.ListCardItem(session) + .icon(config.get("app.baseUri") + "/assets/computer_person.jpg") + .title(session.gettext(Strings.list_card_item2_title)) + .subtitle(session.gettext(Strings.list_card_item2_subtitle))); + + session.send(new builder.Message(session) + .addAttachment(card)); session.endDialog(); }