Creación de una extensión de tarjeta adaptable con la acción seleccionar medios

Aplicar andamiaje a un proyecto de extensión de tarjeta adaptable

Cree un directorio de proyecto nuevo para el proyecto y cambie la carpeta actual a ese directorio.

Cree un nuevo proyecto ejecutando el generador de SharePoint Yeoman desde el nuevo directorio que creó:

yo @microsoft/sharepoint

En el momento en que se le solicite, introduzca los siguientes valores (seleccione la opción predeterminada para todas las solicitudes que se omiten a continuación):

• ¿Cuál es el nombre de la solución? media-upload-tutorial
• ¿Cuál es el tipo de componente del lado cliente que se va a crear? Extensión de tarjeta adaptable
• ¿Qué plantilla quiere usar? Plantilla de texto principal
• ¿Cuál es el nombre de su extensión de tarjeta adaptable? MediaUpload

En ese momento, Yeoman instalará las dependencias necesarias y aplicará scaffolding en los archivos de la solución. Este proceso puede tardar unos minutos.

Actualizar la dirección URL del área de trabajo hospedada del proyecto

Cuando use la tarea Gulp serve, de forma predeterminada se iniciará un explorador con la dirección URL del área de trabajo hospedada especificada en el proyecto. La dirección URL predeterminada del área de trabajo hospedada en un nuevo proyecto apunta a una dirección URL no válida.

• Busque y abra el archivo ./config/serve.json en el proyecto.

• Busque la propiedad initialPage:

  {
    "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
    "port": 4321,
    "https": true,
    "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
  }
  

• Cambie el dominio enter-your-SharePoint-site a la dirección URL de su espacio empresarial y sitio de SharePoint que desee usar para las pruebas. Por ejemplo: https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx.

En este punto, si lo hace gulp serve, verá la MediaUpload tarjeta:

Agregar acción de carga multimedia a la extensión de tarjeta adaptable

En este momento, tenemos código de extensión de tarjeta adaptable de fábrica. Ahora es el momento de activar las cosas con la selección de medios de las vistas Tarjeta y Rápida.

En la vista Tarjeta, proporcionaremos un botón que realizará las siguientes acciones:

• Carga de un archivo de imagen

Actualizar las etiquetas que se mostrarán en la tarjeta

Antes de empezar a agregar las acciones, vamos a actualizar primero las cadenas que verá en la tarjeta.

Para ello, busque y abra el siguiente archivo en el proyecto: ./src/adaptiveCardExtensions/mediaUpload/loc/en-us.js

Reemplace el contenido de este archivo por:

define([], function() {
  return {
    "PropertyPaneDescription": "Tutorial on media upload action in ACE.",
    "TitleFieldLabel": "MediaUpload",
    "Title": "Media Upload",
    "SubTitle": "Media Upload Actions",
    "PrimaryText": "Media Upload Demo",
    "Description": "Demonstrating Media Upload Capabilities",
    "UploadPNG": "Upload PNG file"
  }
});

A continuación, busque y abra el siguiente archivo en el proyecto: ./src/adaptiveCardExtensions/mediaUpload/loc/mystring.d.ts

Agregue lo siguiente:

UploadPNG: string;

en la interfaz IMediaUploadAdaptiveCardExtensionStrings.

Agregar acciones en Vista de tarjeta

Como se mencionó anteriormente, en la vista tarjeta, agregaremos un botón, que permitirá al usuario cargar un archivo png al hacer clic en la vista tarjeta.

Busque y abra el siguiente archivo en el proyecto: ./src/adaptiveCardExtensions/mediaUpload/cardView/CardView.ts

En este caso, reemplace la definición de la función cardButtons por lo siguiente:

public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
  return [
    {
      title: strings.UploadPNG,
      action: {
        type: 'VivaAction.SelectMedia'
        parameters: {
            mediaType: MediaType.Image
        }
      }
    }
  ];
}

Con este cambio, hemos configurado un botón con etiqueta Upload PNG file y, al hacer clic, la acción es VivaAction.SelectMedia, que carga el archivo modal.

A continuación, reemplace el contenido de la función onCardSelection por lo siguiente:

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
  return {
      type: 'QuickView',
      parameters: {
        view: QUICK_VIEW_REGISTRY_ID
      }
  };
}

Este cambio implica que cuando un usuario hace clic en Vista de tarjeta, se debe abrir Vista rápida para él.

Con los cambios realizados hasta ahora, Vista de tarjeta tendría el siguiente aspecto:

Agregar acciones en Vista rápida

En la vista rápida, introduciremos botones para tres acciones:

• Carga de un archivo png
• Carga de un archivo jpg
• Carga de un archivo png y jpg

En primer lugar, definiremos la plantilla de Vista rápida. Para ello, busque y abra el siguiente archivo en el proyecto: ./src/adaptiveCardExtensions/mediaUpload/quickView/template/QuickViewTemplate.json

Reemplace el contenido de este archivo por el siguiente.

{
  "schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "${filesUploaded}"
    }
  ],
  "actions": [
    {
      "title": "Upload a png",
      "type": "VivaAction.SelectMedia",
      "parameters": {
        "mediaType": "MediaType.Image",
        "allowMultipleCapture": false,
        "supportedFileFormats": "png"
      }
    },
    {
      "title": "Upload a jpg",
      "type": "VivaAction.SelectMedia",
      "parameters": {
        "mediaType": "MediaType.Image",
        "allowMultipleCapture": false,
        "supportedFileFormats": "jpg"
      }
    },
    {
      "title": "Upload a png and jpg",
      "type": "VivaAction.SelectMedia",
      "parameters": {
        "mediaType": "MediaType.Image",
        "allowMultipleCapture": true,
        "supportedFileFormats": "png jpg"
      }
    }
  ]
}

Después de agregar estas acciones, Vista rápida tendría el siguiente aspecto:

Configurar el estado de la extensión de tarjeta adaptable

Hasta ahora, hemos creado Vista de tarjeta y Vista rápida. Si hace un gulp serve en este punto, podrá realizar las acciones descritas anteriormente.

Pero ahora, vamos a ir al siguiente nivel.

Ahora queremos mostrar todos los archivos cargados en la vista rápida cuando se ejecutan las acciones respectivas.

Primero tendremos que realizar algunos cambios rápidos para introducir nuevos estados. En primer lugar, busque y abra el siguiente archivo en el proyecto: ./src/adaptiveCardExtensions/mediaUpload/MediaUploadAdaptiveCardExtension.ts

Aquí, agregue el siguiente states a la interfaz IMediaUploadAdaptiveCardExtensionState:

filesUploaded: string;

A continuación, en la función onInit, cambie this.state={} a

this.state = {
  filesUploaded: ''
};

Ahora también realizaremos cambios similares en Vista rápida.

Busque y abra el siguiente archivo en el proyecto: ./src/adaptiveCardExtensions/mediaUpload/quickView/QuickView.ts

Agregue las siguientes propiedades a la interfaz IQuickViewData:

filesUploaded: string;

y agregue las dos líneas siguientes en el objeto devuelto de data captador:

filesUploaded: this.state.filesUploaded

Implementar la función onAction

Hasta ahora hemos creado nuestra acción de carga multimedia definida y cableada en nuestros estados. Ahora, por último, podemos implementar la onAction función , lo que permite al desarrollador de terceros decidir qué quiere hacer con la información multimedia cargada.

Para ello, abra el archivo QuickView.ts (./src/adaptiveCardExtensions/mediaUpload/quickView/QuickView.ts) e importe la ISelectMediaActionArguments interfaz, como se indica a continuación:

import {ISelectMediaActionArguments} from '@microsoft/sp-adaptive-card-extension-base';

Por último, introduzca la siguiente onAction función en la clase QuickView para que podamos obtener una lista de nuestros archivos:

public onAction(action: ISelectMediaActionArguments): void {
  if (action.type === 'VivaAction.SelectMedia') {
    // media is an array of attachment objects which contain the content and filename
    this.setState({
        filesUploaded: action.media.map(attachment => attachment.fileName).join(',')
    });
  }
}

Por lo tanto, ahora, cada vez que se desencadene la VivaAction.SelectMedia acción desde la vista rápida, en función de los parámetros pasados, el marco de la extensión de tarjeta adaptable pasará un archivo adjunto multimedia a la onAction devolución de llamada. En la implementación compartida anteriormente, comprobamos si el action tipo es de tipo VivaAction.SelectMediay, si es así, se vuelve a representar la vista rápida mediante una setState, en la que actualizamos el filesUploaded bloque de texto.

En este punto, puede volver a ejecutar gulp serve y ver cómo se implementaron todos los cambios realizados hasta ahora.

Ya ha terminado. Enhorabuena por crear correctamente la extensión de tarjeta adaptable con la acción de carga multimedia.