sharepoint
プロバイダ提供のアプリケーションを作成する
サーチ…
開発環境の設定
アプリケーション開発から始めるには、Visual studio 2013以上が必要です。最新のコミュニティや表現の版はこちらからダウンロードできます。> https://www.visualstudio.com/products/free-developer-offers-vs
一旦それがダウンロードされ、インストールされると
開いてクリックして新しいプロジェクトを作成する
Office / SharePointセクションを展開すると、以下のようにAppのオプションが表示されます。
Appオプションが利用できない場合VSを終了し、 Microsoft Office Developer Toolsをダウンロードしてインストールします 。https://www.visualstudio.com/en-us/features/office-tools-vs.aspx
開発者サイトの準備
ビジュアルスタジオを取得したら、アプリケーションをSharePointに展開するための開発者サイトが必要です。最も簡単な方法は次のとおりです>無料の1年間Office 365デベロッパーアカウントにサインアップするhttps://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061-f798fbb4d170&lcid=1033
登録手続きが完了したら、すべてのアプリのhttps://www.office.com/ center URL
Visual Studioでアプリケーションを作成する
最初のアプリの作成から始めましょう
- 前の手順で作成したデベロッパーサイトのURLを入力し、[プロバイダのホスト]を選択します
ポップアップが開き、ログイン時に表示されます
どのようにアドインを認証するのですか?で、Windows Azure Access Control Serviceを使用を選択し、完了をクリックします。
ソリューションエクスプローラでは、2つのプロジェクトが作成されていることがわかります。 1つはSharePoint app-partで、もう1つはasp.net web appです
コーディングを開始します
ここで私は基本的なニュースアプリの例を取っています
SharePointデベロッパーサイトを開き、ニュース記事を保存するためのリストを作成する
私たちのSharePointアプリケーションに戻り、AppManifest.xmlファイルを開き、権限タブをクリックし、サイトコレクションに読み取り権限を与えて保存します。
WebアプリケーションからHomeControllerを開きます。私の場合、MVCアプリケーションです。 Webformアプリケーションを作成する場合は、default.aspx.csページにコードを入れる必要があります
以下は、リストから最新のニュースを入手するためのコードスニペットです。インデックスページの表示方法
[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); }
Indexを右クリックし、 Add Viewをクリックします。次に、[追加]をクリックします
Index.cshtmlファイルを開きます。Views > Home directoryから
以下は、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>
ソリューションのModelフォルダを右クリックし、CSクラスファイルを追加します。以下のモデルクラスを追加する
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; } } }
アドインを展開して実行するには、F5キーを使用します。自己署名ローカルホスト証明書を信頼するように求めるセキュリティ警告ウィンドウが表示された場合は、[はい]を選択します。
そして今、最初のAppが準備完了です
完全な記事ページを作成する
私たちはすでにすべてのニュース記事を表示する最初のページを作成しました。このページには完全な記事が表示されます。
HomeControllerにもう1つのアクションメソッドを追加する
[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); }
アクションを右クリックし、同じ名前のアクションメソッド名を持つビューを作成します。私の場合、ビューは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>
これはニュース記事の本文を示す完全な記事ページのコードです