Usar cuadros de diálogo personalizados con SharePoint Framework Extensions

Artículo
03/21/2023

Puede usar cuadros de diálogo personalizados, disponibles en el paquete @microsoft/sp-dialog, en el contexto de SharePoint Framework Extensions o de elementos web del lado cliente.

En este artículo se describe la creación de un cuadro de diálogo personalizado y su uso en el contexto de una extensión ListView Command Set.

Puede tener acceso al código de ejemplo en el que se basa este artículo en el repositorio sp-dev-fx-extensions.

Importante

En este tutorial se da por supuesto que ha configurado el entorno de desarrollo como se explica en Configurar el entorno de desarrollo.

Crear un proyecto

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 tipo de componente del lado cliente que se va a crear? Extensión
- ¿Qué tipo de extensión del lado cliente se va a crear? Conjunto de comandos de ListView
- ¿Cuál es el nombre del conjunto de comandos? DialogDemo
En ese momento, Yeoman instalará las dependencias necesarias y aplicará scaffolding en los archivos de la solución. Este proceso puede tardar unos minutos.
Cuando se complete el Scaffolding inicial, escriba lo siguiente para instalar Office UI Fabric a la solución:
```
npm install office-ui-fabric-react  --save
```
Abra la carpeta del proyecto en el editor de código. En los pasos y capturas de pantalla de este artículo, se usa Visual Studio Code, pero puede usar el editor que prefiera. Para abrir la carpeta de Visual Studio Code, use el siguiente comando en la consola:
```
code .
```

Modificar el manifiesto de la extensión

En el manifiesto de extensión, configure la extensión para que solo tenga un botón. En el editor de código, abra el archivo ./src/extensions/dialogDemo/DialogDemoCommandSet.manifest.json . Reemplace la sección de comandos por el siguiente JSON:

{
  //...
  "items": {
    "COMMAND_1": {
      "title": { "default": "Open Custom Dialog" },
      "iconImageUrl": "icons/request.png",
      "type": "command"
    }
  }
}

Crear un cuadro de diálogo personalizado

Cree otro archivo denominado ColorPickerDialog.tsx en la carpeta ./src/extensions/dialogDemo/.

Agregue las siguientes instrucciones import al principio del archivo que acaba de crear. Está creando el cuadro de diálogo personalizado mediante los componentes de Office UI Fabric React, de modo que la implementación se realiza en React.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BaseDialog, IDialogConfiguration } from '@microsoft/sp-dialog';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { ColorPicker } from 'office-ui-fabric-react/lib/ColorPicker';
import { DialogFooter, DialogContent } from 'office-ui-fabric-react/lib/Dialog';
import { IColor } from 'office-ui-fabric-react/lib/Color';

Agregue la siguiente definición de la interfaz justo debajo de las instrucciones de importación. Esto se usa para transferir información y funciones entre la extensión ListView Command Set y el cuadro de diálogo personalizado.
```
interface IColorPickerDialogContentProps {
  message: string;
  close: () => void;
  submit: (color: IColor) => void;
  defaultColor?: IColor;
}
```

Agregue la siguiente clase justo debajo de la definición de la interfaz. Esta clase de React es responsable de representar las experiencias de la interfaz de usuario en el cuadro de diálogo personalizado. Tenga en cuenta que usa los componentes de Office UI Fabric React para la representación real y simplemente pasa las propiedades necesarias.

class ColorPickerDialogContent extends React.Component<IColorPickerDialogContentProps, {}> {
  private _pickedColor: IColor;

  constructor(props) {
    super(props);
    // Default Color
    this._pickedColor = props.defaultColor || { hex: 'FFFFFF', str: '', r: null, g: null, b: null, h: null, s: null, v: null };
  }

  public render(): JSX.Element {
    return <DialogContent
    title='Color Picker'
    subText={this.props.message}
    onDismiss={this.props.close}
    showCloseButton={true}
    >
    <ColorPicker color={this._pickedColor} onChange={this._onColorChange} />
    <DialogFooter>
        <DefaultButton text='Cancel' title='Cancel' onClick={this.props.close} />
        <PrimaryButton text='OK' title='OK' onClick={() => { this.props.submit(this._pickedColor); }} />
    </DialogFooter>
    </DialogContent>;
  }

  private _onColorChange = (ev: React.SyntheticEvent<HTMLElement, Event>, color: IColor) => {
    this._pickedColor = color;
  }
}

Agregue la siguiente definición de clase para el cuadro de diálogo personalizado en la clase ColorPickerDialogContent que acaba de agregar. Este es el cuadro de diálogo personalizado real al que se llama desde el clic del botón de ListView Command Set y se hereda de BaseDialog.

export default class ColorPickerDialog extends BaseDialog {
  public message: string;
  public colorCode: IColor;

  public render(): void {
    ReactDOM.render(<ColorPickerDialogContent
    close={ this.close }
    message={ this.message }
    defaultColor={ this.colorCode }
    submit={ this._submit }
    />, this.domElement);
  }

  public getConfig(): IDialogConfiguration {
    return { isBlocking: false };
  }

  protected onAfterClose(): void {
    super.onAfterClose();

    // Clean up the element for the next dialog
    ReactDOM.unmountComponentAtNode(this.domElement);
  }

  private _submit = (color: IColor) => {
    this.colorCode = color;
    this.close();
  }
}

Asociar el cuadro de diálogo al evento de clic del botón ListView Command Set

Para asociar el cuadro de diálogo personalizado al conjunto de comandos de ListView personalizado, agregue el código para iniciar el cuadro de diálogo en la operación de clic del botón.

En el editor de código, abra el archivo DialogDemoCommandSet.ts desde la carpeta ./src/extensions/dialogDemo/.
Agregue las siguientes instrucciones de importación en la importación de cadenas existente. Se usan para utilizar el cuadro de diálogo personalizado en el contexto del conjunto de comandos ListView y usar el tipo de IColor para pasar colores a y desde nuestro cuadro de diálogo.
```
import ColorPickerDialog from './ColorPickerDialog';
import { IColor } from 'office-ui-fabric-react/lib/Color';
```
Agregue la siguiente _colorCode definición de variable encima de la onInit función en la DialogDemoCommandSet clase . Esto se usa para almacenar el resultado del cuadro de diálogo del selector de color.
```
private _colorCode: IColor;
```

Actualice la función de la onExecute siguiente manera. Este código hace lo siguiente:

Inicia el cuadro de diálogo personalizado.
Transfiere un mensaje al cuadro de diálogo, que se usa con el título.
Si aún no se ha establecido, transfiere un código de color al cuadro de diálogo con un valor predeterminado.
Muestra el cuadro de diálogo personalizado.
Recibe y almacena el valor devuelto del cuadro de diálogo.
Muestra el valor recibido en un cuadro de diálogo personalizado mediante la función Dialog.alert().

@override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
  switch (event.itemId) {
    case 'COMMAND_1':
      Dialog.alert(`${this.properties.sampleTextOne}`);
      const dialog: ColorPickerDialog = new ColorPickerDialog();
      dialog.message = 'Pick a color:';
      // Use 'FFFFFF' as the default color for first usage
      let defaultColor : IColor = { hex: 'FFFFFF', str: '', r: null, g: null, b: null, h: null, s: null, v: null };
      dialog.colorCode = this._colorCode|| defaultColor;
      dialog.show().then(() => {
        this._colorCode = dialog.colorCode;
        Dialog.alert(`Picked color: ${dialog.colorCode.hex}`);
      });
      break;
    default:
      throw new Error('Unknown command');
  }
}

Probar el cuadro de diálogo en el espacio empresarial

Abra el archivo serve.json en la carpeta ./config/ y actualice la configuración actual en el archivo. Este archivo se usa para facilitar la depuración en SharePoint Framework Extensions. Puede actualizar el contenido del archivo para que coincida con sus propios detalles del espacio empresarial y el sitio donde quiere probar la extensión. El valor clave para actualizar es la propiedad pageUrl en la definición de JSON para que coincida con su propio espacio empresarial.

Actualice pageUrl para que apunte a una dirección URL de la lista donde quiere probar las funciones del cuadro de diálogo.

  "serveConfigurations": {
    "default": {
      "pageUrl": "https://yourtenantname.sharepoint.com/Shared%20Documents/Forms/AllItems.aspx",
      "customActions": {
        "9b98b919-fe5e-4758-ac91-6d62e582c4fe": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    },

Nota:

El identificador único de su extensión se actualiza automáticamente a este archivo durante el scaffolding inicial. Si actualiza las propiedades que usa la extensión, debe actualizar serve.json antes de empezar la depuración.

Vuelva a la consola y ejecute el comando siguiente:
```
gulp serve
```

Se inicia la agrupación de la solución y se entrega el manifiesto resultante de la dirección localhost. Debido a la configuración del archivo serve.json, también abre un explorador en la dirección URL específica y configura automáticamente los parámetros de consulta según la configuración de soluciones.

Para aceptar la carga de los manifiestos de depuración, seleccione Cargar scripts de depuración cuando se le pida.

Observe que el nuevo botón no está visible en la barra de herramientas de manera predeterminada, ya que la solución predeterminada requiere que seleccione un elemento de la lista. Si no tiene ningún elemento en la lista o la biblioteca, debe crear un elemento o cargar un documento.
Seleccione un elemento de la lista o la biblioteca y observe que el botón Open Custom Dialog box (Abrir cuadro de diálogo personalizado) se ven en la barra de herramientas.
Haga clic en el botón Open Custom Dialog (Abrir cuadro de diálogo personalizado) para ver el cuadro de diálogo personalizado representado en la vista de lista.
Seleccione un color en el Selector de colores y después seleccione Aceptar para comprobar cómo el código devuelve el valor seleccionado al autor de la llamada. Después, se muestra la selección mediante el cuadro de diálogo de alerta predeterminado.

Nota:

Si encuentra un problema en la documentación o en SharePoint Framework, comuníquelo a los ingenieros de SharePoint mediante la lista de problemas en el repositorio sp-dev-docs. Le agradecemos de antemano su participación.

Consulte también

Información general de SharePoint Framework Extensions

Compartir a través de