sharepoint
Création d'une application hébergée par un fournisseur
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.
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
Créer une application dans Visual studio
Commençons par créer notre première application
- 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.
Popup ouvrira qui sera comme pour la connexion
La prochaine étape consistera, pour le type d'application, à sélectionner MVC ou Webform. Je sélectionne MCV ici
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.
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
Commençons à coder
Ici, je prends l'exemple d'une application de base
Ouvrez le site de développeur SharePoint et créez une liste pour stocker nos articles d'actualité
Créez une liste personnalisée et ajoutez 3 colonnes supplémentaires Body, Summery, ThumbnailImageUrl
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.
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
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); }
Maintenant, cliquez avec le bouton droit sur Index et cliquez sur Ajouter une vue. Cliquez ensuite sur Ajouter
Maintenant, ouvrez le fichier Index.cshtml du répertoire Views> Home
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>
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; } } }
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.
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); }
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