CardFactory class

A set of utility functions designed to assist with the formatting of the various card types a bot can return.

Remarks

All of these functions return an Attachment which can be added to an Activity directly or passed as input to a MessageFactory method.

const card = CardFactory.heroCard(
     'White T-Shirt',
     ['https://example.com/whiteShirt.jpg'],
     ['buy']
);

Methods

actions

Returns a properly formatted array of actions. Supports converting strings to messageBack actions (note: using 'imBack' for now as 'messageBack' doesn't work properly in emulator.)

adaptiveCard

Returns an attachment for an adaptive card. The attachment will contain the card and the appropriate contentType.

animationCard

Returns an attachment for an animation card.

audioCard

Returns an attachment for an audio card.

heroCard

Returns an attachment for a hero card.

heroCard

Returns an attachment for a hero card.

images

Returns a properly formatted array of card images.

media

Returns a properly formatted array of media url objects.

oauthCard

Returns an attachment for an OAuth card used by the Bot Frameworks Single Sign On (SSO) service.

receiptCard

Returns an attachment for a receipt card. The attachment will contain the card and the appropriate contentType.

signinCard

Returns an attachment for a signin card. For channels that don't natively support signin cards an alternative message will be rendered.

thumbnailCard

Returns an attachment for a thumbnail card. Thumbnail cards are similar to hero cards but instead of a full width image, they're typically rendered with a smaller thumbnail version of the image on either side and the text will be rendered in column next to the image. Any buttons will typically show up under the card.

thumbnailCard

Returns an attachment for a thumbnail card. Thumbnail cards are similar to hero cards but instead of a full width image, they're typically rendered with a smaller thumbnail version of the image on either side and the text will be rendered in column next to the image. Any buttons will typically show up under the card.

videoCard

Returns an attachment for a video card.

Method Details

actions

Returns a properly formatted array of actions. Supports converting strings to messageBack actions (note: using 'imBack' for now as 'messageBack' doesn't work properly in emulator.)

static function actions(actions: string | CardAction[] | undefined)
Parameters
actions
string | CardAction | undefined[]

Array of card actions or strings. Strings will be converted to messageBack actions.

Returns
CardAction[]

adaptiveCard

Returns an attachment for an adaptive card. The attachment will contain the card and the appropriate contentType.

static function adaptiveCard(card: any)
Parameters
card
any

The adaptive card to return as an attachment.

Returns
Attachment
Remarks

Adaptive Cards are a new way for bots to send interactive and immersive card content to users. For channels that don't yet support Adaptive Cards natively, the Bot Framework will down render the card to an image that's been styled to look good on the target channel. For channels that support hero cards you can continue to include Adaptive Card actions and they will be sent as buttons along with the rendered version of the card.

For more information about Adaptive Cards and to download the latest SDK, visit adaptivecards.io.

const card = CardFactory.adaptiveCard({
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
      {
         "type": "TextBlock",
         "text": "Default text input"
      }
  ],
  "actions": [
      {
         "type": "Action.Submit",
         "title": "OK"
      }
  ]
});

animationCard

Returns an attachment for an animation card.

static function animationCard(title: string, media: string | MediaUrl[], buttons?: string | CardAction[], other?: Partial<AnimationCard>)
Parameters
title
string

The cards title.

media
string | MediaUrl[]

Media URL's for the card.

buttons
string | CardAction[]

(Optional) set of buttons to include on the card.

other
Partial<AnimationCard>

(Optional) additional properties to include on the card.

Returns
Attachment

audioCard

Returns an attachment for an audio card.

static function audioCard(title: string, media: string | MediaUrl[], buttons?: string | CardAction[], other?: Partial<AudioCard>)
Parameters
title
string

The cards title.

media
string | MediaUrl[]

Media URL's for the card.

buttons
string | CardAction[]

(Optional) set of buttons to include on the card.

other
Partial<AudioCard>

(Optional) additional properties to include on the card.

Returns
Attachment

heroCard

Returns an attachment for a hero card.

static function heroCard(title: string, images?: string | CardImage[], buttons?: string | CardAction[], other?: Partial<HeroCard>)
Parameters
title
string

The cards title.

images
string | CardImage[]

(Optional) set of images to include on the card.

buttons
string | CardAction[]

(Optional) set of buttons to include on the card.

other
Partial<HeroCard>

(Optional) additional properties to include on the card.

Returns
Attachment
Remarks

Hero cards tend to have one dominant full width image and the cards text & buttons can usually be found below the image.

const card = CardFactory.heroCard(
     'White T-Shirt',
     ['https://example.com/whiteShirt.jpg'],
     ['buy']
);

heroCard

Returns an attachment for a hero card.

static function heroCard(title: string, text: string, images?: string | CardImage[], buttons?: string | CardAction[], other?: Partial<HeroCard>)
Parameters
title
string
text
string
images
string | CardImage[]
buttons
string | CardAction[]
other
Partial<HeroCard>
Returns
Attachment
Remarks

Hero cards tend to have one dominant full width image and the cards text & buttons can usually be found below the image.

const card = CardFactory.heroCard(
     'White T-Shirt',
     ['https://example.com/whiteShirt.jpg'],
     ['buy']
);

images

Returns a properly formatted array of card images.

static function images(images: string | CardImage[] | undefined)
Parameters
images
string | CardImage | undefined[]

Array of card images or strings. Strings will be converted to card images.

Returns
CardImage[]

media

Returns a properly formatted array of media url objects.

static function media(links: string | MediaUrl[] | undefined)
Parameters
links
string | MediaUrl | undefined[]

Array of media url objects or strings. Strings will be converted to a media url object.

Returns
MediaUrl[]

oauthCard

Returns an attachment for an OAuth card used by the Bot Frameworks Single Sign On (SSO) service.

static function oauthCard(connectionName: string, title: string, text?: string)
Parameters
connectionName
string

The name of the OAuth connection to use.

title
string

Title of the cards signin button.

text
string

(Optional) additional text to include on the card.

Returns
Attachment

receiptCard

Returns an attachment for a receipt card. The attachment will contain the card and the appropriate contentType.

static function receiptCard(card: ReceiptCard)
Parameters
card
ReceiptCard

The adaptive card to return as an attachment.

Returns
Attachment

signinCard

Returns an attachment for a signin card. For channels that don't natively support signin cards an alternative message will be rendered.

static function signinCard(title: string, url: string, text?: string)
Parameters
title
string

Title of the cards signin button.

url
string

The link to the signin page the user needs to visit.

text
string

(Optional) additional text to include on the card.

Returns
Attachment

thumbnailCard

Returns an attachment for a thumbnail card. Thumbnail cards are similar to hero cards but instead of a full width image, they're typically rendered with a smaller thumbnail version of the image on either side and the text will be rendered in column next to the image. Any buttons will typically show up under the card.

static function thumbnailCard(title: string, images?: string | CardImage[], buttons?: string | CardAction[], other?: Partial<ThumbnailCard>)
Parameters
title
string

The cards title.

images
string | CardImage[]

(Optional) set of images to include on the card.

buttons
string | CardAction[]

(Optional) set of buttons to include on the card.

other
Partial<ThumbnailCard>

(Optional) additional properties to include on the card.

Returns
Attachment

thumbnailCard

Returns an attachment for a thumbnail card. Thumbnail cards are similar to hero cards but instead of a full width image, they're typically rendered with a smaller thumbnail version of the image on either side and the text will be rendered in column next to the image. Any buttons will typically show up under the card.

static function thumbnailCard(title: string, text: string, images?: string | CardImage[], buttons?: string | CardAction[], other?: Partial<ThumbnailCard>)
Parameters
title
string
text
string
images
string | CardImage[]
buttons
string | CardAction[]
other
Partial<ThumbnailCard>
Returns
Attachment

videoCard

Returns an attachment for a video card.

static function videoCard(title: string, media: string | MediaUrl[], buttons?: string | CardAction[], other?: Partial<VideoCard>)
Parameters
title
string

The cards title.

media
string | MediaUrl[]

Media URLs for the card.

buttons
string | CardAction[]

(Optional) set of buttons to include on the card.

other
Partial<VideoCard>

(Optional) additional properties to include on the card.

Returns
Attachment