Utilisation en tant que WebPart standalone

• Cloner la solution (voir MC pour les droits)

• Ajouter le sppkg qui se trouve dans ".\Sharepoint\solution" dans la liste d'aplication du site. Si il n'y est pas exécuter :

    npm i
    gulp bundle --ship
    gulp package-solution --ship

• Attendre quelque seconde que les colonnes/content type/liste "teamSettings" soit créé.

• Ajouter la WebPart dans une page moderne.

Utilisation en tant que composant dans une WebPart externe

Prérequie :

• Avoir en 1.8.2 les packages suivant sinon pas compatible avec spfx-base-data-services:

    "@microsoft/sp-core-library": "1.8.2",
  
    "@microsoft/sp-lodash-subset": "1.8.2",
  
    "@microsoft/sp-office-ui-fabric-core": "1.8.2",
  
    "@microsoft/sp-property-pane": "1.8.2",
  
    "@microsoft/sp-webpart-base": "1.8.2",

• Avoir une colonne Zone avec id : {0a956b3d-4d76-42bd-9faf-e02fc2851d52} lié a un termset dans la taxonomie, ce champs sera utilisé pour définir les zones des équipes. (voir les spécifications de TeamManagement pour plus de detail, RJN, MC)

Initialisation de "spfx-base-data-services"

• Executer :

    npm i team-management-spfx --save
    npm i [email protected] --save

• Ajouter dans votre webPart :

    import { ServicesConfiguration } from 'spfx-base-data-services';
    import {ServiceFactoryTM} from 'team-management-spfx/lib/service/ServiceFactoryTM';
    import { TableNames, DbConstants } from 'team-management-spfx/lib/constants/index';
    import { Text } from "@microsoft/sp-core-library";
  
    public onInit(): Promise<void> {
        return super.onInit().then(_ => { 
          const keys = Object.keys(TableNames);
          const names = keys.map((k) => { return TableNames[k]; });
          ServicesConfiguration.Init({
            dbName: Text.format(DbConstants.DbNameFormat, this.context.pageContext.web.serverRelativeUrl),
            dbVersion: DbConstants.Version,
            lastConnectionCheckResult: false,
            checkOnline: false,
            context: this.context,
            serviceFactory: new ServiceFactoryTM(),
            tableNames: names,
            translations: {
              AddLabel: strings.AddLabel, //ajouter vos traduction
              DeleteLabel: strings.DeleteLabel,
              IndexedDBNotDefined: strings.IndexedDBNotDefined,
              SynchronisationErrorFormat: strings.SynchronisationErrorFormat,
              UpdateLabel: strings.UpdateLabel,
              UploadLabel: strings.UploadLabel,
              versionHigherErrorMessage: strings.versionHigherErrorMessage,
              typeTranslations: { //nom des model
                Zone: strings.zoneLabel
              }
            }
          });
        });
      }

• Ajouter dans le fichier qui contiendra le composant :

    import TeamManagement from 'team-management-spfx/lib/webparts/teamManagement/components/TeamManagement';
    import { TeamManagementSettings } from 'team-management-spfx/lib/model/TeamManagementSettings';

• Ajouter le composant a votre render, exemple :

    <TeamManagement
        language={fr-fr}
        teamManagementData={this.state.teamManagementSettings}
        onChanged={(data:TeamManagementSettings, isValid:boolean) => this.teamChanged(data, isValid)}
    ></TeamManagement>

Language : le code langue dans laquelle sera traduit le composant (de-de, en-us, es-es, fr-fr, hi-in, hu-hu, id-id, it-it, pl-pl, pt-br, ro-ro, ru-ru, sr-latn-rs, th-th, zh-cn)

teamManagementData : type TeamManagementSettings : la valeur actuel des equipes et équipes désactivé, obligatoire sinon composant vide.

onChanged : callBack retournant un TeamManagementSettings correspondant a l'etat du composant lorsque une valeur est modifié et un boolean indiquant si tout les champs sont valides. Le TeamManagementSettings retourné sera toujours valide, si les valeurs des champs sont modifié et deviennent invalide alors le TeamManagementSettings retourné ne changera pas.