SharePoint Framework: Personalizar el Toolpart

Una de las tareas que más dolores de cabeza nos daba en las Farm Solution, era personalizar el toolpart ( o la barra de propiedades) del Webpart. Este nuevo Framework se ha facilitado mucho la vida, simplificando dicha tarea. En este artículo vamos a ver cómo podemos añadir diversos tipos de campos (combobox, checkbox, multiselect), o páginas a nuestro ToolPart y cómo rellenar dichos valores con valores propios de SharePoint.

Utilizando Yeoman se creará la solución. Para ello basta con el siguiente comando:

yo @microsoft/sharepoint

Nota: Para este ejemplo, puesto que lo que vamos a visualizar  es solo el ToolPart, no hace falta que seleccionemos ningún framework Javascript.

Observamos el código que nos ha generado la plantilla y confirmamos que dentro de la clase del WebPart disponemos de la siguiente propiedad:

  protected get propertyPaneSettings(): IPropertyPaneSettings {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }

De dicho código, con un poco de lógica podemos deducir que si añadimos otro elemento en el ToolPart  al array de la variable «pages», tendremos otra página en el ToolPart.

Cada página está formada por una Cabecera que será el elemento principal de la página. A su vez, esta página tendrá de 1 a N grupos, siendo un grupo la agrupación de varios campos que tienen relación entre sí.

Por ejemplo tenemos un WebPart que muestra las imágenes de una biblioteca de SharePoint. En este caso, tendremos un grupo Configuración, en el que tendremos un campo para indicar el nombre de la lista donde va a estar ubicada la imagen en SharePoint. Para ello bastaría con el siguiente código:

  protected get propertyPaneSettings(): IPropertyPaneSettings {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneConfigurationDescription
          },
          groups: [
            {
              groupName: strings.ConfigurationGroupName,
              groupFields: [
                PropertyPaneTextField("list", {
                  label: strings.DescriptionListSPLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }

Si vemos el resultado, quizá no sea el esperado por el usuario, pues quedará así:

¿Cómo modificamos el tipo de campo que se muestra en el ToolPart?

El equipo de producto esta vez ha proporcionado bastantes facilidades a los desarrolladores pese a que el «SPFX» esta en versión preview. Por este motivo dentro de la clase de nuestro WebPart añadimos la siguientes referencias:

import {
   BaseClientSideWebPart,
  IPropertyPaneSettings,
   IWebPartContext, 
   PropertyPaneTextField,
   PropertyPaneCheckbox,
  PropertyPaneChoiceGroup, 
  PropertyPaneDropdown, 
  PropertyPaneSlider, 
  PropertyPaneButton, 
  PropertyPaneToggle 
} from "@microsoft/sp-client-preview";

Pero,  si en nuestro ejemplo modificamos el código y reemplazamos las propiedades por ésta…

  protected get propertyPaneSettings(): IPropertyPaneSettings {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneConfigurationDescription
          },
          groups: [
            {
              groupName: strings.ConfigurationGroupName,
              groupFields: [
                PropertyPaneDropdown("list", {
                  label: strings.DescriptionListSPLabel,
                   isDisabled: false, 
                  options: [ 
                    { key: 'Lista1', text: 'Lista1' }, 
                    { key: 'Lista2', text: 'Lista2' }, 
                    { key: 'Lista3', text: 'Lista3', isSelected: true } 
                  ]
                })
              ]
            }
          ]
        }
      ]
    };
  }

…la «cosa» ya pinta mejor:

Aún nos queda un último paso: cargar los datos de forma dinámica. Para ello tenemos dos opciones:
Opción 1
1.- Declaramos una variable privada:

private _options: IPropertyPaneDropdownOption[];

2.- Definimos un método onInit en el que haremos la llamada al servicio Rest.

public onInit<T>(): Promise<T> {
  let dataService = (this.context.environment.type === EnvironmentType.Test || this.context.environment.type === EnvironmentType.Local) ?
    new MockListsService() :
    new ListsService(this.context);

  this._options = [];

  return new Promise<T>((resolve: (args: T) => void, reject: (error: Error) => void) => {
    dataService.getListNames().then(lists => lists.forEach(list => {
      this._options.push(<IPropertyPaneDropdownOption>{
        text: list,
        key: list
      });
      resolve(undefined);
    }))
  });
}

3.- Dentro de nuestra propiedad asignaremos la variable privada declarada previamente.

groupFields: [
                PropertyPaneDropdown("list", {
                  label: strings.DescriptionListSPLabel,
                   isDisabled: false,
                  options: this._options
                })
             ]

Ahora bien, este proceso puede tener un handicap y es que, si introducimos una consulta pesada, puede tardar en cargar el WebPart. En este caso, el equipo de producto a través del repositorio de GitHub plantea otra solución.

Opción 2
1.- No poner ningún código en el OnInit
2.- Añadir la función en la asignación de las propertyPaneSettings de tal forma que solamente se haga la consulta cuando se consulte el ToolPart.

Conclusión

Las cosas cambian en SharePoint, y como hemos visto, para mejor. El nuevo Framework trae muchos elementos nuevos que facilitan la vida en el desarrollo y hacen que desarrollar en SharePoint sea algo bastante atractivo.

Lo visto en este artículo es solamente es un avance de todas las opciones disponibles.
En posteriores artículos veremos cómo podemos crear un elemento personalizado.