sharepoint
Tworzenie aplikacji hostowanej przez dostawcę
Szukaj…
Ustawienie środowiska programistycznego
Aby zacząć od tworzenia aplikacji, potrzebujemy Visual Studio 2013 lub wyższej wersji. Pobierz najnowszą edycję społeczności lub wypowiedzi tutaj> https://www.visualstudio.com/products/free-developer-offers-vs
Po pobraniu i zainstalowaniu
Otwórz i kliknij utwórz nowy projekt
rozwiń sekcję Office / SharePoint, powinieneś zobaczyć opcję dla aplikacji, jak pokazano poniżej.
Jeśli opcja aplikacji nie jest dostępna Zamknij VS, pobierz i zainstaluj narzędzia Microsoft Office Developer Tools https://www.visualstudio.com/en-us/features/office-tools-vs.aspx
Przygotowywanie witryny dewelopera
Gdy mamy już studio graficzne, potrzebujemy witryny programisty do wdrażania aplikacji w SharePoint. Najprostszym sposobem jest uzyskanie> Zarejestruj bezpłatne, roczne konto programisty Office 365 https://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061-f798fbb4d170&lcid=1033
Po zakończeniu procesu rejestracji https://www.office.com/ centrum URL dla całej aplikacji
Utwórz aplikację w Visual studio
Zacznijmy od stworzenia naszej pierwszej aplikacji
- Wpisz adres URL witryny programisty utworzonej w poprzednim kroku i wybierz opcję Hosted Provider
Otworzy się okienko wyskakujące, które będzie się logować
Kolejnym krokiem będzie jak w przypadku rodzaju aplikacji, wybierz MVC lub Webform. Wybieram MCV tutaj
W obszarze Jak chcesz, aby Twój dodatek uwierzytelniał się? Wybierz opcję Użyj usługi kontroli dostępu do systemu Windows Azure. I kliknij przycisk Zakończ
W eksploratorze rozwiązań możemy zobaczyć, że utworzono 2 projekty. Jedna to część aplikacji SharePoint, a druga to aplikacja internetowa asp.net
Zacznijmy kodować
Oto przykład podstawowej aplikacji z wiadomościami
Otwórz witrynę programisty SharePoint i utwórz listę do przechowywania naszych artykułów
Utwórz listę niestandardową i dodaj 3 kolejne kolumny Treść, Summery, ThumbnailImageUrl
Wróć do naszej aplikacji SharePoint, otwórz plik AppManifest.xml, kliknij kartę uprawnień i daj uprawnienia do odczytu kolekcji witryn i zapisz ją.
Otwórz HomeController z aplikacji internetowej, w moim przypadku jest to aplikacja MVC. Jeśli tworzysz aplikację internetową, kod powinien znajdować się na stronie default.aspx.cs
Poniżej znajduje się fragment kodu, aby uzyskać najnowsze wiadomości z listy. Tak powinna wyglądać nasza strona indeksu.
[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); }
Teraz kliknij prawym przyciskiem myszy Indeks i kliknij Dodaj widok. Następnie kliknij Dodaj
Teraz otwórz plik Index.cshtml Z Widoki> Katalog domowy
Poniżej znajduje się fragment kodu pliku 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>
Kliknij prawym przyciskiem myszy folder Model w swoim rozwiązaniu i Dodaj plik klasy CS. Dodaj poniżej Klasy modeli
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; } } }
Użyj klawisza F5, aby wdrożyć i uruchomić dodatek. Jeśli zobaczysz okno Alert bezpieczeństwa z prośbą o zaufanie do samopodpisanego certyfikatu Localhost, wybierz Tak.
A teraz pierwsza aplikacja jest gotowa
Tworzenie pełnej strony artykułu
Stworzyliśmy już pierwszą stronę, która pokaże wszystkie artykuły z wiadomościami. Ta strona pokaże pełny artykuł.
Dodaj jeszcze jedną metodę działania do 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); }
Ponownie kliknij Akcja prawym przyciskiem myszy i utwórz widok o tej samej nazwie Nazwa metody akcji. W moim przypadku Widok będzie nazywał się 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>
To jest kod strony Pełna artykuł, która pokazuje treść artykułu