Personnalisation des listes et bibliothèques « modernes »

Article
04/08/2023

En 2016, l’équipe de SharePoint Online a publié des bibliothèques et listes de documents « modernes » qui offrent une expérience utilisateur plus rapide, plus intuitive et plus réactive. Les expériences « modernes » présentent de nombreux avantages, et nous vous recommandons vivement de les utiliser.. Si vos personnalisations actuelles ne fonctionnent pas encore avec l’expérience « moderne », il est temps de les revoir afin que vos utilisateurs puissent bénéficier de ces excellentes améliorations :

L’interface utilisateur des bibliothèques de documents « modernes » a été mise à jour pour offrir une expérience semblable à celle de OneDrive. Les opérations de création de dossiers et de téléchargement de fichiers dans le navigateur sont plus intuitives.
Vous pouvez sélectionner Épingler en haut pour ajouter des documents dans n’importe quel affichage.
La fonctionnalité de copie n’est pas nouvelle, mais les gestes de copie et de déplacement vous permettent d’afficher intelligemment votre architecture informatique et de créer de nouveaux dossiers à la volée.
Vous n’aurez peut-être plus à effectuer autant de copies qu’auparavant. Les bibliothèques de documents permettent de mémoriser intelligemment les fichiers que vous utilisez dans SharePoint. Vous pouvez ainsi importer des fichiers à partir d’autres bibliothèques sous forme de liens, sans avoir à dupliquer ces fichiers d’un site à l’autre.
Les nouvelles bibliothèques de documents vous permettent de regrouper des fichiers directement sur la page principale sans avoir à sélectionner un écran d’administration distinct. Vous pouvez également faire glisser le curseur pour modifier la taille de vos colonnes, ainsi que trier, filtrer et regrouper des données à partir de n’importe quel en-tête de colonne.
Les navigateurs mobiles disposent des mêmes fonctionnalités que les versions de bureau, ce qui permet à tous les utilisateurs de profiter de la productivité qu’offre SharePoint, qu’ils interagissent à l’aide de la souris, du clavier, du toucher ou d’un lecteur d’écran.
Vous pouvez maintenant modifier les métadonnées directement à partir de l’affichage principal du panneau d’informations. Plus besoin de cliquer sur plusieurs écrans pour appliquer une mise à jour !
Grâce à l’intégration d’Office Online, vous pouvez parcourir l’aperçu complet d’un document en haut du panneau d’informations. Le panneau propose des métadonnées, notamment l’historique des activités récentes, des mises à jour du fichier et des destinataires de partage du fichier.

Cet article met l’accent sur les options d’extensibilité des expériences de bibliothèque et de liste « modernes ». Pour en savoir plus sur les fonctionnalités offertes par les expériences « modernes », consultez les ressources suivantes :

Dans la suite de cet article, nous utiliserons « moderne » pour la nouvelle expérience utilisateur et « classique » pour l’expérience utilisateur héritée.

Importante

Nous ne rejetons pas l’expérience « classique » : « classique » et « moderne » vont coexister.

Vue d’ensemble des options de personnalisation

Les listes et bibliothèques « modernes » ne prennent pas en charge autant d’options de personnalisation que les listes et bibliothèques « classiques ». Cet article fournit des détails et des exemples sur les options prises en charge. L’équipe SharePoint met tout en œuvre pour prendre en charge davantage d’options à l’avenir. La liste suivante présente un rapide aperçu des fonctionnalités prises en charge pour les listes et bibliothèques « modernes » :

Sous-ensemble d’actions personnalisées par l’utilisateur
Marque personnalisée
Intégration de PowerApps et Flow

Ces personnalisations ne sont actuellement pas prises en charge pour les listes et bibliothèques « modernes » :

Personnalisations de champs basés sur JSLink (voir la remarque relative aux Extensions SharePoint Framework)
Personnalisations d’affichages basés sur JSLink (voir la remarque relative aux Extensions SharePoint Framework)
Styles CSS personnalisés via la propriété web AlternateCSSUrl
Code JavaScript personnalisé incorporé via des actions personnalisées par l’utilisateur (voir la remarque relative aux Extensions SharePoint Framework)
Pages maîtres personnalisées (une personnalisation plus approfondie sera prise en charge ultérieurement à l’aide d’autres options)
Personnalisation via InfoPath
Stratégie de téléchargement minimale (MDS)
Publication SharePoint Server

Remarque

Depuis juin 2017, une version préliminaire pour développeurs des extensions SharePoint Framework est disponible. Grâce à ces extensions SharePoint Framework, vous pouvez contrôler le rendu d’un champ via du code personnalisé et créer des actions personnalisées par l’utilisateur pour exécuter votre code personnalisé. Pour plus d’informations, consultez Vue d’ensemble des extensions SharePoint Framework.

Actions personnalisées par l’utilisateur

Les expériences « modernes » permettent d’afficher certaines actions personnalisées par l’utilisateur dans la nouvelle interface utilisateur, mais les configurations de certaines actions utilisateur prises en charge par le mode « classique » ne le sont pas dans l’expérience « moderne ». Le tableau suivant offre une vue d’ensemble des emplacements d’actions personnalisées pris en charge et de la manière dont ils sont affichés dans l’interface utilisateur « moderne » :

Emplacement d’action personnalisée par l’utilisateur	Visible dans l’interface utilisateur « moderne »
`EditControlBlock`	Oui, ces entrées apparaissent sous forme d’éléments de menu personnalisés.
`CommandUI.Ribbon`	Oui, ces entrées apparaissent sous forme d’éléments de la barre d’outils.
Tous les autres emplacements (par exemple `scriptlink`)	Désolé, ces actions personnalisées par l’utilisateur ne fonctionneront pas.

Remarque

Ces actions personnalisées par l’utilisateur n’apparaissent dans les listes et bibliothèques « modernes » que lorsque vous vous trouvez sur des sites « classiques » sur lesquels une interface utilisateur « moderne » est activée. Par défaut, elles n’apparaissent pas sur les sites « modernes » car il est impossible d'ajouter des actions personnalisées par l’utilisateur à des sites « modernes » lorsque l’option NoScript est activée. Toutefois, vous pouvez désactiver NoScript sur les sites « modernes » afin que le comportement des listes et bibliothèques « modernes » soit identique sur les sites « classiques » et « modernes ».

Actions EditControlBlock personnalisées par l’utilisateur

Vous pouvez ajouter des liens personnalisés au menu contextuel en utilisant EditControlBlock comme emplacement de votre action personnalisée. Le code XML d’approvisionnement PnP suivant crée deux entrées personnalisées.

<pnp:ProvisioningTemplate ID="EditControlBlockSamples" Version="1" xmlns:pnp="http://schemas.dev.office.com/PnP/2015/12/ProvisioningSchema">
  <pnp:CustomActions>
    <pnp:SiteCustomActions>
      <pnp:CustomAction Name="CA_1" Description="ca 1" Location="EditControlBlock" RegistrationType="List" RegistrationId="101" Title="CA 1 Title" Sequence="3000" Url="https://contoso.azurewebsites.net/pages/index.aspx" Enabled="true"/>
      <pnp:CustomAction Name="CA_2" Description="ca 2" Location="EditControlBlock" RegistrationType="ContentType" RegistrationId="0x0101" Title="CA 2 Title" Sequence="4000" Url="https://contoso.azurewebsites.net/pages/index.aspx" Enabled="true"/>
    </pnp:SiteCustomActions>
  </pnp:CustomActions>
</pnp:ProvisioningTemplate>

Vous pouvez appliquer ce modèle d’approvisionnement PnP à un site à l’aide de la bibliothèque PnP Core ou de PnP PowerShell. Dans cet article, nous avons choisi l’approche PowerShell. La première étape consiste à installer le module PnP PowerShell. Au terme de cette opération, enregistrez le code XML d’approvisionnement PnP dans un fichier, et les deux lignes de PnP PowerShell suffisent pour appliquer le modèle :


# Connect to a previously created Modern Site
$cred = Get-Credential
Connect-PnPOnline -Url https://[tenant].sharepoint.com/sites/siteurl -Credentials $cred

# Apply the PnP provisioning template
Apply-PnPProvisioningTemplate -Path c:\customaction_modern_editcontrolblock.xml -Handlers CustomActions

Remarque

PnP PowerShell est une solution open source pour laquelle un support est assuré par la communauté active. Il n’existe pas de contrat SLA Microsoft pour le support technique relatif à cet outil open source.

Si vous actualisez l’affichage « moderne » d’une bibliothèque de documents sur votre site, les nouvelles entrées apparaîtront.

Actions EditControlBlock personnalisées visibles dans le menu

Remarque

Si vous essayez ceci sur un site d’équipe « moderne » où vous avez désactivé l’option NoScript, utilisez la version d’avril 2017 (ou ultérieure) de PnP-PowerShell. Vous pouvez également utiliser la version de développement actuelle.
Si vous souhaitez utiliser cet exemple pour une liste, définissez l’attribut RegistrationId sur 100.

Actions CommandUI.Ribbon personnalisées par l’utilisateur

Pour étendre la barre d'outils dans les expériences de liste et de bibliothèque « modernes », ajoutez une action personnalisée par l’utilisateur ciblant l’emplacement CommandUI.Ribbon, comme illustré dans l’exemple suivant de code XML d’approvisionnement PnP.

<pnp:ProvisioningTemplate ID="CommandUIRibbonSamples" Version="1" xmlns:pnp="http://schemas.dev.office.com/PnP/2015/12/ProvisioningSchema">
  <pnp:CustomActions>
    <pnp:SiteCustomActions>
      <pnp:CustomAction Name="CA_4" Description="ca 4" Location="CommandUI.Ribbon" RegistrationType="List" RegistrationId="101" Title="CA 4 Title" Sequence="6000" Enabled="true">
        <pnp:CommandUIExtension>
          <CommandUIDefinitions>
            <CommandUIDefinition Location="Ribbon.Documents.Copies.Controls._children">
              <Button
                Id="Ribbon.Documents.Copies.OfficeDevPnPDownloadAll"
                Command="OfficeDevPnP.Cmd.DownloadAll"
                Image16by16="/_layouts/15/images/sharepointfoundation16.png"
                LabelText="Download All"
                Description="Download all files separately"
                ToolTipTitle="Download All"
                ToolTipDescription="Download all files separately"
                TemplateAlias="o1"
                Sequence="15"/>
            </CommandUIDefinition>
          </CommandUIDefinitions>
          <CommandUIHandlers>
            <CommandUIHandler
              Command="OfficeDevPnP.Cmd.DownloadAll"
              CommandAction="https://contoso.azurewebsites.net/pages/index.aspx" />
          </CommandUIHandlers>
        </pnp:CommandUIExtension>
      </pnp:CustomAction>
      <pnp:CustomAction Name="CA_6" Description="ca 6" Location="CommandUI.Ribbon" RegistrationType="ContentType" RegistrationId="0x0101" Title="CA 6 Title" Sequence="5000" Enabled="true">
        <pnp:CommandUIExtension>
            <CommandUIDefinitions>
              <CommandUIDefinition Location="Ribbon.Tabs._children">
                <Tab Id="Custom Tab" Title="Custom Tab" Description="Custom Tab">
                  <Scaling Id="Custom Tab.Scaling">
                    <MaxSize Id="Custom Group.Scaling.MaxSize" GroupId="Custom Group" Size="TwoLarge" />
                    <MaxSize Id="Custom Group 2.Scaling.MaxSize" GroupId="Custom Group 2" Size="OneLarge" />
                    <Scale Id="Custom Group.Scaling.Scale" GroupId="Custom Group" Size="TwoLarge" />
                    <Scale Id="Custom Group 2.Scaling.Scale" GroupId="Custom Group 2" Size="OneLarge" />
                  </Scaling>
                  <Groups Id="Custom Tab.Groups">
                    <Group Id="Custom Group 2" Title="Custom Group 2" Description="Custom Group 2" Sequence="7888" Template="Ribbon.Templates.OneLarge">
                      <Controls Id="Custom Group 2.Controls">
                        <Button Id="CustomButton3" LabelText="Custom Button 3" Image16by16="/_layouts/15/images/attach16.png" Image32by32="/_layouts/15/images/attach16.png" ToolTipTitle="Custom Button 3" ToolTipDescription="Custom Button 3" Command="CustomButton3.Command" TemplateAlias="c3" />
                      </Controls>
                    </Group>
                    <Group Id="Custom Group" Title="Custom Group 1" Description="Custom Group 1" Sequence="10000" Template="Ribbon.Templates.TwoLarge">
                      <Controls Id="Custom Group 1.Controls">
                        <Button Id="CustomButton1" LabelText="Custom Button 1" Image16by16="/_layouts/15/images/itslidelibrary.png" Image32by32="/_layouts/15/images/itslidelibrary.png" ToolTipTitle="Custom Button 1" ToolTipDescription="Custom Button 1" Command="CustomButton1.Command" TemplateAlias="c1" />
                        <Button Id="CustomButton2" LabelText="Custom Button 2" Image16by16="/_layouts/15/images/dldsln16.png" Image32by32="/_layouts/15/images/dldsln16.png" ToolTipTitle="Custom Button 2" ToolTipDescription="Custom Button 2" Command="CustomButton2.Command" TemplateAlias="c2" />
                      </Controls>
                    </Group>
                  </Groups>
                </Tab>
              </CommandUIDefinition>
              <CommandUIDefinition Location="Ribbon.Templates._children">
                <GroupTemplate Id="Ribbon.Templates.TwoLarge">
                  <Layout Title="TwoLarge" LayoutTitle="TwoLarge"> 
                    <Section Alignment="Top" Type="OneRow"> 
                      <Row> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c1" /> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c2" /> 
                      </Row> 
                    </Section> 
                  </Layout> 
                </GroupTemplate>
              </CommandUIDefinition>
              <CommandUIDefinition Location="Ribbon.Templates._children">
                <GroupTemplate Id="Ribbon.Templates.OneLarge">
                  <Layout Title="OneLarge" LayoutTitle="OneLarge"> 
                    <Section Alignment="Top" Type="OneRow"> 
                      <Row> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c3" /> 
                      </Row> 
                    </Section> 
                  </Layout> 
                </GroupTemplate>
              </CommandUIDefinition>
            </CommandUIDefinitions>
            <CommandUIHandlers>
              <CommandUIHandler Command="CustomButton1.Command" CommandAction="https://contoso.azurewebsites.net/pages/index.aspx" />
              <CommandUIHandler Command="CustomButton2.Command" CommandAction="http://www.bing.com" />
              <CommandUIHandler Command="CustomButton3.Command" CommandAction="https://developer.microsoft.com/sharepoint" />
            </CommandUIHandlers>
        </pnp:CommandUIExtension>
      </pnp:CustomAction>
    </pnp:SiteCustomActions>
  </pnp:CustomActions>
</pnp:ProvisioningTemplate>

Une fois ces actions personnalisées ajoutées, vous les verrez apparaître dans la barre d’outils. Notez que les onglets personnalisés sont transformés en menu déroulant.

Action personnalisée visible sur la barre d’outils

Action personnalisée visible sur la barre d’outils

Remarque

Si vous essayez ceci sur un site d’équipe « moderne » où vous avez désactivé l’option NoScript, utilisez la version d’avril 2017 (ou ultérieure) de PnP-PowerShell. Vous pouvez également utiliser la version de développement actuelle.
Si vous souhaitez utiliser cet exemple pour une liste, définissez les attributs RegistrationId sur 100 et utilisez le code XML suivant pour l’action personnalisée par l’utilisateur CA_4.

	<CommandUIDefinition Location="Ribbon.Templates._children">
	  <Button
	    Id="Ribbon.Templates.OfficeDevPnPDownloadAll"
	    Command="OfficeDevPnP.Cmd.DownloadAll"
	    Image16by16="/_layouts/15/images/sharepointfoundation16.png"
	    LabelText="Download All"
	    Description="Download all files separately"
	    ToolTipTitle="Download All"
	    ToolTipDescription="Download all files separately"
	    TemplateAlias="o1"
	    Sequence="15"/>
	</CommandUIDefinition>

Limitations relatives aux actions personnalisées par l’utilisateur

Lors du développement d’actions personnalisées par l’utilisateur qui doivent fonctionner dans des expériences « modernes », tenez compte des limitations suivantes :

Vous ne pouvez pas complètement déterminer l’ordre d’affichage des actions personnalisées. Les actions personnalisées par l’utilisateur sont ajoutées dans l’ordre dans lequel _api/web/Lists(guid'listid')/CustomActionElements les renvoie, et cette API ne prend actuellement pas en compte les attributs de séquence. Pour classer les boutons définis dans un onglet personnalisé, il suffit de les ajouter dans l’ordre souhaité dans le code xml CommandUIDefinition. Notre exemple affiche Button 3 en premier, en raison de l’ordre utilisé dans le code XML.
Le regroupement des actions personnalisées par l’utilisateur dans un onglet personnalisé dépend de la présence d’éléments Button lorsqu’il existe plusieurs éléments Tab ou Group dans le code xml de l’élément d’action personnalisée renvoyé.
Les actions de commande ne peuvent pas contenir de code JavaScript. Par exemple, si CommandAction="javascript:alert('My custom Action');" est utilisé, l’action personnalisée par l’utilisateur n’apparaîtra pas.
L’utilisation des propriétés ScriptLink ou ScriptBlock est impossible car elles ne peuvent être employées qu’avec l’emplacement de l’action personnalisé par l’utilisateur ScriptLink, dont la prise en charge n’est pas assurée.
L’utilisation d’images interactives (par exemple, Image16by16="/_layouts/15/1033/images/formatmap16x16.png?rev=33" Image16by16Left="-144" Image16by16Top="-107") est impossible ; vous devez spécifier des images individuelles. Notez également que seules les images 16 x 16 sont pertinentes.

Marque personnalisée

Si votre site utilise un thème personnalisé, ce thème est respecté dans les expériences de liste et de bibliothèque « modernes », comme illustré dans l’exemple suivant.

Liste moderne avec marque personnalisée issue d’un thème personnalisé

Configurer l’expérience utilisateur

Différentes options sont disponibles pour déterminer l’expérience de bibliothèque et de liste à utiliser (« moderne » ou « classique »). Pour plus de détails, consultez l’article Désactivation de l’expérience moderne de listes et de bibliothèques.

Quand la détection automatique intégrée rétablit-elle automatiquement l’affichage sur le mode « classique » ?

SharePoint utilise un système de détection automatique pour basculer automatiquement l’affichage d’une liste vers le mode « classique », à condition que vous ne désactiviez pas l’expérience « moderne » pour votre liste via les remplacements d’étendue de liste de type site, web ou liste décrits à la section précédente. Ce système de détection rétablit automatiquement le mode « classique » chaque fois que SharePoint détecte que votre liste utilise des fonctionnalités qui ne sont pas (encore) prises en charge en mode « moderne ».

Les paramètres évalués dans le cadre de la détection automatique et entraînant l’affichage de la liste en mode « classique » sont les suivants :

Si la page de formulaire de liste demandée ne comporte aucun composant WebPart, ou en comporte plusieurs.
(Jusqu’en juillet 2017) Si la fonctionnalité « Navigation et filtrage de métadonnées » est activée. Nous déployons actuellement la prise en charge de la navigation par métadonnées gérées pour les listes et bibliothèques « modernes ».
Si le composant WebPart disponible est un composant XSLTListViewWebPart (méthode d’affichage de liste par défaut) et que :
- Il existe un ensemble de valeurs JSLink ou XslLink non standard pour les propriétés des composants WebPart.
- La page s’affiche dans une boîte de dialogue (IsDlg = 1).
- La liste ne repose pas sur l’un des types suivants : Bibliothèque de documents (101), Bibliothèque d’images (109), Bibliothèque de pages web (119) ou Liste générique (100). Depuis août 2017, les Annonces (104) et les Liens (103) sont affichés à l’aide de l’interface utilisateur « moderne ».
- La propriété JSLink est définie sur l’un des champs à afficher.
- Un des champs à afficher est de type Données externes BCS, Géolocalisation, OutcomeChoice, ou d’un de ces types de champs de publication : Image, Html ou SummaryLinks.
- Il existe des actions personnalisées d’étendue de liste dont la propriété ScriptSrc est définie.
Si le composant WebPart disponible est un composant ListFormWebPart et que :
- La page s’affiche dans une boîte de dialogue (IsDlg = 1).
- Il s’agit d’une « Nouvelle » page de formulaire pour une bibliothèque de documents.
- Les champs à afficher ne correspondent à aucun des types pris en charge suivants : Attachments, TaxonomyField, Boolean, Choice, Currency, DateTime, File, Lookup, MultiChoice, MultiLine sauf si l’option Ajouter avec version est activée, Number, Text, User ou Url.

Détecter par programmation si votre bibliothèque/liste sera affichée en mode « moderne » ou « classique »

La section précédente décrivait le raisonnement suivi par notre mécanisme de détection automatique, mais en tant que développeur, vous disposez heureusement d’un moyen très facile de déterminer comment une bibliothèque/liste sera affichée. Cette information est aussi facile à obtenir que la valeur de la propriété de fichier PageRenderType, que vous pouvez obtenir à l’aide de CSOM ou de REST. Les exemples suivants illustrent comment charger la page qui affiche la liste, puis obtenir la propriété PageRenderType :

Exemple CSOM

using (var cc = new ClientContext(siteUrl))
{
    cc.Credentials = new SharePointOnlineCredentials(userName, password);
    
    // Load the AllItems.aspx file from the list
    File file = cc.Web.GetFileByServerRelativeUrl("/sites/dev/ECMTest/Forms/AllItems.aspx");
    cc.Load(file, f => f.PageRenderType);
    cc.ExecuteQuery();

    // Check page render type
    Console.WriteLine($"Status = {file.PageRenderType}");
}

Remarque

La propriété PageRenderType a été introduite dans la version de janvier 2017 de CSOM (16.1.6112.1200).

Demande REST

GET _api/web/getfilebyserverrelativeurl('/sites/dev/ECMTest/Forms/AllItems.aspx')/pageRenderType

L’appel REST vous fournit la valeur entière, comme décrit dans le tableau suivant.

Valeur	Raison
0	Indéfini = 0, (informations insuffisantes pour connaître le mode d’affichage)
1	MultipeWePart
2	JSLinkCustomization
3	XslLinkCustomization
4	NoSPList
5	HasBusinessDataField
6	HasTaskOutcomeField
7	HasPublishingField
8	HasGeolocationField
9	HasCustomActionWithCode
10	HasMetadataNavFeature
11	SpecialViewType
12	ListTypeNoSupportForModernMode
13	AnonymousUser
14	ListSettingOff
15	SiteSettingOff
16	WebSettingOff
17	TenantSettingOff
18	CustomizedForm
19	DocLibNewForm
20	UnsupportedFieldTypeInForm
21	InvalidFieldTypeInForm
22	InvalidControModeInForm
23	CustomizedPage
24	ListTemplateNotSupported
100	Moderne

Considérations supplémentaires

Nous doterons progressivement les expériences de liste et de bibliothèque « modernes » d’autres options de personnalisation. Ces options seront alignées sur la publication de fonctionnalités SharePoint Framework supplémentaires. Pour le moment, aucun calendrier précis n’est disponible, mais nous mettrons à jour les articles relatifs aux expériences « modernes » chaque fois que de nouvelles fonctionnalités seront publiées.

Personnalisation des listes et bibliothèques « modernes »

Vue d’ensemble des options de personnalisation

Actions personnalisées par l’utilisateur

Actions EditControlBlock personnalisées par l’utilisateur

Actions CommandUI.Ribbon personnalisées par l’utilisateur

Limitations relatives aux actions personnalisées par l’utilisateur

Marque personnalisée

Configurer l’expérience utilisateur

Quand la détection automatique intégrée rétablit-elle automatiquement l’affichage sur le mode « classique » ?

Détecter par programmation si votre bibliothèque/liste sera affichée en mode « moderne » ou « classique »

Exemple CSOM

Demande REST

Considérations supplémentaires

Voir aussi

Ressources supplémentaires