Ajout d’une page et un style personnalisés à un complément SharePoint hébergé sur SharePointAdd a custom page and style to a SharePoint-hosted SharePoint Add-in

Cet article est le septième d’une série d’articles sur les notions de base du développement de compléments SharePoint hébergés par SharePoint. Vous devez d’abord vous familiariser avec les compléments SharePoint et consulter les articles précédents de cette série :This is the seventh in a series of articles about the basics of developing SharePoint-hosted SharePoint Add-ins. You should first be familiar with SharePoint Add-ins and the previous articles in this series:

Note

Si vous avez consulté les articles sur les compléments hébergés par SharePoint, votre solution Visual Studio vous sera utile pour continuer à parcourir cette rubrique.Note If you have been working through this series about SharePoint-hosted add-ins, then you have a Visual Studio solution that you can use to continue with this topic. You can also download the repository at SharePoint_SP-hosted_Add-Ins_Tutorials and open the BeforeClientRenderedControl.sln file. Vous pouvez également télécharger le référentiel sur SharePoint_SP-hosted_Add-Ins_Tutorials et ouvrir le fichier BeforePage.sln.You can also download the repository at SharePoint_SP-hosted_Add-Ins_Tutorials and open the BeforePage.sln file.

Dans cet article, vous allez ajouter une page d’aide au complément SharePoint Orientation de l’employé et la configurer pour utiliser une feuille de style CSS personnalisée.In this article you add a help page to the Employee Orientation SharePoint Add-in and configure it to use a custom CSS stylesheet.

Ajouter une pageAdd a page

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit de la souris sur le dossier Pages, puis sélectionnez Ajouter > Nouvel élément.In Solution Explorer, right-click the Pages folder and choose Add > New Item. The Add New Item dialog opens to the Office/SharePoint node. La boîte de dialogue Ajouter un nouvel élément s’ouvre au niveau du nœud Office/SharePoint.Right-click the new folder and choose AddNew Item. The Add New Item dialog opens to the Office/SharePoint node.

  2. Sélectionnez Page et nommez-la Aide.aspx.Select Page and give it the name Help.aspx.

  3. Recherchez les deux éléments asp:Content dans le fichier et ajoutez les balises asp:Content suivantes entre les deux éléments.Find the two asp:Content elements in the file, and add the following third asp:Content markup in between them.

      <asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
        Help
      </asp:Content> 
    
  4. Recherchez l’élément asp:Content avec l’ID PlaceholderAdditionalPageHead, puis ajoutez les balises suivantes.Find the asp:Content element with the ID of PlaceholderAdditionalPageHead, and add the following markup to it.

      <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
    
  5. Recherchez l’élément asp:Content avec l’ID PlaceHolderMain et supprimez tous les éléments enfants qu’il contient.Find the asp:Content element with the ID of PlaceHolderMain, and remove any child elements in it.

  6. Ajoutez l’élément suivant en tant que contenu du même élément asp:Content.Add the following as content to the same asp:Content element.

      <H3>Having a problem with the add-in?</H3>
      <p>Call the help line for Fabrikam Add-ins:</p>
      <p>1-555-555-5555</p>
    
  7. Enregistrez et fermez le fichier.Save and close the file.

  8. Ouvrez le fichier Default.aspx.Open the Default.aspx file.

  9. Recherchez l’élément asp:Content avec l’ID PlaceHolderMain, puis ajoutez les balises suivantes à la fin de celui-ci.Find the asp:Content element with the ID of PlaceHolderMain, and then add the following markup to the end of it.

      <p><asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Pages/Help.aspx';" 
        Text="Get help for the Employee Orientation add-in" /></p>
    
  10. Enregistrez et fermez le fichier.Save and close the file.

Ajouter une classe de style à la feuille de styleAdd a style class to the stylesheet

  1. Dans l’Explorateur de solutions, ouvrez le fichier app.css dans le dossier Contents, puis ajoutez la ligne suivante dans le fichier.In Solution Explorer, open the app.css file in the Contents folder, and then add the following line to the file.

      p {color: green;}
    
  2. Enregistrez et fermez le fichier.Save and close the file.

Exécuter et tester le complémentRun and test the add-in

  1. Utilisez la touche F5 pour déployer et exécuter votre complément. Visual Studio effectue une installation temporaire du complément sur votre site SharePoint de test et exécute immédiatement celui-ci.Use the F5 key to deploy and run your add-in. Visual Studio makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in.

  2. Quand la page par défaut du complément s’ouvre, cliquez sur le lien Obtenir de l’aide pour le complément Orientation de l’employé pour ouvrir la page Aide.When the add-in's default page opens, click the Get help for the Employee Orientation add-in link to open the Help page.

    La page personnalisée s’ouvre et les deux lignes que vous avez placées dans les balises <p> apparaissent en vert.Your custom page opens and the two lines that you put in

    tags are green.

    Figure 1. Page AideFigure 1. Help page

    Page SharePoint avec le titre « Aide ». Il existe une ligne d’en-tête en noir, suivie de deux lignes de texte en vert.

  3. Pour terminer la session de débogage, fermez la fenêtre du navigateur ou arrêtez le débogage dans Visual Studio.To end the debugging session, close the browser window or stop debugging in Visual Studio. Each time that you press F5, Visual Studio will retract the previous version of the add-in and install the latest one. Quand vous appuyez sur F5, Visual Studio retire la version précédente du complément et installe la dernière.To end the debugging session, close the browser window or stop debugging in Visual Studio. Each time that you press F5, Visual Studio will retract the previous version of the add-in and install the latest one.

  4. Vous allez travailler avec ce complément et la solution Visual Studio dans d’autres articles. Nous vous recommandons donc de retirer le complément une dernière fois quand vous avez terminé de travailler et que vous ne comptez pas le réutiliser pendant un moment.You will work with this add-in and Visual Studio solution in other articles, and it's a good practice to retract the add-in one last time when you are done working with it for a while. Right-click the project in Solution Explorer and choose Retract. Cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions et sélectionnez Retirer.Right-click the project in Solution Explorer and choose Retract.

Étapes suivantesNext steps

Dans l’article suivant de cette série, vous allez ajouter un rendu côté client personnalisé à un complément SharePoint hébergé par SharePoint.In the next article in this series, you'll add a custom client-side rendering to a list column in a SharePoint Add-in: Add custom client-side rendering to a SharePoint-hosted SharePoint Add-in.