Ejercicio: Creación de UNA ACE de tarjeta básica de SPFx que muestra los datos de lista de SharePoint
En este ejercicio, creará una extensión de tarjeta adaptable (ACE) SharePoint Framework (SPFx) con la plantilla Tarjeta básica que muestra los elementos de una lista de SharePoint y permite al usuario agregar elementos a la lista.
Requisitos previos
El desarrollo de ACE para Viva Connections requiere un inquilino de Microsoft 365, SharePoint Online y Viva Connections configurar en el inquilino. Use los siguientes recursos para preparar el inquilino:
- Viva Connections habilitado en el inquilino de Microsoft 365
- SharePoint Framework: Configurar el inquilino de Microsoft 365
También necesita las herramientas de desarrollo necesarias instaladas en la estación de trabajo:
Importante
En la mayoría de los casos, instalar la última versión de las siguientes herramientas es la mejor opción. Las versiones enumeradas aquí fueron usadas la última vez que se publicó y se probó este módulo.
- Node.js - v16.*
- Gulp CLI: v2.3.*
- Yeoman: v4.3.*
- Generador de Yeoman para SharePoint : v1.17.1
- Visual Studio Code
Creación de una lista de SharePoint para almacenar los datos
El primer paso consiste en crear una nueva lista de SharePoint para contener los datos que se van a mostrar en este componente.
En un explorador, vaya al sitio de SharePoint donde desea probar el proyecto que creará en este ejercicio.
Seleccione New (Nuevo ) y, a continuación, List (Lista ) en las opciones disponibles:
En el cuadro de diálogo Crear una lista , seleccione Lista en blanco.
Establezca el nombre de la lista en Datos ace y seleccione Crear.
Cuando el explorador se actualice para mostrar la nueva lista, seleccione Agregar columna, texto y, a continuación, seleccione el botón Siguiente. En el panel Crear una columna , escriba los valores siguientes y seleccione Guardar:
- Nombre: Descripción
- Tipo: línea única de texto
Una vez que haya creado la lista, agréguele algunos elementos.
Creación y preparación del proyecto de SPFx
Abra un símbolo del sistema y muévase a una carpeta donde quiera crear el proyecto SPFx. A continuación, ejecute el generador de Yeoman de SharePoint mediante el comando siguiente:
yo @microsoft/sharepoint
Use lo siguiente para completar el símbolo del sistema que se muestra:
- ¿Cuál es el nombre de la solución?: AceSharePointRest
- ¿Qué tipo de componente del lado cliente se va a crear?: Extensión de tarjeta adaptable
- ¿Qué plantilla desea usar?: Plantilla de tarjeta básica
- ¿Cuál es el nombre de la extensión de tarjeta adaptable?: REST de SharePoint
Después de aprovisionar las carpetas necesarias para el proyecto, el generador instalará todos los paquetes de dependencias ejecutando npm install automáticamente. Cuando NPM complete la descarga de todas las dependencias, abra el proyecto en Visual Studio Code.
Prueba y exploración del proyecto ace predeterminado
Vamos a tomar un momento para explorar la experiencia predeterminada del proyecto ACE y comprender cómo funciona el proyecto.
En la consola, ejecute la siguiente instrucción:
gulp serve --nobrowser
En un explorador, vaya al área de trabajo hospedada de SharePoint en el mismo sitio donde creó la lista para enumerar elementos. Por ejemplo, si la dirección URL de lista es https://contoso.sharepoint.com/sites/MSLearningTeam/Lists/ACE%20data/AllItems.aspx, la dirección URL del área de trabajo hospedada es https://contoso.sharepoint.com/sites/MSLearningTeam/_layouts/15/workbench.aspx.
Seleccione el + icono y, a continuación, seleccione el REST de SharePoint en el cuadro de herramientas:
Al igual que un elemento web SPFx, puede mantener el mouse sobre el componente ACE y seleccionar el icono de lápiz para abrir el panel de propiedades:
Cierre el panel de propiedades seleccionando la X en la esquina superior derecha.
A diferencia de los elementos web SPFx, las ACE se comportan de manera diferente cuando la página está en modo de edición o presentación. La página está actualmente en modo de edición. Cambie al modo de visualización para interactuar con la tarjeta seleccionando el botón Vista previa en la parte superior derecha de la navegación superior.
Observe que todas las herramientas de edición del lado del lienzo y el componente ACE ya no están visibles.
La vista predeterminada de la ACE es CardView. Se puede seleccionar y puede contener botones. La ACE predeterminada abrirá un vínculo en una nueva pestaña cuando se seleccione. Esto se implementa en el método de descriptor de acceso del onCardSelection() archivo ./src/adaptiveCardExtensions/sharePointRest/cardView/CardView.ts. Este método puede abrir una vista rápida, un vínculo externo o no hacer nada.
public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
return {
type: 'ExternalLink',
parameters: {
target: 'https://www.bing.com'
}
};
}
CardViews puede contener cero, uno o dos botones. Solo se muestran dos botones cuando el tamaño de la tarjeta está establecido en Grande.
Los botones de un CardView se implementan mediante el método de descriptor de cardActions() acceso. Este método puede devolver uno o dos botones. El objeto devuelto por este método determina lo que ocurre cuando se selecciona el botón. Por ejemplo, en el código del proyecto predeterminado, el botón abre una vista rápida:
public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
return [
{
title: strings.QuickViewButton,
action: {
type: 'QuickView',
parameters: {
view: QUICK_VIEW_REGISTRY_ID
}
}
}
];
}
Las vistas rápidas se implementan con dos archivos y lo registran con el componente ACE.
La representación de QuickView se define en un archivo JSON que contiene la definición de una tarjeta adaptable. El archivo JSON de QuickView del proyecto predeterminado es ./src/adaptiveCardExtensions/sharePointRest/quickView/template/QuickViewTemplate.json.
QuickView se define en el archivo ./src/adaptiveCardExtensions/sharePointRest/quickView/QuickView.ts . Este archivo proporciona a SPFx el JSON de la tarjeta adaptable que se usa en su representación, los datos que se van a enlazar a la representación y el método onAction() de controlador al que se llama cuando se producen ciertas acciones en la tarjeta.
Todas las Vistas de tarjeta y Vistas rápidas deben registrarse con sus respectivos navegadores en el componente ACE. Normalmente, esto se implementa en el onInit() método en el componente ACE, el ./src/adaptiveCardExtensions/sharePointRest/SharePointRestAdaptiveCardExtension.ts en nuestro proyecto de ejemplo.
public onInit(): Promise<void> {
this.state = { };
this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
return Promise.resolve();
}
Tomemos este proyecto predeterminado y lo haremos más dinámico: leer y escribir datos en una lista de SharePoint.
Adición del asistente del servicio de API REST de SharePoint
Vamos a agregar un servicio REST de SharePoint al proyecto para controlar toda la lectura y escritura en la lista de SharePoint que ha creado.
Cree un archivo ./src/adaptiveCardExtensions/sharePointRest/sp.service.ts en el proyecto y agréguele el código siguiente:
import { AdaptiveCardExtensionContext } from '@microsoft/sp-adaptive-card-extension-base';
import { SPHttpClient } from '@microsoft/sp-http'
export interface IListItem {
id: string;
title: string;
description: string;
index: number;
}
export const fetchListTitle = async (spContext: AdaptiveCardExtensionContext, listId: string): Promise<string> => {
if (!listId) { return Promise.reject('No listId specified.'); }
const response = await (await spContext.spHttpClient.get(
`${spContext.pageContext.web.absoluteUrl}/_api/web/lists/GetById(id='${listId}')/?$select=Title`,
SPHttpClient.configurations.v1
)).json();
return Promise.resolve(response.Title);
}
export const fetchListItems = async (spContext: AdaptiveCardExtensionContext, listId: string): Promise<IListItem[]> => {
if (!listId) { return Promise.reject('No listId specified.'); }
const response = await (await spContext.spHttpClient.get(
`${spContext.pageContext.web.absoluteUrl}/_api/web/lists/GetById(id='${listId}')/items?$select=ID,Title,Description`,
SPHttpClient.configurations.v1
)).json();
if (response.value?.length > 0) {
return Promise.resolve(response.value.map(
(listItem: any, index: number) => {
return <IListItem>{
id: listItem.ID,
title: listItem.Title,
description: listItem.Description,
index: index
};
}
));
} else {
return Promise.resolve([]);
}
}
const getItemEntityType = async (spContext: AdaptiveCardExtensionContext, listId: string): Promise<string> => {
const response: { ListItemEntityTypeFullName: string } = await (await spContext.spHttpClient.get(
`${spContext.pageContext.web.absoluteUrl}/_api/web/lists/GetById(id='${listId}')?$select=ListItemEntityTypeFullName`,
SPHttpClient.configurations.v1
)).json();
return response.ListItemEntityTypeFullName;
}
export const addListItem = async (
spContext: AdaptiveCardExtensionContext,
listId: string,
listItemTitle: string,
listItemDescription: string): Promise<void> => {
// get the entity type of list item
const entityListItemType = await getItemEntityType(spContext, listId);
// create item to send to SP REST API
const newListItem: any = {
'@odata.type': entityListItemType,
Title: listItemTitle,
Description: listItemDescription
};
await spContext.spHttpClient.post(
`${spContext.pageContext.web.absoluteUrl}/_api/web/lists/GetById(id='${listId}')/items`,
SPHttpClient.configurations.v1,
{
headers: {
'ACCEPT': 'application/json; odata.metadata=none',
'CONTENT-TYPE': 'application/json'
},
body: JSON.stringify(newListItem)
}
);
return Promise.resolve();
}
Este servicio exporta los siguientes elementos que usará en todo el proyecto:
-
addListItem(): este método crea un nuevo elemento en la lista especificada. -
fetchListTitle(): este método recupera el título de la lista especificada. -
fetchListItems(): este método recupera todos los elementos de la lista especificada.
Actualizar el componente para mostrar los datos de lista de SharePoint
Ahora que el proyecto tiene algunas dependencias principales agregadas, vamos a configurar la ACE cuando se cargue por primera vez. Esto implica establecer el estado de la ACE y permitir que el usuario establezca el identificador de la lista de SharePoint en el que leer y escribir.
Actualice la ACE para permitir que el usuario establezca el identificador de lista de SharePoint.
Busque la clase ACE en el archivo ./src/adaptiveCardExtensions/sharePointRest/SharePointRestAdaptiveCardExtension.ts y ábrala en VS Code.
Busque la ISharePointRestAdaptiveCardExtensionProps interfaz y agregue la listId propiedad para almacenar el identificador de la lista de SharePoint que contiene los registros de estado del controlador:
export interface ISharePointRestAdaptiveCardExtensionProps {
title: string;
listId: string;
}
Busque y abra el archivo ./src/adaptiveCardExtensions/sharePointRest/SharePointRestPropertyPane.ts. Agregue una nueva PropertyPaneTextField a la groupFields matriz para agregar una opción para que el usuario establezca el identificador de la lista que contiene los registros de estado del controlador:
groupFields: [
PropertyPaneTextField('title', {
label: strings.TitleFieldLabel
}),
PropertyPaneTextField('listId', {
label: 'List ID (GUID)'
})
]
Por último, vuelva al archivo SharePointRestAdaptiveCardExtension.ts y agregue el siguiente método a la SharePointRestAdaptiveCardExtension clase . El tiempo de ejecución de SPFx genera este evento cuando cambia el valor de una propiedad en el panel de propiedades.
Volverá y actualizará este método más adelante.
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
if (propertyPath === 'listId' && newValue !== oldValue) {
// TODO onPropertyPaneFieldChanged
}
}
Actualización del estado de ACE y la vista de tarjeta inicial
Agregue la siguiente import instrucción después de las instrucciones existentes import en el archivo:
import {
fetchListItems,
fetchListTitle,
IListItem
} from './sp.service';
Busque la interfaz ISharePointRestAdaptiveCardExtensionState de estado y agregue algunas propiedades como se muestra en el código siguiente:
export interface ISharePointRestAdaptiveCardExtensionState {
listTitle: string;
listItems: IListItem[];
currentIndex: number;
}
Inicialice la propiedad state en el método existente onInit() . Reemplace el existente this.state = { }; por el código siguiente:
this.state = {
currentIndex: 0,
listTitle: '',
listItems: []
};
A continuación, agregue el código siguiente al onInit() método , inmediatamente antes de la return Promise.resolve(); instrucción para recuperar el título de la lista y todos los elementos de la lista, sobrescribiendo los valores vacíos que estableció al inicializar el estado.
if (this.properties.listId) {
Promise.all([
this.setState({ listTitle: await fetchListTitle(this.context, this.properties.listId) }),
this.setState({ listItems: await fetchListItems(this.context, this.properties.listId) })
]);
}
Este código usa la await palabra clave pero la firma del onInit() método, mientras devuelve un Promise, no tiene la palabra clave necesaria async . Actualice la declaración del onInit() método para incluir esta palabra clave:
public async onInit(): Promise<void> { .. }
Ahora que las propiedades públicas y el estado están establecidos para el componente ACE, debe controlar cuándo un usuario actualiza el identificador de lista en el panel de propiedades.
Busque el onPropertyPaneFieldChanged() método y reemplace por // TODO onPropertyPaneFieldChanged el código siguiente:
if (newValue) {
(async () => {
this.setState({ listTitle: await fetchListTitle(this.context, newValue) });
this.setState({ listItems: await fetchListItems(this.context, newValue) });
})();
} else {
this.setState({ listTitle: '' });
this.setState({ listItems: [] });
}
En este momento, el componente ACE lee el título y los elementos de la lista de SharePoint. Ahora vamos a mostrar esa información en la representación de ACE.
Actualización de ACE CardView
Comencemos con cardview.
Busque y abra el archivo ./src/adaptiveCardExtensions/sharePointRest/cardView/CardView.ts en VS Code.
Actualice el método existente data() con el código siguiente para cambiar el texto principal mostrado en la lista.
public get data(): IBasicCardParameters {
return {
title: this.properties.title,
primaryText: (this.state.listTitle)
? `View items in the '${this.state.listTitle}' list`
: `Missing list ID`,
};
}
A continuación, busque el onCardSelection() método . Cambie esta opción para iniciar una vista rápida en lugar de un vínculo externo reemplazando el objeto devuelto por el código siguiente:
return {
type: 'QuickView',
parameters: {
view: QUICK_VIEW_REGISTRY_ID
}
};
Actualización de ACE QuickView
Vamos a actualizar la tarjeta adaptable de QuickView para mostrar los datos de la lista de SharePoint como un carrusel.
Busque y abra el archivo ./src/adaptiveCardExtensions/sharePointRestCrud/quickView/template/QuickViewTemplate.json y reemplace su contenido por el código siguiente:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "30px",
"items": [
{
"type": "Image",
"url": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5\" /></svg>",
"size": "Small",
"width": "30px",
"selectAction": {
"type": "Action.Submit",
"id": "-1",
"title": "Previous"
},
"isVisible": "${previousEnabled}",
"horizontalAlignment": "Left"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "(${id}) ${title}",
"horizontalAlignment": "Center",
"size": "Medium",
"weight": "Bolder",
"wrap": true
},
{
"type": "TextBlock",
"text": "${description}",
"horizontalAlignment": "Center",
"size": "Default",
"wrap": true
}
]
}
]
},
{
"type": "Column",
"width": "30px",
"items": [
{
"type": "Image",
"url": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5\" /></svg>",
"size": "Small",
"width": "30px",
"selectAction": {
"type": "Action.Submit",
"id": "1",
"title": "Next"
},
"isVisible": "${nextEnabled}",
"horizontalAlignment": "Right"
}
],
"verticalContentAlignment": "Center"
}
],
"spacing": "None",
"horizontalAlignment": "Center",
"height": "stretch",
"style": "emphasis",
"bleed": true
}
]
}
Ahora vamos a actualizar la clase QuickView.
Busque y abra el archivo ./src/adaptiveCardExtensions/sharePointRestCrud/quickView/QuickView.ts .
Para empezar, actualice la imports sección:
Agregue una referencia a la
IActionArgumentsinterfaz importada desde el@microsoft/sp-adaptive-card-extension-basepaquete:import { ISPFxAdaptiveCard, BaseAdaptiveCardView, IActionArguments // << add } from '@microsoft/sp-adaptive-card-extension-base';Agregue el código siguiente para importar la interfaz desde el archivo de servicio de SharePoint que agregó al proyecto:
import { IListItem } from '../sp.service';
A continuación, actualice la interfaz existente IQuickViewData para ampliar la IListItem interfaz y agregue dos propiedades más:
export interface IQuickViewData extends IListItem {
previousEnabled: boolean;
nextEnabled: boolean;
}
A continuación, actualice el data() método al código siguiente. Esto devolverá el elemento seleccionado actualmente recuperado de la lista de SharePoint, junto con dos propiedades más, como un objeto al motor de representación de tarjeta adaptable. Las propiedades de este objeto se enlazan a elementos específicos de la plantilla tarjeta adaptable:
public get data(): IQuickViewData {
return {
previousEnabled: this.state.currentIndex !== 0,
nextEnabled: this.state.currentIndex !== (this.state.listItems.length - 1),
...(this.state.listItems[this.state.currentIndex])
};
}
A continuación, agregue un nuevo método, onAction(), para controlar un envío desde la tarjeta adaptable de QuickView. En este escenario, se usan dos imágenes para recorrer los elementos recuperados de la lista de SharePoint:
public onAction(action: IActionArguments): void {
if (action.type !== 'Submit') { return ;}
let currentIndex = this.state.currentIndex;
this.setState({ currentIndex: currentIndex + Number(action.id) });
}
Por último, comente o quite la siguiente referencia al strings objeto:
import * as strings from 'SharePointRestAdaptiveCardExtensionStrings';
Prueba de la ACE dinámica
Pruebe la ACE para comprobar que QuickView funciona. Si anteriormente detuvo el servidor web local, reinícielo ejecutando lo siguiente en la consola:
gulp serve --nobrowser
Vaya al área de trabajo hospedada de SharePoint para ver la ACE.
Mantenga el mouse sobre el componente ACE y seleccione el icono de lápiz para abrir el panel de propiedades:
Escriba el identificador de la lista de SharePoint en el cuadro de texto Id . de lista y cierre el panel de propiedades seleccionando el icono X en la esquina superior derecha.
Sugerencia
Puede obtener el identificador de una lista en la dirección URL de la página de configuración de la lista.
En primer lugar, vaya a la lista y, a continuación, seleccione el icono de engranaje en la barra de conjuntos de aplicaciones y, a continuación, seleccione el vínculo Configuración de lista.
La cadena de consulta de la página de configuración de lista contiene una propiedad List , como List=%7B93f11b8b-6201-4199-b263-3ca78408a73b%7D. Se trata de una cadena codificada en dirección URL que contiene GUID rodeado por {}. Quite el %7B prefijo y %7D el sufijo para obtener el identificador de la lista. Por ejemplo, este identificador de lista es 93f11b8b-6201-4199-b263-3ca78408a73b.
Cambie al modo de vista previa de ace seleccionando el vínculo Vista previa en la parte más derecha de la barra de herramientas de la página y, a continuación, seleccione el botón Vista rápida en CardView.
Verá la nueva representación actualizada de QuickView y un conjunto de flechas que recorrerán todos los elementos de la lista:
Actualizar el componente para agregar elementos a la lista
En esta última sección, agregue una nueva vista rápida para agregar elementos a la lista de SharePoint. Esto muestra cómo puede usar QuickViews para recopilar datos de un formulario.
Cree un nuevo archivo, NewItemQuickView.ts, en la carpeta ./src/adaptiveCardExtensions/sharePointRest/quickView y agréguele el código siguiente:
import {
ISPFxAdaptiveCard,
BaseAdaptiveCardView,
IActionArguments
} from '@microsoft/sp-adaptive-card-extension-base';
import {
ISharePointRestAdaptiveCardExtensionProps,
ISharePointRestAdaptiveCardExtensionState,
} from '../SharePointRestAdaptiveCardExtension';
import {
fetchListItems,
addListItem
} from '../sp.service';
export interface INewItemQuickView { }
export class NewItemQuickView extends BaseAdaptiveCardView<
ISharePointRestAdaptiveCardExtensionProps,
ISharePointRestAdaptiveCardExtensionState,
NewItemQuickView
> {
public get data(): NewItemQuickView {
return undefined;
}
public get template(): ISPFxAdaptiveCard {
return require('./template/NewItemQuickView.json');
}
public onAction(action: IActionArguments): void {
if (action.type === 'Submit') {
(async () => {
// save item
await addListItem(
this.context,
this.properties.listId,
action.data.title,
action.data.description
);
// refresh items
this.setState({ listItems: await fetchListItems(this.context, this.properties.listId) });
// remove quickview
this.quickViewNavigator.close();
})();
}
}
}
La parte interesante de este QuickView es el onAction() método . Observe cómo obtiene la información de los controles de entrada de la tarjeta adaptable mediante la data propiedad del action: IActionArguments objeto pasado al método .
Después de guardar el elemento en la lista, actualiza la lista de elementos, actualiza la colección de elementos en el estado del componente de ACE y cierra QuickView.
Ahora, implemente la representación para QuickView. Cree un nuevo archivo NewItemQuickView.json en la plantilla ./src/adaptiveCardExtensions/sharePointRestCrud/quickView/template y agréguele el código siguiente:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [{
"type": "Container",
"separator": true,
"items": [
{
"type": "Input.Text",
"id": "title",
"label": "Title",
"placeholder": "Title",
"isMultiline": false
},
{
"type": "Input.Text",
"id": "description",
"label": "Description",
"placeholder": "Description",
"isMultiline": true
},
{
"type": "ActionSet",
"actions": [{
"type": "Action.Submit",
"id": "save",
"title": "Save",
"style": "positive"
}]
}
]
}]
}
Para usar este nuevo QuickView, debe registrarlo:
- Abra el archivo ./src/adaptiveCardExtensions/sharePointRest/SharePointRestAdaptiveCardExtension.ts .
Agregue la siguiente
importinstrucción para importar newitem QuickView:import { NewItemQuickView } from './quickView/NewItemQuickView';Busque las constantes que declaran los identificadores de CardView y QuickView y agregue el siguiente identificador para el nuevo QuickView:
export const NEW_ITEM_QUICK_VIEW_REGISTRY_ID: string = 'SharePointRestCrud_NEW_ITEM_QUICK_VIEW';En el
onInit()método de laSharePointRestAdaptiveCardExtensionclase , agregue el código siguiente después de la llamada existente a lathis.quickViewNavigator.register()instrucción que registró starttrip QuickView:this.quickViewNavigator.register(NEW_ITEM_QUICK_VIEW_REGISTRY_ID, () => new NewItemQuickView());
El último paso es actualizar CardView para desencadenar el nuevo elemento.
Busque y abra el archivo ./src/adaptiveCardExtensions/sharePointRest/cardView/CardView.ts .
Agregue el nuevo identificador de QuickView exportado desde
SharePointRestAdaptiveCardExtensiona la lista de objetos existentes importados desde ese módulo:import { ISharePointRestAdaptiveCardExtensionProps, ISharePointRestAdaptiveCardExtensionState, QUICK_VIEW_REGISTRY_ID, NEW_ITEM_QUICK_VIEW_REGISTRY_ID // << add } from '../SharePointRestAdaptiveCardExtension';A continuación, reemplace el descriptor de acceso existente
cardButtons()por el código siguiente. Esta implementación actualizada ahora solo mostrará un botón Agregar elemento cuando se haya establecido el identificador de lista en el panel de propiedades. Cuando se selecciona este botón, inicia la nueva vista rápida:public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined { if (!this.properties.listId) { return undefined; } else { return [{ title: 'Add item', action: { type: 'QuickView', parameters: { view: NEW_ITEM_QUICK_VIEW_REGISTRY_ID } } }]; } }Por último, comente o quite la siguiente referencia al
stringsobjeto:import * as strings from 'SharePointRestAdaptiveCardExtensionStrings';
Prueba de la ACE de Vista rápida del elemento de adición
Vamos a probar que el nuevo QuickView funciona. Si anteriormente detuvo el servidor web local, reinícielo ejecutando lo siguiente en la consola:
gulp serve --nobrowser
Vaya al área de trabajo hospedada de SharePoint para ver la ACE. Seleccione el botón Agregar elemento en CardView.
Verá el nuevo formulario para el nuevo QuickView:
Agregue un nuevo elemento a la lista y, a continuación, seleccione CardView para iniciar el QuickView inicial. Use los controles de flecha para recorrer los elementos hasta que vea el nuevo elemento que acaba de agregar.
En este ejercicio, ha creado una extensión de tarjeta adaptable (ACE) de SharePoint Framework (SPFx) con la plantilla Tarjeta básica que muestra los elementos de una lista de SharePoint y permite al usuario agregar elementos a la lista mediante QuickView.