sharepoint
プロバイダ提供のアプリケーションを作成する

.NET Framework ASP.NET C# Language CSS HTML JavaScript jQuery PowerShell Microsoft SQL Server VBA

開発環境の設定

アプリケーション開発から始めるには、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を入力し、[プロバイダのホスト]を選択します

ポップアップが開き、ログイン時に表示されます
次のステップでは、アプリケーションのタイプとして、MVCまたはWebformを選択します。ここでMCVを選択しています
どのようにアドインを認証するのですか？で、Windows Azure Access Control Serviceを使用を選択し、完了をクリックします。
ソリューションエクスプローラでは、2つのプロジェクトが作成されていることがわかります。 1つはSharePoint app-partで、もう1つはasp.net web appです

コーディングを開始します

ここで私は基本的なニュースアプリの例を取っています

SharePointデベロッパーサイトを開き、ニュース記事を保存するためのリストを作成する
カスタムリストを作成し、さらに3つの列を追加しますBody、Summery、ThumbnailImageUrl
私たちの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>

これはニュース記事の本文を示す完全な記事ページのコードです

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow