Personnalisation des listes et bibliothèques « modernes »Customizing "modern" lists and libraries

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.In 2016, the SharePoint Online team released "modern" document lists and libraries, which bring a better user experience that is faster, more intuitive, and responsive. Les expériences « modernes » présentent de nombreux avantages, et nous vous recommandons vivement de les utiliser..The "modern" experiences have many benefits, and we highly recommend using them. 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 :If your current customizations do not yet work with the "modern" experience, it's time to revisit those so your users can benefit from these great improvements:

  • 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."Modern" document libraries have an updated user interface that offers an experience similar to OneDrive, so it’s more intuitive to create a new folder and upload files in the browser.

  • Vous pouvez sélectionner Épingler en haut pour ajouter des documents dans n’importe quel affichage.You can select Pin to top to add documents “above the fold” in any onscreen view.

  • 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.Copying isn’t new, but the copy and move gestures are intelligent about displaying your information architecture and letting you create new folders on the fly.

  • Vous n’aurez peut-être plus à effectuer autant de copies qu’auparavant.You may not have to make as many copies anymore. 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.Document libraries are intelligent about remembering other files you’ve been using in SharePoint, so you can import other files from other libraries as links, without having to duplicate files between multiple sites.

  • 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.The new document libraries let you group files directly in the main page without selecting a separate admin screen. 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.You can also drag to change the size of your columns, as well as sort, filter, and group from any column header.

  • 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.Mobile browsers have the same features as the desktop, making SharePoint productive for every user, whether they interact via mouse, keyboard, touch, or screen reader.

  • Vous pouvez maintenant modifier les métadonnées directement à partir de l’affichage principal du panneau d’informations.You can now edit metadata directly from the main view in the information panel. Plus besoin de cliquer sur plusieurs écrans pour appliquer une mise à jour !No more clicking into multiple screens to apply an update!

  • Grâce à l’intégration d’Office Online, vous pouvez parcourir l’aperçu complet d’un document en haut du panneau d’informations.Thanks to Office Online integration, you can navigate a complete document preview at the top of the information panel. 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.The panel offers metadata, including the history of recent activity, updates to the file, and who received a share to the file.

Cet article met l’accent sur les options d’extensibilité des expériences de bibliothèque et de liste « modernes ».This article focuses on the extensibility options within the "modern" library and list experiences. Pour en savoir plus sur les fonctionnalités offertes par les expériences « modernes », consultez les ressources suivantes :However, if you want to learn more about the functionalities offered by the "modern" experiences, see the following resources:

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.In the remainder of this article, we'll use "modern" for the new user experience and "classic" for the legacy user experience.

Important

Nous ne rejetons pas l’expérience « classique » : « classique » et « moderne » vont coexister.We're not deprecating the "classic" experience; both "classic" and "modern" will coexist.

Vue d’ensemble des options de personnalisationOverview of customization options

Les listes et bibliothèques « modernes » ne prennent pas en charge autant d’options de personnalisation que les listes et bibliothèques « classiques »."Modern" lists and libraries do not support as many customization options as "classic" lists and libraries. Cet article fournit des détails et des exemples sur les options prises en charge.In this article, we provide details and examples of the supported options. L’équipe SharePoint met tout en œuvre pour prendre en charge davantage d’options à l’avenir.The SharePoint team is working to support more options in the future. La liste suivante présente un rapide aperçu des fonctionnalités prises en charge pour les listes et bibliothèques « modernes » :The following list gives a quick overview of the supported capabilities for "modern" lists and libraries:

  • Sous-ensemble d’actions personnalisées par l’utilisateurSubset of user custom actions
  • Marque personnaliséeCustom branding
  • Intégration de PowerApps et FlowPowerApps and Flow integration

Ces personnalisations ne sont actuellement pas prises en charge pour les listes et bibliothèques « modernes » :These customizations are currently not supported for "modern" lists and libraries:

  • Personnalisations de champs basés sur JSLink (voir la remarque relative aux Extensions SharePoint Framework)JSLink-based field customizations (see Note on SharePoint Framework Extensions)
  • Personnalisations d’affichages basés sur JSLink (voir la remarque relative aux Extensions SharePoint Framework)JSLink-based view customizations (see Note on SharePoint Framework Extensions)
  • Styles CSS personnalisés via la propriété web AlternateCSSUrlCustom CSS via AlternateCSSUrl web property
  • Code JavaScript personnalisé incorporé via des actions personnalisées par l’utilisateur (voir la remarque relative aux Extensions SharePoint Framework)Custom JavaScript embedded via user custom actions (see Note on SharePoint Framework Extensions)
  • Pages maîtres personnalisées (une personnalisation plus approfondie sera prise en charge ultérieurement à l’aide d’autres options)Custom master pages (more extensive branding will be supported later using alternative options)
  • Personnalisation via InfoPathCustomization via InfoPath
  • Stratégie de téléchargement minimale (MDS)Minimal Download Strategy (MDS)
  • Publication SharePoint ServerSharePoint server publishing

Notes

Depuis juin 2017, une version préliminaire pour développeurs des extensions SharePoint Framework est disponible.In June 2017, SharePoint Framework Extensions went into developer preview. 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é.Using these SharePoint Framework Extensions, you can control the rendering of a field via custom code, and you can create user custom actions that execute your custom code. Pour plus d’informations, consultez Vue d’ensemble des extensions SharePoint Framework.To learn more, see Overview of SharePoint Framework Extensions.

Actions personnalisées par l’utilisateurUser custom actions

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 ».The "modern" experiences allow certain user custom actions to be surfaced in the new user interface, but not all user action configurations that are supported by "classic" mode are supported in the "modern" experience. 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 » :The following table gives a high level overview of the supported custom action locations and how they're surfaced in the "modern" UI:

Emplacement d’action personnalisée par l’utilisateurUser custom action location Visible dans l’interface utilisateur « moderne »Visible in "modern" UI
EditControlBlock Oui, ces entrées apparaissent sous forme d’éléments de menu personnalisés.Yes, these entries show up as custom menu items.
CommandUI.Ribbon Oui, ces entrées apparaissent sous forme d’éléments de la barre d’outils.Yes, these entries show up as toolbar items.
Tous les autres emplacements (par exemple scriptlink)All other locations (for example scriptlink) Désolé, ces actions personnalisées par l’utilisateur ne fonctionneront pas.Sorry, these user custom actions won't work.

Notes

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.These custom actions show up in "modern" lists and libraries only when you are on "classic" sites with "modern" UI enabled. 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.By default, they don't show up on "modern" sites because it's not possible to add user custom actions to "modern" sites because they have the NoScript option enabled. 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 ».However, you can disable NoScript on "modern" sites to achieve the same behavior for "modern" lists and libraries across "classic" and "modern" sites.

Actions EditControlBlock personnalisées par l’utilisateurEditControlBlock user custom actions

Vous pouvez ajouter des liens personnalisés au menu contextuel en utilisant EditControlBlock comme emplacement de votre action personnalisée.Adding custom links to the context menu can be done by using the EditControlBlock as the location for your custom action. Le code XML d’approvisionnement PnP suivant crée deux entrées personnalisées.The following PnP provisioning XML creates two custom entries.

<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.You can apply this PnP provisioning template to a site using the PnP Core library or PnP PowerShell. Dans cet article, nous avons choisi l’approche PowerShell.We've opted to show the PowerShell approach in this article. La première étape consiste à installer le module PnP PowerShell.A first step is to install the PnP PowerShell module. 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 :After that's done, save the PnP provisioning XML to a file, and the two simple lines of PnP PowerShell are enough to apply the template:


# 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

Notes

PnP PowerShell est une solution open source pour laquelle un support est assuré par la communauté active.PnP PowerShell is an open-source solution with active community providing support for it. Il n’existe pas de contrat SLA Microsoft pour le support technique relatif à cet outil open source.There is no SLA for the open-source tool support from Microsoft.

Si vous actualisez l’affichage « moderne » d’une bibliothèque de documents sur votre site, les nouvelles entrées apparaîtront.If you refresh the "modern" view of a document library on your site, you'll see the new entries appear.

Actions EditControlBlock personnalisées visibles dans le menuCustom EditControlBlock actions visible in the menu

Custom EditControlBlock actions visible in the menu

Notes

  • 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.If you're trying this on a "modern" team site where you disabled the NoScript option, use the April 2017 or later version from PnP-PowerShell. Vous pouvez également utiliser la version de développement actuelle.Alternatively, use the current dev version.
  • Si vous souhaitez utiliser cet exemple pour une liste, définissez l’attribut RegistrationId sur 100.If you want to use this sample for a list, set the RegistrationId attribute to 100.

Actions CommandUI.Ribbon personnalisées par l’utilisateurCommandUI.Ribbon user custom actions

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.If you want to extend the toolbar in the "modern" list and library experiences, you can do so by adding a user custom action targeting the CommandUI.Ribbon location as shown in this PnP provisioning XML sample.

<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.After adding these user custom actions, you'll see them appear on the toolbar. Notez que les onglets personnalisés sont transformés en menu déroulant.Notice that custom tabs are transformed into a drop-down menu.

Action personnalisée visible sur la barre d’outilsCustom action visible on the toolbar

Action personnalisée visible sur la barre d’outils


Notes

  • 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.If you're trying this on a "modern" team site where you disabled the NoScript option, use the April 2017 or later version from PnP-PowerShell. Vous pouvez également utiliser la version de développement actuelle.Alternatively use the current dev version.
  • 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.If you want to use this sample for a list, set the RegistrationId attributes to 100, and use the following XML for the CA_4 user custom action.
 <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’utilisateurUser custom action limitations

Lors du développement d’actions personnalisées par l’utilisateur qui doivent fonctionner dans des expériences « modernes », tenez compte des limitations suivantes :When developing user custom actions that need to work in "modern" experiences, consider the following limitations:

  • 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.You can't completely control the order in which the user custom actions show up; the user custom actions are added in the order the _api/web/Lists(guid'listid')/CustomActionElements returns the user custom actions, and this API currently does not take into account the sequence attributes. Pour classer les boutons définis dans un onglet personnalisé, il suffit de les ajouter dans l’ordre souhaité dans le code xml CommandUIDefinition.Buttons defined inside a custom tab can be ordered by adding them in the correct order in the CommandUIDefinition xml. Notre exemple affiche Button 3 en premier, en raison de l’ordre utilisé dans le code XML.Our sample shows Button 3 as first and that's because of the order in the 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é.Grouping of user custom actions inside a custom tab is driven by the presence of Button elements whenever there's either multiple Tab or Group elements in the returned user custom action element xml.

  • Les actions de commande ne peuvent pas contenir de code JavaScript.Command actions cannot contain JavaScript. Par exemple, si CommandAction="javascript:alert('My custom Action');" est utilisé, l’action personnalisée par l’utilisateur n’apparaîtra pas.For example, using CommandAction="javascript:alert('My custom Action');" means that the user custom action will not show up.

  • 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.Using the ScriptLink or ScriptBlock properties is not possible because they can only be used with the user custom action location ScriptLink, which is not supported.

  • 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.Using image maps (for example, Image16by16="/_layouts/15/1033/images/formatmap16x16.png?rev=33" Image16by16Left="-144" Image16by16Top="-107") does not work; you'll need to specify individual images. Notez également que seules les images 16 x 16 sont pertinentes.Also note that only 16 x 16 images are relevant.

Marque personnaliséeCustom branding

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.If your site happens to use a custom theme, this custom theme is respected in the "modern" list and library experiences as shown in the following sample.

Liste moderne avec marque personnalisée issue d’un thème personnaliséModern list with custom branding coming from custom theme

Modern list with custom branding coming from custom theme

Configurer l’expérience utilisateurConfigure the end user experience

Différentes options sont disponibles pour déterminer l’expérience de bibliothèque et de liste à utiliser (« moderne » ou « classique »).You have multiple options to control whether the "modern" or "classic" library and list experience is used. Pour plus de détails, consultez l’article Désactivation de l’expérience moderne de listes et de bibliothèques.Check out the Opting out of the modern list and library experience article for more details.

Quand la détection automatique intégrée rétablit-elle automatiquement l’affichage sur le mode « classique » ?When does the built-in auto-detect automatically switch rendering back to "classic"?

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.SharePoint uses an auto-detect system to automatically switch the rendering of a list to "classic", assuming that you do not disable the "modern" experience for your list by using the site, web, or list scoped overrides explained in the previous section. 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 ».This auto-detect system automatically switches you back to "classic" whenever SharePoint detects that your list is using features that are not (yet) supported in "modern".

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 :Following are the settings that are evaluated as part of the auto-detect system and which make the list render in "classic" mode:

  • Si la page de formulaire de liste demandée ne comporte aucun composant WebPart, ou en comporte plusieurs.If the requested list form page has zero or more than one web part on it.

  • (Jusqu’en juillet 2017) Si la fonctionnalité « Navigation et filtrage de métadonnées » est activée.(Until July 2017) If the web scoped feature "Metadata Navigation and Filtering" is enabled. 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 ».We're rolling out managed metadata navigation support for "modern" lists and libraries.

  • Si le composant WebPart disponible est un composant XSLTListViewWebPart (méthode d’affichage de liste par défaut) et que :If the available web part is an XSLTListViewWebPart (default way to render the list) and:

    • Il existe un ensemble de valeurs JSLink ou XslLink non standard pour les propriétés des composants WebPart.There's a non-standard JSLink or XslLink value set for the web part properties.
    • La page s’affiche dans une boîte de dialogue (IsDlg = 1).The page is shown in a dialog (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).The list is not based on one of the following types: Document library (101), Picture library (109), webpage library (119), or Generic list (100). Depuis août 2017, les Annonces (104) et les Liens (103) sont affichés à l’aide de l’interface utilisateur « moderne ».As of August 2017, Announcements (104) and Links (103) do render using the "modern" UI.
    • La propriété JSLink est définie sur l’un des champs à afficher.The JSLink property is set on one of the fields to render.
    • 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.One of the fields to render is of type BCS external data, Geolocation, OutcomeChoice, or one of these publishing field types Image, Html, or SummaryLinks.
    • Il existe des actions personnalisées d’étendue de liste dont la propriété ScriptSrc est définie.There are list scoped user custom actions that have their ScriptSrc property set.
  • Si le composant WebPart disponible est un composant ListFormWebPart et que :If the available web part is a ListFormWebPart and:

    • La page s’affiche dans une boîte de dialogue (IsDlg = 1).The page is shown in a dialog (IsDlg=1).
    • Il s’agit d’une « Nouvelle » page de formulaire pour une bibliothèque de documents.It's a "New" form page for a document library.
    • 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.The fields to render are not any of these supported types: Attachments, TaxonomyField, Boolean, Choice, Currency, DateTime, File, Lookup, MultiChoice, MultiLine except when Append with versioning is on, Number, Text, User, or Url.

Détecter par programmation si votre bibliothèque/liste sera affichée en mode « moderne » ou « classique »Programmatically detect if your library/list will be shown using "modern" or "classic"

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.The previous section explained the reasoning behind our auto-detect mechanism, but luckily there's an easy way for you as a developer to understand how a library/list will be rendered. 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.Getting this information is as simple as getting the value of the PageRenderType file property, which you can obtain by using CSOM or REST. Les exemples suivants illustrent comment charger la page qui affiche la liste, puis obtenir la propriété PageRenderType :The following samples show how to first load the page that is rendering the list, and then get the PageRenderType:

Exemple CSOMCSOM sample

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}");
}

Notes

La propriété PageRenderType a été introduite dans la version de janvier 2017 de CSOM (16.1.6112.1200).The PageRenderType property was introduced in January 2017 CSOM release (16.1.6112.1200).


Demande RESTREST request

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.The REST call gets you the integer value, which is explained in the following table.

ValeurValue RaisonReason
00 Indéfini = 0, (informations insuffisantes pour connaître le mode d’affichage)Undefined = 0, (there's not enough information to know the render mode)
11 MultipeWePartMultipeWePart
22 JSLinkCustomizationJSLinkCustomization
33 XslLinkCustomizationXslLinkCustomization
44 NoSPListNoSPList
55 HasBusinessDataFieldHasBusinessDataField
66 HasTaskOutcomeFieldHasTaskOutcomeField
77 HasPublishingFieldHasPublishingField
88 HasGeolocationFieldHasGeolocationField
99 HasCustomActionWithCodeHasCustomActionWithCode
1010 HasMetadataNavFeatureHasMetadataNavFeature
1111 SpecialViewTypeSpecialViewType
1212 ListTypeNoSupportForModernModeListTypeNoSupportForModernMode
1313 AnonymousUserAnonymousUser
1414 ListSettingOffListSettingOff
1515 SiteSettingOffSiteSettingOff
1616 WebSettingOffWebSettingOff
1717 TenantSettingOffTenantSettingOff
1818 CustomizedFormCustomizedForm
1919 DocLibNewFormDocLibNewForm
2020 UnsupportedFieldTypeInFormUnsupportedFieldTypeInForm
2121 InvalidFieldTypeInFormInvalidFieldTypeInForm
2222 InvalidControModeInFormInvalidControModeInForm
2323 CustomizedPageCustomizedPage
2424 ListTemplateNotSupportedListTemplateNotSupported
100100 ModerneModern

Considérations supplémentairesAdditional considerations

Nous doterons progressivement les expériences de liste et de bibliothèque « modernes » d’autres options de personnalisation.We'll gradually introduce more customization options for "modern" list and library experiences. Ces options seront alignées sur la publication de fonctionnalités SharePoint Framework supplémentaires.These will be aligned with the release of additional SharePoint Framework capabilities. 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.Currently, there's no exact schedule available, but we'll update the "modern" experience articles whenever new capabilities are released.

Voir aussiSee also