SharePoint アドインのホスト Web にカスタムのリボン ボタンを作成する

これは、SharePoint ホスト型 SharePoint アドインの開発の基本に関する一連の記事の 9 番目です。 SharePoint アドイン とこのシリーズの前の記事については、「 SharePoint ホスト型 SharePoint アドインの作成の概要」|次の手順。

注:

SharePoint ホスト型アドインに関するこのシリーズを続けて学習してきた方は、このトピックでも引き続き使用できる Visual Studio ソリューションをお持ちです。 また、SharePoint_SP-hosted_Add-Ins_Tutorials でリポジトリをダウンロードし、BeforeRibbon.sln ファイルを開くこともできます。

すべての SharePoint アドインは、アドインのタイルをクリックすることによって、ホスト Web の [サイト コンテンツ] ページから実行できます。 SharePoint アドインの機能は、カスタム アクション (カスタム リボン ボタンまたはカスタム メニュー項目) としてホスト Web に公開することもできます。 この記事では、ホスト Web 上のリボンにボタンを追加します。

ホスト Web を準備する

ホスト Web の予定表のリボンにボタンを追加するには、SharePoint 開発者向けサイトの UI で次の手順を実行します。

1. サイトのホーム ページで、[サイト コンテンツ]>[追加とアドイン]>[予定表] の順に選択します。

2. [予定表の追加] ダイアログで、[名前] に「新入社員オリエンテーションのスケジュール」と入力してから、[作成] を選択します。

3. 予定表が開いたら、いずれかの日付にカーソルを合わせて [追加] リンクが表示されるまで待機し、その後 [追加] をクリックします。

4. [社員オリエンテーション スケジュール - 新しいアイテム] ダイアログで、[タイトル] に「Cassi Hicks に対するオリエンテーション」と入力します。 他のフィールドを既定のままにし、[保存] を選択します。

   予定表は、次のようになります。

   図 1. カスタムの予定表

   

重要

次の手順では、Visual Studio の UI に予定表を表示する必要がありますが、予定表を作成したときに Visual Studio が開いていた場合はそうなりません。 続行する前に、Visual Studio を閉じて、開発者向けサイトにサインインしているすべてのブラウザー ウィンドウと PowerShell コンソールからもサインアウトします。

リボン カスタム アクションを追加する

1. ソリューション エクスプローラーで、EmployeeOrientation プロジェクトを右クリックして、[追加]>[新しいアイテム]>[Office/SharePoint]>[リボン カスタム アクション] の順に選択します。 「RunOrientationAdd-in」という名前を付けて、[追加] を選択します。

2. [リボンのカスタム アクションの作成] ウィザードがいくつか質問します。 次の表の中から回答し、[完了] を選択してください。

   プロパティの質問	回答
   カスタム アクションの公開先はどこにしますか?	[ホスト Web] を選択します。
   カスタム アクションのスコープ先はどこにしますか?	[リスト インスタンス] ([リスト テンプレート] ではない) を選択します。
   どの特定の項目をカスタム アクションのスコープ先にしますか?	[社員オリエンテーションのスケジュール] を選択します。
   コントロールはどこにありますか?	ドロップダウン選択は使用しません。 代わりに、「Ribbon.Calendar.Events.Actions.Controls._children」と入力します。 (3 番目の部分である Events はリボンのタブを識別し、4 番目の部分である Actions はボタンのグループを識別します。)
   メニュー項目のテキストは何ですか?	「社員オリエンテーション」と入力します。
   カスタム アクションの移動先はどこですか?	ドロップダウン選択は使用しません。 代わりに、「~appWebUrl/Lists/NewEmployeesInSeattle」と入力します。 これはリストのリスト ビュー ページであり、アドイン Web 上にあるため、ホスト Web 上のリボン ボタンを使用すると、ページはアドイン Web ページで開きます。

アドイン Web フィーチャーを検査する

ソリューション エクスプローラーで、Features フォルダーを展開し、NewEmployeeOrientationComponents フィーチャーを選択します。 フィーチャー デザイナーが開きます。

作成したカスタム アクション RunOrientationAdd-in は、[フィーチャー内のアイテム] ではなく、[ソリューション内のアイテム] にリストされていることに注意してください。 これは、フィーチャーはアドイン Web に展開されますが、カスタム アクションはホスト Web に展開されるためです。

運用環境への展開用にアドインを Visual Studio にパッケージ化するか、Visual Studio で F5 キーを押すと、Office Developer Tools for Visual Studio は特別なホスト Web フィーチャーを作成し、カスタム アクションを追加し、それをホスト Web に展開します。 ホスト Web フィーチャーは決して編集しないでください。フィーチャーがパッケージ化の時点まで作成されないのはこのためです。

図 2. フィーチャー デザイナー

アドインを実行してテストする

1. F5 キーを使用して、アドインを展開して実行します。 Visual Studio はテスト用 SharePoint サイトにアドインを一時的にインストールし、すぐにアドインを実行します。

2. SharePoint アドインの既定のページが開きます。 開発者向けサイトのホーム ページ (つまり、ホスト Web) に移動します。 ページの左上に階層リンクがあります。

3. ホスト Web のホーム ページで、[サイト コンテンツ] を選択し、[サイト コンテンツ] ページで、[社員オリエンテーションのスケジュール] 予定表 ([社員オリエンテーション] アドインではない) をクリックします。

4. 予定表が表示されたら、[Cassie Hicks に対するオリエンテーション] イベントをクリックします。 リボンの [イベント] タブが自動的に開かない場合は、手動で開いてください。 次のようになります。

   図 3. カスタム ボタンがあるリボンのイベント タブ

   

5. リボンの [アクション] グループで、[社員オリエンテーション] をクリックします。 [シアトルの新入社員] のリスト ビュー ページが開きます。

6. デバッグ セッションを終了するには、ブラウザー ウィンドウを閉じるか、Visual Studio でデバッグを停止します。 F5 を選択するたびに、Visual Studio によって、以前のバージョンのアドインが取り消され、最新のバージョンがインストールされます。

7. このアドインおよび他の記事の Visual Studio ソリューションを操作し、ひととおり操作を終了したら前回のアドインを取り消すとよいでしょう。 ソリューション エクスプローラーでプロジェクトを右クリックして、[取り消し] を選択します。

次の手順

このシリーズの次の記事では、JavaScript を SharePoint アドインに追加し、JavaScript オブジェクト モデルを使用して SharePoint データにアクセスします: SharePoint データで動作するように SharePoint JavaScript API を使用する。