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:

2 Responses
[…] Viva Connections III: QuickView […]
[…] Viva Connections III: QuickView […]