Viva Connections III: QuickView

Artículos anteriores

QuickView es un componente similar al CardView, pero en este caso podemos específicar que Adaptive Card queremos utilizar y que propiedades vamos a definir. Además de los métodos en los que trabajar tenemos una interfaz a declarar para definir los datos que utilizaremos. Un ejemplo:

export interface IQuickViewData {
  subTitle: string;
  title: string;
  description: string;
}

Los métodos para trabajar son:

data()

Este método nos permite definir los valores que queremos mostrar en la vista. Esos valores son los definidos en la interfaz declarada al principio del componente.

Ejemplo:

public get data(): IQuickViewData {
    return {
      subTitle: 'subtitle',
      title: 'title',
      description: 'description'
    };
  }

template()

Este método es el que definira que Adaptive Card vamos a mostrar en la vista. Por defecto tendremos un archivo JSON con la definición y dentro del método solamente tendremos que retornar ese contenido. Un ejemplo sería este fichero JSON:

{
  "schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "${title}",
      "size": "Large",
      "weight": "Bolder",
      "wrap": true
    }
  ]
}

Y el método:

public get template(): ISPFxAdaptiveCard {
    return require('./template/QuickViewTemplate.json');
  }

También tenemos la posibilidad de retornar esa Adaptive Card directamente dentro del método como Objeto, lo que nos permitirá modificar el contenido de forma dinámica. Un ejemplo:

public get template(): ISPFxAdaptiveCard {
    let actions = [
      {
        type: 'Action.Submit',
        title: 'My Action Button',
        data: {
          id: 'actionButton'
        }
      }
    ];

    let body = [
      {
        type: "TextBlock",
        text: "${title}",
        size: "Large",
        weight: "Bolder",
        wrap: true
      },
      {
        type: 'ActionSet',
        actions: actions
      }
    ];

    return {
      $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
      type: 'AdaptiveCard',
      version: '1.2',
      body: body
    };
  }

Podéis encontrar ejemplos de Adaptive Cards aquí: https://adaptivecards.io/samples

O diseñar vuestra propia Adaptive Card aquí: https://adaptivecards.io/designer

onAction(action: IActionArguments)

Este método nos permitirá definir que hacer al hacer click en los botones de acción definidos en la Adaptive Card. 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. Basándonos en el template definido anteriormente, un ejemplo sería:

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

title() y externalLink()

Existen otros dos métodos disponibles que pueden ser útiles aunque no aparezcan por defecto cuando creamos nuestra Adaptive Card Extension: title() y externalLink().

El primero nos permitira sobreescribir el título que aparecerá en la Adaptive Card, y el segundo permite añadir un link en la parte superior derecha con el texto “Open”.

Por ejemplo este código:

public get title(): string {
    return 'New Title';
  }

  public get externalLink(): IExternalLinkParameters | undefined {
    return {
      target: 'https://www.lodesharepoint.com'
    }
  }

Se vería de este modo:

Artículos siguientes