Viva Connections II: CardView

Artículos anteriores

CardView es un componente específico que nos permite configurar la información a mostrar en el dashboard. Funciona internamente con una Adaptive Card que no podemos modificar y tiene unos métodos específicos para desarrollar:

cardButtons()

Este método nos permite configurar los botones que apareceran en la zona inferior de la tarjeta, con las siguientes características:

• Solo se pueden añadir dos botones al array de este método.
• Pueden ser de tres tipos: QuickView (Tooltip con Adaptive Card integrada), ExternalLink (Link a una URL) o Submit (Botón de submit que se trata en el método OnAction).

Ejemplo:

public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
    return [
      {
        title: 'Button 1',
        action: {
          type: 'QuickView',
          parameters: {
            view: QUICK_VIEW_REGISTRY_ID
          }
        }
      },
      {
        title: 'Button 2',
        action: {
          type: 'ExternalLink',
          parameters: {
            target: 'https://www.lodesharepoint.com'
          }
        }
      }
    ];
  }

data()

Este método nos permite definir los valores que queremos mostrar en la tarjeta. Estas propiedades pueden variar dependiendo del tipo de Adaptive Card Extension que estemos creando:

• IBasicCardParameters: primaryText
• IPrimaryTextCardParameters: primaryText y description
• IImageCardParameters: primaryText y imageUrl

Todos heredan de IBaseCardParameters, que tiene tres parámetros opcionales: title, iconProperty y iconAltText.

Ejemplo:

public get data(): IPrimaryTextCardParameters {
    return {
      primaryText: strings.PrimaryText,
      description: this.properties.description
    };
  }

onCardSelection()

Este método nos permite definir que ocurre si hacemos click en la tarjeta. Podemos elegir entre abrir el QuickView, ir aun link externo o mantenerlo undefined.

Ejemplo:

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
    return {
      type: 'ExternalLink',
      parameters: {
        target: 'https://www.lodesharepoint.com'
      }
    };
  }

onAction(action: IActionArguments)

Este método no aparece por defecto en el CardView, pero se puede utilizar. Si en los botones definidos antes hemos declarado uno del tipo Submit debemos añadir este método para ejecutar el código que necesitemos. Debemos comprobar el typo de acción recibida como parámetro y en el caso de ser Submit, podemos comprobar si es el mismo ID que el que hemos definido en el botón.

Por ejemplo, si hemos declarado el botón de la siguiente manera:

public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
    return [
      {
        title: 'Button 1',
        action: {
          type: 'Submit',
          parameters: {
            id: 'myButtonId'
          }
        }
      }
    ];
  }

Podríamos añadir el metodo onAction de la siguiente manera:

public onAction(action: IActionArguments): void {
    if (action.type === 'Submit') {
      const { id } = action.data;
      switch (id) {
        case 'myButtonId':
          window.open('https://www.lodesharepoint.com')
          break;
      }
    }
  }

Artículos siguientes