CardFactory class

const { MessageFactory, CardFactory } = require('botbuilder');

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

Lists the content type schema for each card style.

static contentTypes: any

Property Value

Returns a properly formatted array of actions.

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

Parameters

Returns

Returns an attachment for an Adaptive Card.

static function adaptiveCard(card: any)

Parameters

Returns

Remarks

Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way. 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.

For example:

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"
      }
  ]
});

Returns an attachment for an animation card.

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

Parameters

Returns

Returns an attachment for an audio card.

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

Parameters

Returns

Returns an attachment for a hero card.

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

Parameters

Returns

Remarks

Hero cards tend to have one dominant, full-width image. Channels typically render the card's text and buttons below the image.

For example:

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

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

Parameters

Returns

Remarks

Hero cards tend to have one dominant, full-width image. Channels typically render the card's text and buttons below the image.

For example:

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

Returns a properly formatted array of card images.

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

Parameters

Returns

Returns a properly formatted array of media URL objects.

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

Parameters

Returns

Returns an attachment for an Office 365 connector card.

static function o365ConnectorCard(card: O365ConnectorCard)

Parameters

Returns

Remarks

For example:

const card = CardFactory.o365ConnectorCard({
  "title": "card title",
  "text": "card text",
  "summary": "O365 card summary",
  "themeColor": "#E67A9E",
  "sections": [
      {
          "title": "**section title**",
          "text": "section text",
          "activityTitle": "activity title",
      }
  ]
});

Returns an attachment for an OAuth card.

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

Parameters

Returns

Remarks

OAuth cards support the Bot Framework's single sign on (SSO) service.

Returns an attachment for a receipt card.

static function receiptCard(card: ReceiptCard)

Parameters

Returns

Returns an attachment for a sign-in card.

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

Parameters

Returns

Remarks

For channels that don't natively support sign-in cards, an alternative message is rendered.

Returns an attachment for a thumbnail card.

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

Parameters

Returns

Remarks

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. Channels typically render the card's text to one side of the image, with any buttons displayed below the card.

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

Parameters

Returns

Remarks

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. Channels typically render the card's text to one side of the image, with any buttons displayed below the card.

Returns an attachment for a video card.

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

Parameters

Returns