Uncategorized

SharePoint Add-ins : App part の開発

By on • ( 10 Comments )

最新の SharePoint 開発については SharePoint Framework を参照してください。(この開発手法は、古い情報です。)

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=". . .">  <ClientWebPartName="ClientWebPart1" ...><Content Type="html"  Src="" />. . .  </ClientWebPart></Elements>

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

<Elements xmlns=". . .">  <ClientWebPartName="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/">  <ClientWebPartName="ClientWebPart1"title=''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) のサイトに接続して、タイトルを取得しています。(ただ単にタイトルを出しているだけですが、結構な処理を裏側でおこなっているわけです。)

注記 : 最新の Office Developer Tools (Visual Studio) が作成する Client Web Part は、Remote App (https://localhost) ではなく、App Web (https://{your domain namespace}-xxxxx.sharepoint.com) にホストされます。

補足 : 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=". . .">  <ClientWebPartName="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 アドイン) に名称変更

 

Categories: Uncategorized

Tagged as: , ,

10 replies»

  1. Pingback: SharePoint アドイン (SharePoint Add-ins) の動作と概要 – tsmatz
  2. Pingback: SharePoint Add-ins: .NET CSOM を使ったプログラミングと認証 (Authentication) – tsmatz
  3. Pingback: SharePoint の Cross-domain library – tsmatz
  4. Pingback: SharePoint Add-ins : List の開発と Client Side Rendering (CSR) – tsmatz
  5. Pingback: SharePoint Add-ins : UI Custom Action の開発 (Ribbon のカスタマイズ) – tsmatz
  6. Pingback: SharePoint Add-ins : Workflow の開発 – tsmatz
  7. Pingback: SharePoint Add-ins: On-Premises と Office 365 で動く Add-in を作成するには (Authentication) – tsmatz
  8. Pingback: Visual Studio 2013 のクラウド ビジネス アプリ (Cloud Business App) – tsmatz
  9. Pingback: SharePoint アドイン (SharePoint Add-ins) の制限と PnP による回避 – tsmatz
  10. Pingback: SharePoint Add-ins: Remote Event Receiver の開発と Debug – tsmatz

Leave a Reply