sharepoint
Een door een provider gehoste app maken
Zoeken…
Ontwikkelomgeving instellen
Om te beginnen met App-ontwikkeling hebben we Visual Studio 2013 of een hogere versie nodig. Download hier de nieuwste community- of expressie-editie> https://www.visualstudio.com/products/free-developer-offers-vs
Nadat het is gedownload en geïnstalleerd
Open en klik op nieuw project maken
vouw Office / SharePoint-gedeelte uit. U ziet een optie voor de app, zoals hieronder wordt weergegeven.
Als de app-optie niet beschikbaar is Sluit de VS, download en installeer Microsoft Office Developer Tools https://www.visualstudio.com/en-us/features/office-tools-vs.aspx
Voorbereiding op ontwikkelaarssite
Zodra we Visual Studio hebben, hebben we een ontwikkelaarssite nodig om apps op SharePoint te implementeren. De eenvoudigste manier is om te krijgen is> Meld u aan voor een gratis Office 365-ontwikkelaarsaccount https://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061-f798fbb4d170&lcid=1033
Zodra het aanmeldingsproces is voltooid, https://www.office.com/ center URL voor al uw app 
Maak een app in Visual Studio
Laten we beginnen met het maken van onze eerste app
- Open visuele studio en> maak een nieuw project
- Voer naam en locatie in
- Voer de URL van uw ontwikkelaarssite in die u in de vorige stap hebt gemaakt en selecteer Door provider gehost
Er zal een pop-up worden geopend die zal inloggen
De volgende stap is voor het type toepassing, selecteer MVC of Webform. Ik selecteer hier MCV
Kies onder Hoe wilt u dat uw invoegtoepassing wordt geverifieerd? Windows Azure Access Control Service gebruiken. En klik op Voltooien
In oplossingsverkenner kunnen we zien dat er 2 project is gemaakt. Een daarvan is SharePoint app-deel en een andere is asp.net web-app
Laten we beginnen met coderen
Hier neem ik het voorbeeld van een eenvoudige nieuws-app
Open de SharePoint-ontwikkelaarssite en maak een lijst om onze nieuwsartikelen op te slaan
Maak een aangepaste lijst en voeg nog 3 kolommen toe Body, Summery, ThumbnailImageUrl
Ga terug naar onze SharePoint-app, open het bestand AppManifest.xml, klik op het tabblad Machtiging en geef leesrechten voor de siteverzameling en sla deze op.
Open HomeController vanuit een webapplicatie, in mijn geval is het een MVC-applicatie. Als u een webformulier-app maakt, moet uw code zich op de pagina default.aspx.cs bevinden
Hieronder staat het codefragment voor het laatste nieuws uit de lijst. Zo zou onze indexpagina eruit moeten zien.
[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); }Klik nu met de rechtermuisknop op Index en klik op Weergave toevoegen. Klik vervolgens op Toevoegen
Open nu het bestand Index.cshtml vanuit Views> Home-map
Hieronder staat het codefragment voor het bestand 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>Klik met de rechtermuisknop op Modelmap in uw oplossing en voeg een CS-klassebestand toe. Voeg hieronder Modelklassen toe
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; } } }Gebruik de F5-sleutel om uw invoegtoepassing te implementeren en uit te voeren. Als u een venster Beveiligingswaarschuwing ziet waarin u wordt gevraagd het zelfondertekende Localhost-certificaat te vertrouwen, kiest u Ja.
En nu is de eerste app klaar
Volledige artikelpagina maken
We hebben al een eerste pagina gemaakt met alle nieuwsartikelen. Deze pagina toont het volledige artikel.
Voeg nog een actiemethode toe aan 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); }Nogmaals Klik met de rechtermuisknop op Actie en maak een weergave met dezelfde naam Naam van de actiemethode. In mijn geval wordt View Aticle genoemd
@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>
Dit is de code voor de volledige artikelpagina die de inhoud van het nieuwsartikel toont