Recherche…


Définition de l'environnement de développement

Pour commencer avec le développement d'applications, nous avons besoin de Visual Studio 2013 ou d'une version ultérieure. Téléchargez la dernière édition de la communauté ou de l'expression à partir d'ici> https://www.visualstudio.com/products/free-developer-offers-vs

Une fois téléchargé et installé

Ouvrir et cliquer créer un nouveau projet

Développez la section Office / SharePoint, vous devriez voir une option pour App comme indiqué ci-dessous.

entrer la description de l'image ici

Si l'option de l'application n'est pas disponible Fermez le VS, téléchargez et installez les outils de développement Microsoft Office https://www.visualstudio.com/en-us/features/office-tools-vs.aspx

Préparation pour le site développeur

Une fois que nous avons Visual Studio, nous avons besoin d'un site de développeur pour déployer des applications sur SharePoint. Manière la plus simple est d'obtenir est> Inscrivez - vous gratuitement à un an compte Office 365 développeur https://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061-f798fbb4d170&lcid=1033

Une fois le processus d'inscription terminé https://www.office.com/ URL du centre de toutes vos applications entrer la description de l'image ici

Créer une application dans Visual studio

Commençons par créer notre première application

  1. Ouvrir studio visuel et> créer un nouveau projet
  2. Entrez le nom et l'emplacement entrer la description de l'image ici
  1. Entrez l'URL de votre site de développeur créée à l'étape précédente et sélectionnez Hébergement hébergé par le fournisseur.

entrer la description de l'image ici

  1. Popup ouvrira qui sera comme pour la connexion

  2. La prochaine étape consistera, pour le type d'application, à sélectionner MVC ou Webform. Je sélectionne MCV ici entrer la description de l'image ici

  3. Sous Comment voulez-vous que votre complément s'authentifie?, Sélectionnez Utiliser le service de contrôle d'accès Windows Azure et cliquez sur Terminer.

  4. Dans l'explorateur de solutions, nous pouvons voir que 2 projets ont été créés. L’une est l’application SharePoint et une autre l’application Web asp.net

entrer la description de l'image ici

Commençons à coder

Ici, je prends l'exemple d'une application de base

  1. Ouvrez le site de développeur SharePoint et créez une liste pour stocker nos articles d'actualité

  2. Créez une liste personnalisée et ajoutez 3 colonnes supplémentaires Body, Summery, ThumbnailImageUrl entrer la description de l'image ici

  3. Revenez à notre application SharePoint, ouvrez le fichier AppManifest.xml, cliquez sur l'onglet d'autorisation et accordez l'autorisation de lecture à la collection de sites et enregistrez-la. entrer la description de l'image ici

  4. Ouvrez HomeController depuis une application Web, dans mon cas, c'est une application MVC. Si vous créez une application Webform, votre code doit être dans la page default.aspx.cs

  5. Voici l'extrait de code pour obtenir les dernières nouvelles de la liste. Voici comment notre page d'index devrait ressembler.

    [SharePointContextFilter]
    public ActionResult Index()
    {
        User spUser = null;
    
        var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
        List<NewsList> newsList = new List<NewsList>();
        using (var clientContext = spContext.CreateUserClientContextForSPHost())
        {
            if (clientContext != null)
            {
                spUser = clientContext.Web.CurrentUser;
    
                clientContext.Load(spUser, user => user.Title);
    
                clientContext.ExecuteQuery();
    
                ViewBag.UserName = spUser.Title;
    
                List lst = clientContext.Web.Lists.GetByTitle("News");
                CamlQuery queryNews = CamlQuery.CreateAllItemsQuery(10);
                ListItemCollection newsItems = lst.GetItems(queryNews);
                clientContext.Load(newsItems, includes => includes.Include(i => i.Id, i => i.DisplayName, i => i["ThumbnailImageUrl"], i => i["Summery"]));
    
                clientContext.ExecuteQuery();
    
                if (newsItems != null)
                {
                    foreach (var lstProductItem in newsItems)
                    {
                        newsList.Add(
                            new NewsList
                            {
                                Id = Convert.ToInt32(lstProductItem.Id.ToString()),
                                Title = lstProductItem.DisplayName.ToString(),
                                Summery = lstProductItem["Summery"].ToString(),
                                Thumbnail = lstProductItem["ThumbnailImageUrl"].ToString()
                            });
                    }
                }
            }
        }
    
        return View(newsList);
    }
    
  6. Maintenant, cliquez avec le bouton droit sur Index et cliquez sur Ajouter une vue. Cliquez ensuite sur Ajouter

entrer la description de l'image ici

  1. Maintenant, ouvrez le fichier Index.cshtml du répertoire Views> Home

  2. Voici l'extrait de code pour le fichier index.cshtml

    @model List<SharePointNewsAppWeb.Models.NewsList>
     @{
     ViewBag.Title = "My News - browse latest news";
    }
     <br />
     @foreach (var item in Model)
     {
     <div class="row panel panel-default">
      <div class="col-xs-3">
        <a href="/home/[email protected]">
            <img class="img-responsive" style="max-height:200px;max-width:100%;" src="@item.Thumbnail" alt="@item.Title" />
        </a>
    </div>
    <div class="col-xs-9 panel-default">
        <div class="panel-heading">
            <h4><a href="/home/[email protected]">@item.Title.ToUpper()</a></h4>
        </div>
        <div class="panel-body">
            <p>@item.Summery</p>
        </div>
    </div>
    
  3. Cliquez avec le bouton droit sur le dossier Model dans votre solution et ajoutez un fichier de classe CS. Ajouter les classes de modèle ci-dessous

     using System;
     using System.Collections.Generic;
     using System.Linq;
     using System.Web;
    
     namespace SharePointNewsAppWeb.Models
    {
      public class NewsApp
       {
    
       }
     public class NewsList
      {
    
    public int Id { get; set; }
    
    public string Title { get; set; }
    
    public string Summery { get; set; }
    
    public string Thumbnail { get; set; }
     }
     public class FullArticle
     {
    
      public int Id { get; set; }
    
      public string Title { get; set; }
    
      public string Body { get; set; }
    
     }
    }
    
  4. Utilisez la touche F5 pour déployer et exécuter votre complément. Si une fenêtre d'alerte de sécurité vous invite à faire confiance au certificat Localhost auto-signé, choisissez Oui.

Et maintenant, la première application est prête

Création d'une page d'article complète

Nous avons déjà créé la première page qui montrera tous les articles d'actualité. Cette page affichera l'article complet.

  1. Ajouter une méthode d'action supplémentaire à HomeController

    [SharePointContextFilter]
    public ActionResult Aticle(int ArticleId)
    {
        User spUser = null;
    
        var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
        FullArticle article = new FullArticle();
        using (var clientContext = spContext.CreateUserClientContextForSPHost())
        {
            if (clientContext != null)
            {
                spUser = clientContext.Web.CurrentUser;
    
                clientContext.Load(spUser, user => user.Title);
    
                clientContext.ExecuteQuery();
    
                ViewBag.UserName = spUser.Title;
    
                List lst = clientContext.Web.Lists.GetByTitle("News");
                CamlQuery queryNews = new CamlQuery();
                queryNews.ViewXml = @"<View><Query><Where><Eq><FieldRef Name='ID'/>" + "<Value Type='Number'>" + ArticleId + "</Value></Eq></Where></Query>" +
                    "<ViewFields><FieldRef Name='ID'/><FieldRef Name='Title'/><FieldRef Name='Body'/></ViewFields></View>";//
                ListItemCollection newsItems = lst.GetItems(queryNews);
                clientContext.Load(newsItems, includes => includes.Include(i => i.Id, i => i.DisplayName, i => i["Body"]));
    
                clientContext.ExecuteQuery();
    
                if (newsItems != null)
                {
                    foreach (var lstProductItem in newsItems)
                    {
                        article.Id = Convert.ToInt32(lstProductItem.Id.ToString());
                        article.Title = lstProductItem.DisplayName.ToString();
                        article.Body = lstProductItem["Body"].ToString();
                    }
                }
            }
        }
        return View(article);
    }
    
  2. Encore une fois Cliquez avec le bouton droit sur Action et créez une vue avec le même nom Nom de la méthode d'action. Dans mon cas, la vue s'appellera Aticle

      @model SharePointNewsAppWeb.Models.FullArticle
    
    @{
     ViewBag.Title = "Aticle";
    }
    
    <br />
    <div class="panel panel-default">
     <div class="panel-heading"><a style="font-size:20px;" href="/"><i   class="glyphicon glyphicon-chevron-left"></i> <i class="glyphicon glyphicon-home"></i>      </a></div>
     <div class="panel-heading"><h1 class="h2">@Model.Title.ToUpper()</h1></div>
     <div class="panel-body">@Html.Raw(@Model.Body)</div>
    </div>
    

Ceci est le code pour la page complète de l'article qui montre le corps de l'article de nouvelles



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow