松崎 剛 Blog

This Blog's theme : エンタープライズ開発 (Server side)、Office サーバ開発

SharePoint Add-ins : App part の開発

SharePoint Add-ins : App part の開発

  • Comments 0

環境 :
Office 365 (Preview)
Visual Studio 2012
Microsoft Office Developer Tools for Visual Studio 2012 (Preview)

SharePoint Add-ins 開発

こんにちは。

今週は、SharePoint Add-ins の App Part の動作と開発手法について解説します。

すみません、既に Microsoft Office Developer Tools Preview2 がリリースされたのですが、今週は出張中でして、次回から使用したいと思います。(今週は知識注入中。。。インストールとか検証は、また来週以降に実施します。)

 

App Part (Client Web Part) の超概要

App Part は、Apps 版の Web Part です。
SharePoint Add-ins の概要 で解説したように、新しい SharePoint Add-ins では、リモート実行のモデルを採用しています。Web Part も例外ではなく、Remote の実行モデルを踏襲し、Parts として挿入される UI 要素は iframe を使って挿入するようになっていて、この iframe の中のページを、Azure など、リモートで実行される Web ページとして開発します。
(このため、いくつか留意点がありますが、後ほど記載します。)

 

App Part (Client Web Part) の構築手順

では早速、構築方法と動作を見ていきましょう。後述しますが、今回は、「.NET CSOM を使ったプログラミングと認証」で作成したコードをそのまま活用します。

まず、前回の「.NET CSOM を使ったプログラミングと認証」と同じ手順で、Provider-hosted の Remote App のプロジェクトを新規作成します。
また、「.NET CSOM を使ったプログラミングと認証」と同様、SharePoint サイト (Host web) にアクセスして、ページ (Default.aspx) 上にサイトのタイトルを表示する簡単なページを作成します。(プロジェクトが作成する既定のコードのままでも構いません。)
前回作成したコードを復習すると、下記の通りです。(書き写すの大変なので、認証部分は省略して記載します。)

. . .

protected void Page_Load(object sender, EventArgs e)
{
  // ready JsonWebSecurityTokenHandler
  . . .

  // Create JsonWebSecurityToken from JWT string
  . . .

  // Get principalName from JWT
  . . .

  // Get OAuth refresh token from JWT
  . . .

  // Get app realm from JWT
  . . .

  // Get host web authority
  . . .

  // Get sts endpoint for OAuth S22
  . . .

  // Get access token from refresh token
  . . .

  // Get web title
  ClientContext clCtx = new ClientContext(hostWeb);
  clCtx.AuthenticationMode = ClientAuthenticationMode.Anonymous;
  clCtx.FormDigestHandlingEnabled = false;
  clCtx.ExecutingWebRequest +=
    delegate(object oSender, WebRequestEventArgs webRequestEventArgs)
    {
      webRequestEventArgs.WebRequestExecutor.RequestHeaders["Authorization"]
        = "Bearer " + accessToken;
    };
  clCtx.Load(clCtx.Web, web => web.Title);
  clCtx.ExecuteQuery();

  Response.Write("Web title is " + clCtx.Web.Title);
}
. . .

つぎに、プロジェクトに App Part を追加します。
Add-ins プロジェクト (・・・Web という名前の Web プロジェクトではありません) をマウスで右クリックして、[Add] - [New item] を選択します。表示されるダイアログで、[Office/SharePoint] グループの [Client Web Part (Host Web)] を選択して、[OK] ボタンを押します。(下図)

作成された App Part (Client Web Part) の Elements.xml を開くと、以下の通り記述されています。

<Elements xmlns=". . .">
  <ClientWebPart
    Name="ClientWebPart1" ...>
    <Content Type="html"
      Src="" />
    . . .

  </ClientWebPart>
</Elements>

前述の通り、App Part は iframe で表示されます。上記の Src 属性に、iframe で表示する Web ページの Url を設定します。
今回は、下記太字の通り、ここに Remote App の Default.aspx (先ほどコードを記載したページ) を設定します。

<Elements xmlns=". . .">
  <ClientWebPart
    Name="ClientWebPart1" ...>
    <Content Type="html"
      Src="~remoteAppUrl/Pages/Default.aspx?{StandardTokens}" />
    . . .

  </ClientWebPart>
</Elements>

上記の記述方法に注意してください。
.NET CSOM を使ったプログラミングと認証」で紹介した AppManifest.xml と同じように、~remoteAppUrl や {StandardTokens} などのトークンが使用できます。(ここに、「.NET CSOM を使ったプログラミングと認証」で解説した内容と同じ情報が設定されます。) また、「.NET CSOM を使ったプログラミングと認証」と同じように、JWT を含んだ token もページに POST されます。
即ち、前回使用した Default.aspx のコード (上述のコード) は、いっさい変更することなく、そのまま使用できます。(Host web にアクセスをおこなって、サイトのタイトルを取得できます。)

なお、今回は ~remoteAppUrl トークンを使用していますが、~appWebUrl トークンを使って App web (sharepoint-hosted) の Page (Page Module) を使用することもできます。(この場合は、すべて JavaScript で記述してください。)

 

配置と動作確認

再度、上述の Elements.xml を開き、App Part の名前、説明などを下記 (太字) の通り編集します。

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ClientWebPart
    Name="ClientWebPart1"
    Title="Test AppPart1"
    Description="This is test !"
    DefaultWidth="300"
    DefaultHeight="200">
    . . .

さいごに、いつものように Permission の設定をおこなって、デバッグ実行してみましょう。

配置先の SharePoint サイト (Host web) で Page を新規作成し、リボンの [Insert] タブの [App part] ボタンを押すと、下図の通り、カスタムの App Part が表示されます。[Add] ボタンを押して、この App Part をページに挿入します。

挿入すると、「.NET CSOM を使ったプログラミングと認証」と同様に、SharePoint サイトのタイトルが表示されます。
今回はデバッグ実行をおこなっているので、この Add-ins は localhost で実行されています。つまり、この Parts は、前述の通り localhost の iframe として表示されています。
.NET CSOM を使ったプログラミングと認証」で解説したように、localhost から JWT を使用して OAuth の認証をおこない、Office 365 (SharePoint Online) のサイトに接続して、タイトルを取得しています。(ただ単にタイトルを出しているだけですが、結構な処理を裏側でおこなっているわけです。)

補足 : IE の F12 開発者ツールで確認するとわかりますが、実際は、下記の ifarme が挿入され、Remote App (今回は、localhost) にリダイレクトされます。(この際、必要なトークンの情報などが POST されています。)
https://<host web>/_layouts/15/appredirect.aspx?redirect_uri=<Remote App with Query String>

注意 : デバッグ実行をおこなった際、App part の挿入時に Internet Explorer の警告 (Internet Explorer blocked this website from displaying content with security certificate errors) が表示されると思います。(下図)
これは、https://localhost にリダイレクトする際、IIS Express が使用している SSL (https) の証明書 (開発用の証明書) がクライアントにインストールされていないためです。このためデバッグ時は、「.NET CSOM を使ったプログラミングと認証」と同様、この証明書を、あらかじめ、ルート (Trusted Root Certification Authorities) にインストールしておいてください。


 

カスタム プロパティの使用

以前、「SharePoint における実用的なカスタム Web パーツ (WebPart) の開発」で解説したように、SharePoint 2010 の WebPart ではカスタム プロパティを使用できました。App Part でも、同じようにカスタム プロパティが使用できます。

例えば、上記の App Part に Append Text というカスタム プロパティを追加し、このプロパティが設定されている場合、Parts に「Web title is <Site Title>(<Value of Append Text>)」と表示してみましょう。

まず、さきほどの Elements.xml に、下記太字の通り追記します。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns=". . .">
  <ClientWebPart
    Name="ClientWebPart1" ...>

    <Content Type="html"
         Src="~remoteAppUrl/Pages/Default.aspx?{StandardTokens}&amp;AppendTest=_appendtest_" />

    <Properties>
      <Property Name="appendtest"
        Type="string"
        WebBrowsable="true"
        WebDisplayName="Append Text"
        WebDescription="This is test property !"
        WebCategory="Custom Properties"
        DefaultValue=""
        RequiresDesignerPermission="true" />
    </Properties>

  </ClientWebPart>
</Elements>

上記のプロパティ (AppendText) を使用して、コードを変更します。今回は、以下 (太字) の通りです。(プログラマーの方なら、特に説明は不要ですね。)

protected void Page_Load(object sender, EventArgs e)
{
  . . .

  // Get web title
  . . .

  string prop1 = Page.Request["AppendTest"];
  Response.Write("Web title is " + clCtx.Web.Title +
    (string.IsNullOrEmpty(prop1) ? "" : "(" + prop1 + ")"));
}

動作を確認してみましょう。
上記と同様、ページに App Part を挿入し、今度は、下図の通り [Edit Web Part] メニューを選択します。

表示されるプロパティ画面には、下図の通り、Append Text という名前のカスタム プロパティが表示されます。

上記に「test」と入力して [OK] ボタンを押すと、下図の通り App Part が再表示されるのが確認できます。

今回は String 型のプロパティを 1 つ追加しただけですが、さまざまな型のプロパティが追加できます。(型にあわせて、専用のコントロールが表示されます。)

 

※ 変更履歴 :

2015/05/05  App for SharePoint (SharePoint 用アプリ) を SharePoint Add-ins (SharePoint アドイン) に名称変更

 

Leave a Comment
  • Please add 2 and 4 and type the answer here:
  • Post