Compartir a través de

CardFactory class

  • Referencia
Paquete:
botbuilder-core

Proporciona métodos para dar formato a los distintos tipos de tarjeta que puede devolver un bot.

Comentarios

Todas estas funciones devuelven un objeto Attachment , que se puede agregar a la colección de datos adjuntos de una actividad existente directamente o pasar como entrada a uno de los métodos MessageFactory para generar una nueva actividad.

En este ejemplo se envía un mensaje que contiene una sola tarjeta prominente.

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);

Propiedades

contentTypes

Muestra el esquema de tipo de contenido para cada estilo de tarjeta.

Métodos

actions(string | CardAction[] | undefined)

Devuelve una matriz con formato correcto de acciones.
adaptiveCard(any)

Devuelve un archivo adjunto para una tarjeta adaptable.
animationCard(string, string | MediaUrl[], string | CardAction[], Partial<AnimationCard>)

Devuelve un archivo adjunto para una tarjeta de animación.
audioCard(string, string | MediaUrl[], string | CardAction[], Partial<AudioCard>)

Devuelve un archivo adjunto para una tarjeta de audio.
heroCard(string, string | CardImage[], string | CardAction[], Partial<HeroCard>)

Devuelve un archivo adjunto para una tarjeta prominente.
heroCard(string, string, string | CardImage[], string | CardAction[], Partial<HeroCard>)

Devuelve un archivo adjunto para una tarjeta prominente.
images(string | CardImage[] | undefined)

Devuelve una matriz con formato correcto de imágenes de tarjeta.
media(string | MediaUrl[] | undefined)

Devuelve una matriz con formato correcto de objetos de dirección URL multimedia.
o365ConnectorCard(O365ConnectorCard)

Devuelve un archivo adjunto para una tarjeta de conector de Office 365.
oauthCard(string, string, string, string, TokenExchangeResource)

Devuelve un archivo adjunto para una tarjeta OAuth.
receiptCard(ReceiptCard)

Devuelve un archivo adjunto para una tarjeta de recibo.
signinCard(string, string, string)

Devuelve un archivo adjunto para una tarjeta de inicio de sesión.
thumbnailCard(string, string | CardImage[], string | CardAction[], Partial<ThumbnailCard>)

Devuelve un archivo adjunto para una tarjeta en miniatura.
thumbnailCard(string, string, string | CardImage[], string | CardAction[], Partial<ThumbnailCard>)

Devuelve un archivo adjunto para una tarjeta en miniatura.
videoCard(string, string | MediaUrl[], string | CardAction[], Partial<VideoCard>)

Devuelve un archivo adjunto para una tarjeta de vídeo.

Detalles de las propiedades

contentTypes

Muestra el esquema de tipo de contenido para cada estilo de tarjeta.

static contentTypes: any

Valor de propiedad

any

Detalles del método

actions(string | CardAction[] | undefined)

Devuelve una matriz con formato correcto de acciones.

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

Parámetros

actions

string | CardAction[] | undefined

Matriz de acción que se va a incluir en la tarjeta. Cada string una de las matrices se convierte en un imBack botón con un título y un valor establecido en el valor de la cadena.

Devoluciones

CardAction[]

Matriz de acciones con formato correcto.

adaptiveCard(any)

Devuelve un archivo adjunto para una tarjeta adaptable.

static function adaptiveCard(card: any): Attachment

Parámetros

card

any

Descripción de la tarjeta adaptable que se va a devolver.

Devoluciones

Attachment

Datos adjuntos.

Comentarios

Tarjetas adaptables es el formato de intercambio de tarjeta abierta que permite a los desarrolladores intercambiar el contenido de la interfaz de usuario de una manera habitual y coherente. En el caso de los canales que aún no admiten tarjetas adaptables de forma nativa, Bot Framework representará la tarjeta en una imagen con el estilo correcto en el canal de destino. Para los canales que admiten tarjetas prominentes , puede seguir incluyendo acciones de tarjeta adaptable y se enviarán como botones junto con la versión representada de la tarjeta.

Para obtener más información sobre las tarjetas adaptables y descargar el SDK más reciente, visite adaptivecards.io.

Por ejemplo:

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(string, string | MediaUrl[], string | CardAction[], Partial<AnimationCard>)

Devuelve un archivo adjunto para una tarjeta de animación.

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

Parámetros

title

string

Título de la tarjeta.

media

string | MediaUrl[]

Las direcciones URL multimedia de la tarjeta.

buttons

string | CardAction[]

Opcional. Matriz de botones que se van a incluir en la tarjeta. Cada string una de las matrices se convierte en un imBack botón con un título y un valor establecido en el valor de la cadena.

other

Partial<AnimationCard>

Opcional. Cualquier propiedad adicional que se incluya en la tarjeta.

Devoluciones

Attachment

Datos adjuntos.

audioCard(string, string | MediaUrl[], string | CardAction[], Partial<AudioCard>)

Devuelve un archivo adjunto para una tarjeta de audio.

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

Parámetros

title

string

Título de la tarjeta.

media

string | MediaUrl[]

Dirección URL multimedia de la tarjeta.

buttons

string | CardAction[]

Opcional. Matriz de botones que se van a incluir en la tarjeta. Cada string una de las matrices se convierte en un imBack botón con un título y un valor establecido en el valor de la cadena.

other

Partial<AudioCard>

Opcional. Cualquier propiedad adicional que se incluya en la tarjeta.

Devoluciones

Attachment

Datos adjuntos.

heroCard(string, string | CardImage[], string | CardAction[], Partial<HeroCard>)

Devuelve un archivo adjunto para una tarjeta prominente.

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

Parámetros

title

string

Título de la tarjeta.

images

string | CardImage[]

Opcional. Matriz de imágenes que se van a incluir en la tarjeta. Cada elemento puede ser cardImage o la dirección URL de la imagen que se va a incluir.

buttons

string | CardAction[]

Opcional. Matriz de botones que se van a incluir en la tarjeta. Cada string una de las matrices se convierte en un imBack botón con un título y un valor establecido en el valor de la cadena.

other

Partial<HeroCard>

Opcional. Cualquier propiedad adicional que se incluya en la tarjeta.

Devoluciones

Attachment

Datos adjuntos.

Comentarios

Las tarjetas prominentes tienden a tener una imagen dominante de ancho completo. Los canales suelen representar el texto y los botones de la tarjeta debajo de la imagen.

Por ejemplo:

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

heroCard(string, string, string | CardImage[], string | CardAction[], Partial<HeroCard>)

Devuelve un archivo adjunto para una tarjeta prominente.

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

Parámetros

title

string

Título de la tarjeta.

text

string

Texto de la tarjeta.

images

string | CardImage[]

Opcional. Matriz de imágenes que se van a incluir en la tarjeta. Cada elemento puede ser cardImage o la dirección URL de la imagen que se va a incluir.

buttons

string | CardAction[]

Opcional. Matriz de botones que se van a incluir en la tarjeta. Cada string una de las matrices se convierte en un imBack botón con un título y un valor establecido en el valor de la cadena.

other

Partial<HeroCard>

Opcional. Cualquier propiedad adicional que se incluya en la tarjeta.

Devoluciones

Attachment

Datos adjuntos.

Comentarios

Las tarjetas prominentes tienden a tener una imagen dominante de ancho completo. Los canales suelen representar el texto y los botones de la tarjeta debajo de la imagen. Por ejemplo:

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

images(string | CardImage[] | undefined)

Devuelve una matriz con formato correcto de imágenes de tarjeta.

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

Parámetros

images

string | CardImage[] | undefined

Matriz de imágenes que se van a incluir en la tarjeta. Cada elemento puede ser cardImage o la dirección URL de la imagen que se va a incluir.

Devoluciones

CardImage[]

Matriz con formato correcto de imágenes de tarjeta.

media(string | MediaUrl[] | undefined)

Devuelve una matriz con formato correcto de objetos de dirección URL multimedia.

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

Parámetros

links

string | MediaUrl[] | undefined

Direcciones URL multimedia. Cada string uno se convierte en un objeto de dirección URL multimedia.

Devoluciones

MediaUrl[]

Matriz con formato correcto de objetos de dirección URL multimedia.

o365ConnectorCard(O365ConnectorCard)

Devuelve un archivo adjunto para una tarjeta de conector de Office 365.

static function o365ConnectorCard(card: O365ConnectorCard): Attachment

Parámetros

card

O365ConnectorCard

una descripción de la tarjeta del conector Office 365 que se va a devolver.

Devoluciones

Attachment

Datos adjuntos.

Comentarios

Por ejemplo:

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

oauthCard(string, string, string, string, TokenExchangeResource)

Devuelve un archivo adjunto para una tarjeta OAuth.

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

Parámetros

connectionName

string

Nombre de la conexión de OAuth que se va a usar.

title

string

Título del botón de inicio de sesión de la tarjeta.

text

string

Opcional. Texto adicional que se va a incluir en la tarjeta.

link

string

Opcional. Vínculo de inicio de sesión que se va a usar.

tokenExchangeResource

TokenExchangeResource

Opcional. Recurso con el que se va a intentar realizar el intercambio de tokens.

Devoluciones

Attachment

Datos adjuntos.

Comentarios

Las tarjetas OAuth admiten el servicio de inicio de sesión único (SSO) de Bot Framework.

receiptCard(ReceiptCard)

Devuelve un archivo adjunto para una tarjeta de recibo.

static function receiptCard(card: ReceiptCard): Attachment

Parámetros

card

ReceiptCard

Descripción de la tarjeta de recibo que se va a devolver.

Devoluciones

Attachment

Datos adjuntos.

signinCard(string, string, string)

Devuelve un archivo adjunto para una tarjeta de inicio de sesión.

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

Parámetros

title

string

Título del botón de inicio de sesión de la tarjeta.

url

string

Dirección URL de la página de inicio de sesión que se va a usar.

text

string

Opcional. Texto adicional que se va a incluir en la tarjeta.

Devoluciones

Attachment

Datos adjuntos.

Comentarios

En el caso de los canales que no admiten tarjetas de inicio de sesión de forma nativa, se representa un mensaje alternativo.

thumbnailCard(string, string | CardImage[], string | CardAction[], Partial<ThumbnailCard>)

Devuelve un archivo adjunto para una tarjeta en miniatura.

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

Parámetros

title

string

Título de la tarjeta.

images

string | CardImage[]

Opcional. Matriz de imágenes que se van a incluir en la tarjeta. Cada elemento puede ser cardImage o la dirección URL de la imagen que se va a incluir.

buttons

string | CardAction[]

Opcional. Matriz de botones que se van a incluir en la tarjeta. Cada string una de las matrices se convierte en un imBack botón con un título y un valor establecido en el valor de la cadena.

other

Partial<ThumbnailCard>

Opcional. Cualquier propiedad adicional que se va a incluir en la tarjeta.

Devoluciones

Attachment

Datos adjuntos.

Comentarios

Las tarjetas en miniatura son similares a las tarjetas prominentes, pero en lugar de una imagen de ancho completo, normalmente se representan con una versión en miniatura más pequeña de la imagen. Los canales suelen representar el texto de la tarjeta a un lado de la imagen, con los botones que se muestran debajo de la tarjeta.

thumbnailCard(string, string, string | CardImage[], string | CardAction[], Partial<ThumbnailCard>)

Devuelve un archivo adjunto para una tarjeta en miniatura.

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

Parámetros

title

string

Título de la tarjeta.

text

string

Texto de la tarjeta.

images

string | CardImage[]

Opcional. Matriz de imágenes que se van a incluir en la tarjeta. Cada elemento puede ser cardImage o la dirección URL de la imagen que se va a incluir.

buttons

string | CardAction[]

Opcional. Matriz de botones que se van a incluir en la tarjeta. Cada string una de las matrices se convierte en un imBack botón con un título y un valor establecido en el valor de la cadena.

other

Partial<ThumbnailCard>

Opcional. Cualquier propiedad adicional que se va a incluir en la tarjeta.

Devoluciones

Attachment

Datos adjuntos.

Comentarios

Las tarjetas en miniatura son similares a las tarjetas prominentes, pero en lugar de una imagen de ancho completo, normalmente se representan con una versión en miniatura más pequeña de la imagen. Los canales suelen representar el texto de la tarjeta a un lado de la imagen, con los botones que se muestran debajo de la tarjeta.

videoCard(string, string | MediaUrl[], string | CardAction[], Partial<VideoCard>)

Devuelve un archivo adjunto para una tarjeta de vídeo.

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

Parámetros

title

string

Título de la tarjeta.

media

string | MediaUrl[]

Las direcciones URL multimedia de la tarjeta.

buttons

string | CardAction[]

Opcional. Matriz de botones que se van a incluir en la tarjeta. Cada string una de las matrices se convierte en un imBack botón con un título y un valor establecido en el valor de la cadena.

other

Partial<VideoCard>

Opcional. Cualquier propiedad adicional que se va a incluir en la tarjeta.

Devoluciones

Attachment

Datos adjuntos.