Donner à votre complément hébergé par le fournisseur l’apparence de SharePointGive your provider-hosted add-in the SharePoint look-and-feel

Cet article est le deuxième d’une série d’articles sur les notions de base du développement des compléments SharePoint hébergés par un fournisseur. Vous devez d’abord avoir pris connaissance de la rubrique Compléments SharePoint et de l’article de vue d’ensemble de cette série :This is the second in a series of articles about the basics of developing provider-hosted SharePoint Add-ins. You should first be familiar with the topic SharePoint Add-ins and the overview article in this series:

Dans l’article précédent de cette série, vous avez appris à configurer un environnement de développement et à utiliser Visual Studio pour créer un premier complément de niveau « Hello World » qui affiche les données SharePoint dans l’application web distante du complément.In the previous article of this series you learned how to set up a development environment and how to use Visual Studio to create a first "Hello World" level add-in that exposes SharePoint data in the add-in's remote web application.

Dans cet article, nous allons utiliser une solution de complément SharePoint déjà créée.In this article, we start with a SharePoint Add-in solution that has already been created. Elle comprend une application Web Forms ASP.NET et une base de données SQL Azure.It includes an ASP.NET Web Forms application and a SQL Azure database. Nous avons créé tous ces éléments pour vous, car cette série d’articles se concentre uniquement sur les compléments SharePoint. Dans chaque article de cette série, vous améliorerez la fonctionnalité et l’intégration SharePoint du complément.We've created these for you because this series of articles is intended to focus only on SharePoint Add-ins. You'll be adding more SharePoint functionality and integration to the add-in with each article in this series.

Familiarisation avec le complément de baseGet to know the base add-in

Dans cette série d’articles, nous n’allons pas vous enseigner la programmation ASP.NET ou T-SQL, mais vous devez connaître un peu les composants distants du complément avant de pouvoir l’intégrer à SharePoint.We are not going to teach you ASP.NET or T-SQL programming in this series, but you need to know a little about the remote components of the add-in before we can start integrating it into SharePoint. Le scénario du complément imagine une chaîne de magasins de détail dont chaque magasin possède un site web d’équipe dans l’abonnement SharePoint Online de la société mère.The scenario of the add-in envisions a chain of retail stores, and each store has a team website in the parent company's SharePoint Online subscription. Quand un magasin installe le complément sur le site de son équipe, celui-ci permet aux membres de l’équipe d’intégrer leurs données et expérience SharePoint à l’aide des données de la base de données de la société mère.When a store installs the add-in on its team site, the add-in enables them to integrate their SharePoint data and experience with data in the parent company's database. Chaque instance du complément a son propre client dans la base de données d’entreprise et les utilisateurs peuvent uniquement interagir avec les données d’entreprise associées à leur magasin.Each instance of the add-in has its own tenancy in the corporate database, and users can only interact with corporate data that is associated with their store.

Créer des sites d’équipe pour deux magasins de la même chaîneCreate team sites for two stores in the chain

  1. Ouvrez la page d’accueil de votre site SharePoint Online et sélectionnez le lien Contenu du site dans le lancement rapide.Open the home page of your SharePoint Online site, and then select the Site Contents link on the quick launch. Sur la page Contenu du site, faites défiler la page vers le bas jusqu’à ce que vous voyiez le lien Nouveau sous-site. Sélectionnez ce lien.On the Site Contents page, scroll down until you see the new subsite link, and then select it.

  2. Sur la page Nouveau site SharePoint, remplissez le formulaire pour créer un site d’équipe en saisissant ces valeurs (indiquées dans la capture d’écran suivante) :On the New SharePoint Site page, fill out the form for a new team site by entering these values (also shown in the following screen shot):

    • Titre : Fabrikam Hong Kong StoreTitle: Fabrikam Hong Kong Store
    • URL: hongkongURL: hongkong

    Figure 1. Formulaire permettant de créer un sous-site SharePointFigure 1. Form for creating a new SharePoint subsite

    Formulaire permettant de créer un sous-site SharePoint avec dans la zone de texte du titre, « Fabrikam Hong Kong Store », et dans la zone de texte de l’URL, « hongkong ».

  3. Pour tous les autres paramètres, conservez les valeurs par défaut et sélectionnez Créer.Leave all other settings at their defaults, and then select Create.

Explorer le complémentExplore the add-in

  1. Accédez à SharePoint_Provider-hosted_Add-Ins_Tutorials et sélectionnez le bouton Télécharger le fichier ZIP pour télécharger le référentiel sur votre poste de travail.Go to SharePoint_Provider-hosted_Add-Ins_Tutorials and select the Download ZIP button to download the repository to your desktop. Décompressez le fichier.Unzip the file.

  2. Lancez Visual Studio en tant qu’administrateur, puis ouvrez BeforeSharePointUI.sln.Launch Visual Studio as an administrator, and then open BeforeSharePointUI.sln. La solution comprend trois projets :There are three projects in the solution:

    • ChainStore : projet du complément SharePoint ;ChainStore: the SharePoint Add-in project
    • ChainStoreWeb : application web distante ;ChainStoreWeb: the remote web application
    • ChainCorporateDB : base de données SQL Azure.ChainCorporateDB: the SQL Azure database
  3. Sélectionnez le projet ChainStore puis, dans la fenêtre Propriétés, renseignez dans la propriété URL du site l’URL complète du site d’équipe à Hong Kong : https://{YOUR_SHAREPOINT_DOMAIN}/hongkong/ (n’oubliez pas de mettre le caractère « / » à la fin).Select the ChainStore project and, in the Properties window, set the Site URL property to the full URL of the Hong Kong team site: https://{YOUR_SHAREPOINT_DOMAIN}/hongkong/ (be sure to include the "/" character at the end). Cliquez sur Enregistrer.Select Save. À un certain stade, vous serez invité à vous connecter à votre abonnement SharePoint Online.At some point in this process, you will be prompted to sign in to your SharePoint Online subscription.

  4. Cliquez avec le bouton droit sur le nœud de la solution en haut de l’Explorateur de solutions, puis sélectionnez Définir les projets de démarrage.Right-click the solution node at the top of Solution Explorer, and then select Set startup projects.

  5. Vérifiez que les trois projets sont définis sur Démarrer dans la colonne Action.Ensure that all three projects are set to Start in the Action column.

  6. Appuyez sur la touche F5 pour déployer et exécuter votre complément.Use the F5 key to deploy and run your add-in. Visual Studio héberge l’application web distante dans IIS Express et héberge la base de données SQL dans SQL Express.Visual Studio hosts the remote web application in IIS Express and hosts the SQL database in SQL Express. Il effectue une installation temporaire du complément sur votre site SharePoint de test et exécute immédiatement celui-ci.It also makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in. Vous êtes invité à accorder des autorisations pour le complément avant l’ouverture de sa page de démarrage.You are prompted to grant permissions to the add-in before its start page opens.

  7. La page de démarrage du complément ressemble à celle illustrée dans la Figure 2.The add-in's start page looks like the one in Figure 2. Tout en haut figure le nom du site web SharePoint où le complément est installé.At the very top is the name of the SharePoint website where the add-in is installed. Ceci est dû à certains exemples de code générés par les outils de développement Office pour Visual Studio.This is a side effect of some sample code that the Office Developer Tools for Visual Studio generates. Vous pourrez le modifier plus tard.You'll change this in a later step. La page comporte des zones où apparaissent les données extraites des tables de données SQL Commandes, Stock et Employés de l’entreprise.The page has areas where data from the corporate Orders, Inventory, and Employees SQL database tables can be seen. Au départ, ces tables sont vides.These tables are empty initially.

    Figure 2. Page de démarrage du complément Chain StoreFigure 2. Start page of the chain store add-in

    Page de démarrage du complément Chain Store comportant des zones nommées et des boutons permettant d’afficher les stocks, les commandes et les employés du magasin.

  8. Sélectionnez le lien Bon de commande situé en bas de la page pour ouvrir un bon de commande.Select the Order Form link at the bottom of the page to open an order form. Saisissez des valeurs et cliquez sur Passer une commande.Enter some values in the form, and then select Place Order. Un exemple de bon de commande est représenté dans la Figure 3.The screenshot in Figure 3 shows an example. Même si rien ne se passe, le code du bouton transmet les valeurs à une procédure stockée paramétrée dans la base de données SQL.It won't appear that anything has happened, but the code behind the button passes the values to a parameterized stored procedure in the SQL database. Le fait d’utiliser des procédures stockées paramétrées protège la base de données contre les attaques par injection de code SQL.Using parameterized stored procedures protects the database from SQL injection attacks.

    Figure 3. Bon de commandeFigure 3. Order form

    Bon de commande avec zones de texte pour le fournisseur, le produit et la quantité, avec un bouton nommé « Passer une commande ».

  9. Utilisez le bouton de retour du navigateur pour revenir à la page de démarrage, puis sélectionnez le bouton Afficher les commandes.Use the browser's back button to go back to the start page, and then select the Show Orders button. La page de démarrage est actualisée et votre commande apparaît sur la page, comme illustré dans la Figure 4.The start page refreshes and your order appears on the page similar to the screenshot in Figure 4.

    Figure 4. Page de démarrage après la sélection du bouton Afficher les commandesFigure 4. Start page after selecting Show Orders

    Section de la page de démarrage pour les commandes comportant une commande affichée dans un tableau HTML. Comporte des colonnes pour l’ID, le client, le fournisseur, le produit et la quantité.

    La tableau contient un champ Client dont la valeur correspond à l’URL de votre site web SharePoint de test.The table has a Tenant field with the URL of your test SharePoint website as the value. Ce champ ne fait pas référence à l’abonnement SharePoint Online, parfois appelé « client ».This does not refer to the SharePoint Online subscription that is sometimes called a tenancy. Chaque instance du complément est un client distinct dans la base de données d’entreprise.Instead, each instance of the add-in is a distinct tenant in the corporate database. Étant donné qu’une seule instance d’un complément peut être installée sur un site web hôte SharePoint spécifique, l’URL du site web hôte peut servir de discriminateur client dans la base de données.Because no more than one instance of an add-in can be installed on a specific SharePoint host web, the URL of the host web can be used as a tenant discriminator in the database. (Pour bien faire la distinction entre site web hôte et complément web, consultez la rubrique sur les compléments SharePoint.)(For a refresher on the distinction between host web and add-in web, see SharePoint Add-ins.)

    Toutes les procédures stockées dans le complément contiennent la valeur du discriminateur quand elles écrivent ou lisent les données à partir de la base de données.All the stored procedures in the add-in include the discriminator value when they write or read from the database. Ainsi, quand un utilisateur sélectionne Afficher les commandes (ou Afficher l’inventaire ou Afficher les employés), seules les données associées avec le magasin de l’utilisateur sont extraites de la base de données.This ensures that when a user selects Show Orders (or Show Inventory or Show Employees), only the data that is associated with the user's store is retrieved from the database. De plus, les utilisateurs peuvent ainsi uniquement passer des commandes et ajouter des employés pour leur propre magasin.This design also ensures that users can only place orders and add employees for their own store.

    L’application web distante obtient l’URL du site web hôte à partir d’un paramètre de chaîne de requête que SharePoint ajoute à l’URL de la page de démarrage au lancement du complément.The remote web application obtains the host web URL from a query string parameter that SharePoint adds to the URL of the start page when it launches the add-in. Comme SSL est utilisé, cette chaîne de requête est chiffrée car elle est envoyée à l’application web distante via Internet.Because SSL is being used, this query string is encrypted as it goes across the Internet to the remote web application.

  10. 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. Quand vous appuyez sur F5, Visual Studio retire la version précédente du complément et installe la dernière.Each time you select F5, Visual Studio retracts the previous version of the add-in and installs the latest one.

  11. Par défaut, le complément reste installé sur le site web hôte SharePoint entre les sessions de débogage dans Visual Studio.By default, the add-in remains installed on the SharePoint host web in between debugging sessions in Visual Studio. Pour voir comment les utilisateurs finaux pourront lancer le complément une fois celui-ci installé, ouvrez le site web SharePoint Fabrikam Hong Kong dans votre navigateur et accédez à la page Contenu du site.To see how end users would launch it after it is installed, open the Fabrikam Hong Kong SharePoint website in your browser and go to the Site Contents page. Vous verrez la vignette du complément, comme illustré dans la figure ci-dessous.You'll see the tile for the add-in as it is in the following screenshot.

    Figure 5. Vignette de lancement du complément Chain StoreFigure 5. Launch tile for the Chain Store add-in

    Titre de lancement du complément de chaîne de magasins sur la page de contenu du site avec le nom et l’icône du complément.

    Note

    Si vous sélectionnez la vignette, la page de démarrage ne s’ouvre pas, car Visual Studio ferme la session IIS Express quand vous arrêtez le débogage.If you select the tile, the start page does not open because Visual Studio closes the IIS Express session when you stop debugging.

Configurer Visual Studio pour reconstruire la base de données d’entreprise avec chaque session de débogageConfigure Visual Studio to rebuild the corporate database with each debugging session

Par défaut, Visual Studio ne reconstruira pas la base de données SQL Express.By default, Visual Studio will not rebuild the SQL Express database. Ainsi, les commandes et les autres éléments ajoutés à la base de données au cours d’une session de débogage restent dans la base de données pendant les sessions ultérieures.Therefore, orders and other items that you add to the database in one debugging session are still in the database in later sessions. Il est plus facile de commencer avec une base de données vide quand vous sélectionnez F5. Suivez les étapes ci-dessous :It is easier to start with an empty database each time you select F5, so take these steps:

  1. Cliquez avec le bouton droit sur le projet ChainCorporateDB et sélectionnez Propriétés.Right-click the ChainCorporateDB project, and select Properties.

  2. Ouvrez l’onglet Déboguer et activez l’option Toujours recréer la base de données.Open the Debug tab and enable the Always re-create database option.

Donner à l’application web à distance l’apparence de SharePointGive the remote web application the look and feel of SharePoint

Dans certains scénarios, vous pouvez souhaiter que vos pages distantes aient leur propre apparence, mais dans la plupart des cas, il est préférable qu'elles reproduisent l'interface utilisateur SharePoint afin que les utilisateurs aient la sensation d'être sur SharePoint.In some scenarios, you want your remote pages to have their own branding, but in most cases they should mimic the UI of SharePoint so that users feel they are still inside SharePoint.

Ajout du contrôle Chrome et de la barre supérieure SharePoint à la page de démarrageAdd SharePoint chrome and top bar to the start page

  1. Dans l’Explorateur de solutions, accédez à ChainStoreWeb > Pages, puis ouvrez le fichier CorporateDataViewer.aspx (page de démarrage du complément).In Solution Explorer, go to ChainStoreWeb > Pages, and open the CorporateDataViewer.aspx file (the add-in's start page).

  2. Dans la section de l’en-tête, vous verrez un script qui charge des bibliothèques JavaScript.In the head section, you'll see a script that loads some JavaScript libraries. Ajoutez le script suivant sous celui-ci.Add the following additional script under it. Ce script charge le fichier SP.UI.Controls.js qui se trouve dans chaque site web SharePoint dans le dossier /_layouts/15/.This script loads the SP.UI.Controls.js file, which is in every SharePoint website at the /_layouts/15/ folder. Ce fichier charge notamment la bibliothèque CSS SharePoint.Among other things, this file loads the SharePoint CSS library.

      <script type="text/javascript">
        var hostweburl;
    
        // Load the SharePoint resources.
        $(document).ready(function () {
    
            // Get the URI decoded add-in web URL.
            hostweburl =
                decodeURIComponent(
                    getQueryStringParameter("SPHostUrl")
            );
    
            // The SharePoint js files URL are in the form:
            // web_url/_layouts/15/resource.js
            var scriptbase = hostweburl + "/_layouts/15/";
    
            // Load the js file and continue to the 
            // success handler.
            $.getScript(scriptbase + "SP.UI.Controls.js")
        });
    
        // Function to retrieve a query string value.
        function getQueryStringParameter(paramToRetrieve) {
            var params =
                document.URL.split("?")[1].split("&amp;");
            var strParams = "";
            for (var i = 0; i < params.length; i = i + 1) {
                var singleParam = params[i].split("=");
                if (singleParam[0] == paramToRetrieve)
                    return singleParam[1];
            }
        }
    </script>
    
  3. En haut de la section du corps de la page, ajoutez les balises suivantes pour insérer la barre supérieure SharePoint appelée « contrôle Chrome » sur la page. Vous comprendrez mieux l’utilité de ces balises quand nous testerons le complément révisé plus loin dans cet article (la chaîne « application » apparaît dans certains noms de propriété, car les compléments étaient auparavant appelés « applications »).The details of this markup will become clearer when we test the revised add-in later in this article (the string "app" appears in some of the property names because add-ins used to be called "apps").

      <!-- Chrome control placeholder. Options are declared inline.  -->
    <div 
        id="chrome_ctrl_container"
        data-ms-control="SP.UI.Controls.Navigation"  
        data-ms-options=
            '{  
                "appHelpPageUrl" : "Help.aspx",
                "appIconUrl" : "/Images/AppIcon.png",
                "appTitle" : "Chain Store",
                "settingsLinks" : [
                    {
                        "linkUrl" : "Account.aspx",
                        "displayName" : "Account settings"
                    },
                    {
                        "linkUrl" : "Contact.aspx",
                        "displayName" : "Contact us"
                    }
                ]
             }'>
    </div>
    
  4. Les en-têtes H1 et le lien hypertexte figurant dans le corps de la page utilisent automatiquement les styles définis dans la bibliothèque CSS SharePoint. Il n’est donc pas nécessaire de les modifier.The H1 headers and the hyperlink in the body of the page automatically use styles defined in SharePoint's CSS library, so they don't need to be changed. Pour vous montrer comment utiliser les styles SharePoint, attribuez le style SharePoint « Tout en majuscules » aux en-têtes de colonne des trois contrôles GridView en ajoutant l’attribut HeaderStyle-CssClass à chaque contrôle et en lui attribuant la valeur ms-uppercase.To illustrate how you can use the SharePoint styles, set the column headings in the three GridView controls to SharePoint's "all caps" style by adding the HeaderStyle-CssClass attribute to each of the controls and setting its value to ms-uppercase. Voici un exemple.The following is an example. Appliquez ces modifications aux trois contrôles GridView.Make the same change to all three GridView controls.

      <asp:GridView ID="ordersGridView" runat="server" CellPadding="5" GridLines="None" 
    HeaderStyle-CssClass="ms-uppercase" />
    
  5. Le contrôle Chrome utilise l’icône du complément. Une deuxième copie du fichier d’icône est donc nécessaire sur le serveur web distant.The chrome control uses the add-in's icon, so we need a second copy of the icon file on the remote web server. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le fichier AppIcon.png dans le projet ChainStore et sélectionnez Copier.In Solution Explorer, right-click the AppIcon.png file in the ChainStore project, and select Copy.

  6. Cliquez avec le bouton droit sur le dossier Images dans le projet ChainStoreWeb et sélectionnez Coller.Right-click the Images folder in the ChainStoreWeb project, and select Paste.

  7. Ouvrez le fichier CorporateDataViewer.aspx.cs.Open the CorporateDataViewer.aspx.cs file.

  8. La classe CorporateDataViewer déclare un membre privé de type SharePointContext.The CorporateDataViewer class declares a private member of type SharePointContext. Cette classe est définie dans le fichier SharePointContext.cs généré par les outils de développement Office pour Visual Studio lors de la création du projet.This class is defined in the SharePointContext.cs file that the Office Developer Tools for Visual Studio generated when the project was created. Il s’agit plus ou moins d’une classe semblable à la classe HttpContextBase d’ASP.NET, qui comporte des informations contextuelles SharePoint, telles que l’URL du site web hôte.You can think of it as something like the HttpContextBase class of ASP.NET, but with SharePoint contextual information such as the host web's URL added to it.

    Dans la méthode Page_Load, une instruction using écrit le nom du site web hôte SharePoint sur la page de démarrage distante.In the Page_Load method, a using statement writes the name of the SharePoint host web to the remote start page. Il s’agit d’un exemple de code, donc supprimez l’intégralité de l’instruction using (en conservant la ligne qui initialise la variable spContext).This is sample code, so delete the entire using statement (but leave the line that initializes the spContext variable). La méthode doit désormais se présenter comme suit :The method should now look like the following.

      protected void Page_Load(object sender, EventArgs e)
    {
        spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
    }
    
  9. Il existe quatre autres fichiers ASP.NET nécessitant l’interface utilisateur SharePoint :There are four other ASP.NET files that need the SharePoint UI:

    • Account.aspxAccount.aspx
    • Contact.aspxContact.aspx
    • Help.aspxHelp.aspx
    • OrderForm.aspxOrderForm.aspx

    Note

    Le dernier fichier .aspx du projet, EmployeeAdder.aspx, ne fait jamais l’objet d’un rendu, vous ne devez donc pas modifier son interface utilisateur. Vous en apprendrez plus à ce sujet dans un autre article de cette série.The last aspx file in the project, EmployeeAdder.aspx, is never actually rendered, so you don't change its UI. You'll learn more about it in a later article of this series.

    Nous ne souhaitons pas que le contrôle Chrome apparaisse sur ces pages.We don't want the chrome control on these pages. Nous voulons simplement accéder à la bibliothèque CSS SharePoint.We just want access to the SharePoint CSS library. Pour chacun de ces quatre fichiers, ajoutez les balises suivantes à l’élément d’en-tête.For each of these four files, add the following markup to the head element.

      <link type="text/css" rel="stylesheet" 
    href="<%= spContext.SPHostUrl.ToString() + "_layouts/15/defaultcss.ashx" %>" />
    
  10. Cette étape et la suivante ont déjà été effectuées pour les pages Bon de commande et Compte. Elles concernent donc uniquement les pages Contact et Aide.This step and the next one have already been done for the Order Form page and the Account page, so they apply only to the Contact page and Help page. Pour obtenir l’objet spContext sur ces deux pages, ouvrez les fichiers code-behind *. aspx.cs pour les trois pages aspx.To get the spContext object onto each of the pages, open the *.aspx.cs code behind files for the three aspx pages. Dans chacune d’elles, ajoutez le membre suivant à la classe Page.In each of them, add the following member to the Page class.

      protected SharePointContext spContext;
    
  11. Remplacez la méthode Page_Load par la version suivante. L'objet est récupéré à partir du cache de session. Il a été mis en cache à cet endroit lors de sa première création par la méthode Page_Load de la page d'accueil du complément.Replace the Page_Load method with the following version. The object is being retrieved from the Session cache. It was cached there when it was first created by the Page_Load method of the add-in's start page.

      protected void Page_Load(object sender, EventArgs e)
    {
        spContext = Session["SPContext"] as SharePointContext;
    }
    
  12. Ouvrez la page OrderForm.aspx.Open the OrderForm.aspx page. Dans l’élément Label en haut de la page, remplacez l’élément <b> dans l’expression Passer une commande avec des balises « span » faisant référence à la classe CSS ms-accentText.In the top Label element, replace the <b> element on the phrase Place Order with span tags that reference the ms-accentText CSS class. L’intégralité du contrôle Label doit ressembler à ceci une fois que vous avez terminé.The entire Label control should look like this when you are finished.

      <asp:Label ID="lblOrderPrompt" runat="server"
             Text="Enter a supplier, product, and quantity; and then press <span class='ms-accentText'>Place Order</span>.">
    </asp:Label>
    

Exécution du complément et test de la nouvelle interface utilisateur SharePointRun the add-in and test the new SharePoint UI

  1. Appuyez sur la touche F5 pour déployer et exécuter votre complément.Use the F5 key to deploy and run your add-in. Visual Studio héberge l’application web distante dans IIS Express et héberge la base de données SQL dans SQL Express.Visual Studio hosts the remote web application in IIS Express and hosts the SQL database in SQL Express. Il effectue une installation temporaire du complément sur votre site SharePoint de test et exécute immédiatement celui-ci.It also makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in. Vous êtes invité à accorder des autorisations pour le complément avant l’ouverture de sa page de démarrage.You are prompted to grant permissions to the add-in before its start page opens.

  2. Quand la page de démarrage du complément s’ouvre, il se présente sous forme de page SharePoint.When the add-in's start page opens, it now looks like a SharePoint page. Sélectionnez le lien Bon de commande.Select the Order Form link. Il se présente également comme un formulaire SharePoint.It also now looks like a SharePoint form.

    Figure 6. Bon de commande avec le texte écrit en Segoe UI et « Passer une commande » surlignéFigure 6. The Order Form with Segoe fonts and a highlighted Place Order

    Bon de commande, qui utilise désormais des polices Segoe. Le texte « Passer une commande » est surligné en bleu.

  3. Créez une commande, puis sélectionnez Passer une commande.Create an order, and then select Place Order.

  4. Utilisez le bouton de retour du navigateur pour revenir à la page de démarrage du complément, puis sélectionnez Afficher les commandes.Use the browser's back button to go back to the add-in start page, and then select Show Orders. La page doit maintenant ressembler à ceci.The page should now look similar to the following. Notez que les en-têtes de colonne sont désormais tout en majuscules.Note that the column headings are now all caps.

    Figure 7. Contrôle Chrome sur la page de démarrageFigure 7. The start page with a chrome control

    Page de démarrage comportant le contrôle Chrome dans la partie supérieure. L’ensemble du texte et des contrôles sont de style SharePoint.

  5. Sélectionnez l’icône ?Select the ? au bout du contrôle Chrome.icon on the end of the chrome control. Une page d’aide s’ouvre.A simple help page opens. Sélectionnez le bouton de retour du navigateur.Select the browser's back button.

  6. Sélectionnez l’icône d’engrenage sur le contrôle Chrome.Select the gear icon on the chrome control. Un menu s’ouvre avec des liens vers les pages Compte et Contact.A menu opens with links for an Account page and a Contact page. Ouvrez la page Compte et utilisez le bouton de retour du navigateur pour revenir à la page de démarrage.Open the Account page, and use the browser's back button to get back to the start page. Faites de même avec la page Contact.Do the same for the Contact page.

  7. Sélectionnez le bouton Revenir au site sur le contrôle Chrome.Select the Back to Site button on the chrome control. La page d’accueil du site web hôte, c’est-à-dire le site d’équipe du magasin de Hong Kong, s’ouvre.The home page of the host web, the Hong Kong store team site, opens.

  8. Sélectionnez l’icône d’engrenage sur la barre supérieure, puis Modifier l’apparence.Select the gear icon on the top bar, and then select Change the look.

  9. Suivez les invites pour modifier le style du site.Follow the prompts to change the site to one of the alternative "looks."

  10. Accédez à la page Contenu du site et lancez l'application Chain Store en cliquant sur sa mosaïque. Vos pages personnalisées ont pris l'apparence choisie. Les captures d'écran suivantes présentent l'apparence composée Nature.Navigate to the Site Contents page and launch the Chain Store app from its tile. Your custom pages have taken on the chosen look. The following screenshots show how they appear in the Nature composed look.

    Figure 8. Page de démarrage et Bon de commande prenant l’apparence composée « Nature »Figure 8. The start page and order form with the Nature composed look

    Ordre et page de démarrage du complément de couleur verte du style composé « Nature ».

  11. Redéfinissez l’apparence sur l’apparence par défaut, qui s’intitule Office.Change the site's look back to the default, which is called Office.

  12. 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. Quand vous appuyez sur F5, Visual Studio retire la version précédente du complément et installe la dernière.Each time you select F5, Visual Studio retracts the previous version of the add-in and installs the latest one.

  13. 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. 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 select Retract.

Étapes suivantesNext steps

Le complément a désormais l'apparence de SharePoint, mais il s'agit encore d'une simple application web qui ne s'intègre pas vraiment à SharePoint, au-delà du fait d'être lancée à partir d'une mosaïque dans SharePoint. Vous allez découvrir comment ajouter une commande personnalisée, lancée à partir d'un bouton de ruban personnalisé dans l'article suivant : Insertion d'un bouton personnalisé dans un complément hébergé par un fournisseur.The add-in now looks like SharePoint, but it's still just a web application that doesn't really integrate with SharePoint beyond being launched from a tile in SharePoint. You'll add a custom command, launched from a custom ribbon button in the next article: Include a custom button in the provider-hosted add-in.